SecurityError：阻止原始帧访问跨源帧

我正在加载一个<iframe>在我的HTML页面，并尝试使用Javascript访问其中的元素，但是当我尝试执行我的代码，我得到以下错误： 

 SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.

你能帮我find一个解决scheme，以便我可以访问框架中的元素？

我正在使用此代码进行testing，但徒劳无功： 

 $(document).ready(function() { var iframeWindow = document.getElementById("my-iframe-id").contentWindow; iframeWindow.addEventListener("load", function() { var doc = iframe.contentDocument || iframe.contentWindow.document; var target = doc.getElementById("my-target-id"); target.innerHTML = "Found it!"; }); });

同源安全策略

你不能用Javascript访问<iframe> ，如果你能做到的话，这将是一个巨大的安全漏洞。 对于同源策略 浏览器，阻止尝试访问具有不同来源的帧的脚本 。

如果地址的以下部分中的至less一个未被维护，则来源被认为是不同的： 

 <protocol>://<hostname>:<port>/path/to/page.html

如果您想访问一个框架，则协议 ， 主机名和端口必须与您的域相同。

例子

以下是试图从http://www.example.com/home/index.html访问以下url的情况 

 URL RESULT http://www.example.com/home/other.html -> Success http://www.example.com/dir/inner/another.php -> Success http://www.example.com:80 -> Success (default port for HTTP) http://www.example.com:2251 -> Failure: different port http://data.example.com/dir/other.html -> Failure: different hostname https://www.example.com/home/index.html.html -> Failure: different protocol ftp://www.example.com:21 -> Failure: different protocol & port https://google.com/search?q=james+bond -> Failure: different hostname & protocol

解决方法

即使同源策略阻止脚本访问不同来源站点的内容，但如果您拥有这两个页面，则可以使用window.postMessage及其相关message事件在两个页面之间发送消息来解决此问题 ，例如这个：

  • 在你的主页上： 

     var frame = document.getElementById('your-frame-id'); frame.contentWindow.postMessage(/*any variable or object here*/, '*');

  • 在您的<iframe> （包含在主页面）中： 

     window.addEventListener('message', function(event) { // IMPORTANT: Check the origin of the data! if (~event.origin.indexOf('http://yoursite.com')) { // The data has been sent from your site // The data sent with postMessage is stored in event.data console.log(event.data); } else { // The data hasn't been sent from your site! // Be careful! Do not use it. return; } });

这个方法可以在两个方向上应用，也可以在主页面上创build一个监听器，并接收来自框架的响应。 同样的逻辑也可以在popup窗口中实现，基本上由主页面生成的任何新窗口（例如，使用window.open() ）也没有任何区别。

在浏览器中禁用同源策略

关于这个话题已经有了一些很好的答案（我刚刚发现他们使用google），所以，对于可能的浏览器，我会链接相关的答案。 但是，请记住， 禁用同源策略（或CORS）只会影响您的浏览器 。 此外，运行浏览器禁用同源安全设置将授予任何网站访问跨源资源，所以这是非常不安全的， 应该只是为了开发目的 。

  • 谷歌浏览器
  • 火狐浏览器
  • 苹果Safari：不可能， 只有CORS 。
  • 歌剧：不可能。
  • 微软边缘：不可能。
  • Microsoft Internet Explorer：不可能， 只有CORS 。

补充Marco Bonelli的回答：当前帧/ iframe之间交互的最佳方式是使用window.postMessage ， 所有浏览器都支持

检查域的Web服务器的X-Frame-Options http://www.<domain>.comconfiguration这是一个安全function，旨在防止点击劫持攻击，

clickJacking如何工作？

  1. 邪恶的页面看起来完全像受害者页面。
  2. 然后它欺骗用户input他们的用户名和密码。

从技术上讲，邪恶有一个iframe与受害者页面的来源。 

 <html> <iframe src='victim_domain.com'/> <input id="username" type="text" style="display: none;/> <input id="password" type="text" style="display: none;/> <script> //some JS code that click jacking the user username and input from inside the iframe... <script/> <html>

安全function的工作原理

如果要防止在iframe呈现Web服务器请求，请添加x-frame-options

X-Frame-Options DENY

选项是：

  1. SAMEORIGIN //只允许我自己的域在iframe中渲染我的HTML。
  2. DENY //不允许我的HTML在任何iframe中呈现
  3. “允许从https://example.com/”/ /允许特定的域在iframe中呈现我的HTML

这是IISconfiguration示例： 

  <httpProtocol> <customHeaders> <add name="X-Frame-Options" value="SAMEORIGIN" /> </customHeaders> </httpProtocol>

问题的解决scheme

如果Web服务器激活了安全function，它可能会导致客户端SecurityError，因为它应该。

    Interesting Posts

    jQuery / JavaScript：访问一个iframe的内容