sbr*_*rm1 23 html javascript xss iframe access-control
我有一个HTML文档,其中包含一个iframe.每当我尝试iframe使用JS 访问或修改它时,我都会得到Error: Permission denied to access property "document".
我正在使用frame.contentWindow.document.body.innerHTML或frame.contentWindow.document.body.onload类似的这些属性来访问或修改iframe.(在给定的代码iframe中称为frame.)
对于我正在开发的web-app,访问这些属性是必要的,我不能没有这些(或类似的替代品).
sbr*_*rm1 21
访问并修改iframe其他网站中的网页称为跨站点脚本,或者XSS它是恶意黑客用来捕获毫无戒心的受害者的技术.
浏览器制造商实施了名为"同源策略"的策略,以防止此类行为和JS代码的任意执行.
通过将父文档和文档托管iframe在同一域和子域中,并确保使用相同的协议加载文档,可以防止此错误.
不兼容页面的示例:
http://www.example.org & http://www.example2.comhttp://abc.example.org & http://xyz.example.comhttp://www.example.org & https://www.example.com跨源资源共享是此问题的解决方案.
例如:
如果http://www.example.com要http://www.example.com/hello与之共享http://www.example.org,可以使用如下所示的文档发送标头:
Access-Control-Allow-Origin: http://www.example.org
要使用HTML发送它,只需将其放入<META HTTP-EQUIV="...">标记中,如下所示:
<head>
...
<META HTTP-EQUIV="Access-Control-Allow-Origin" CONTENT="http://www.example.org">
...
</head>
您可以使用postMessage
窗口1 - 接收
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
var origin = event.origin || event.originalEvent.origin;
// For Chrome, the origin property is in the event.originalEvent object.
if (origin !== "http://example.org:8080")
return;
// ...
}
窗口 - 2发射
var popup = window.open(...popup details...);
popup.postMessage(
"The user is 'bob' and the password is 'secret'",
"https://secure.example.net"
);
您必须创建另一对以进行相互通信.
即使您无法访问接收窗口的标题部分,仍可以借助YQL绕过此问题.使用Postmessage方法,您还需要编辑收件人窗口脚本.但是使用此方法,您可以加载任何iframe而无需触及其脚本.看一下这个!
<html>
<iframe src="https://google.com/" width="500" height="300"></iframe>
<script>
var iframe = document.getElementsByTagName('iframe')[0];
var url = iframe.src;
var getData = function (data) {
if (data && data.query && data.query.results && data.query.results.resources && data.query.results.resources.content && data.query.results.resources.status == 200) loadHTML(data.query.results.resources.content);
else if (data && data.error && data.error.description) loadHTML(data.error.description);
else loadHTML('Error: Cannot load ' + url);
};
var loadURL = function (src) {
url = src;
var script = document.createElement('script');
script.src = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=getData';
document.body.appendChild(script);
};
var loadHTML = function (html) {
iframe.src = 'about:blank';
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html.replace(/<head>/i, '<head><base href="' + url + '"><scr' + 'ipt>document.addEventListener("click", function(e) { if(e.target && e.target.nodeName == "A") { e.preventDefault(); parent.loadURL(e.target.href); } });</scr' + 'ipt>'));
iframe.contentWindow.document.close();
}
loadURL(iframe.src);
</script>
</html>