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>.com
configuration这是一个安全function,旨在防止点击劫持攻击,
clickJacking如何工作?
- 邪恶的页面看起来完全像受害者页面。
- 然后它欺骗用户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
选项是:
- SAMEORIGIN //只允许我自己的域在iframe中渲染我的HTML。
- DENY //不允许我的HTML在任何iframe中呈现
- “允许从https://example.com/”/ /允许特定的域在iframe中呈现我的HTML
这是IISconfiguration示例:
<httpProtocol> <customHeaders> <add name="X-Frame-Options" value="SAMEORIGIN" /> </customHeaders> </httpProtocol>
问题的解决scheme
如果Web服务器激活了安全function,它可能会导致客户端SecurityError,因为它应该。