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,因为它应该。