javascript 跨站点脚本 Iframe 权限被拒绝问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15044292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cross Site Scripting Iframe Permission Denied issue
提问by Soumya
I am getting Cross Site Scripting error on the following code.
我在以下代码中遇到跨站点脚本错误。
Javascript
Javascript
function resizeIframe(ifRef)
{
var ifDoc;
//alert(ifRef);
try
{
ifDoc = ifRef.contentWindow.document.documentElement;
}
catch( e )
{
alert(e);
try
{
ifDoc = ifRef.contentDocument.documentElement;
}
catch( ee ){
alert(ee);
}
}
//var doc = ifRef.height;
//alert(doc);
if(ifDoc)
{
ifRef.height = 1;
ifRef.style.height = ifDoc.scrollHeight+'px';
}
}
Iframe
内嵌框架
<iframe onload="resizeIframe(this)" style="margin-bottom: 16px;" src="ourteamnav/first.php" frameborder="0" scrolling="no" width="597" height="240"></iframe>
The Errors are following
错误如下
For 'e' :
前面' ：
Mozilla Firefox : Error: Permission denied to access property 'document'
Mozilla Firefox：错误：访问属性“文档”的权限被拒绝
Google Chrome : TypeError: Cannot read property 'documentElement' of undefined
谷歌浏览器：类型错误 ：无法读取未定义的属性“documentElement”
Internet Explorer : TypeError: Permission denied
Internet Explorer：类型错误：权限被拒绝
And for 'ee' :
而对于 'ee' ：
Mozilla Firefox : Error: Permission denied to access property 'documentElement'
Mozilla Firefox：错误：访问属性“documentElement”的权限被拒绝
Google Chrome : TypeError: Cannot read property 'documentElement' of null
谷歌浏览器：类型错误 ：无法读取 null 的属性“documentElement”
Internet Explorer : Error: Access is denied.
Internet Explorer：错误：访问被拒绝。
I think it can not be solved in general way as it s happening because of domain is pointing another domain. So will anyone guide me to solve it without using these property of Javascript contentDocument.documentElementor contentWindow.document.documentElementfor re-sizing the Iframe Content dynamically according to its inner Content.
我认为它无法以一般方式解决，因为它正在发生，因为域指向另一个域。那么有人会指导我在不使用 Javascript 的这些属性的情况下解决它，contentDocument.documentElement或者contentWindow.document.documentElement根据其内部内容动态地重新调整 Iframe 内容的大小。
Thanks
谢谢
回答by MarcoK
In addition to the answer of Christophe, I wanted to point out (sadly) postMessagedoesn't work on all browsers.
除了Christophe的回答之外，我还想指出（遗憾的是）postMessage不适用于所有浏览器。
Luckily, Josh Fraseralready provided a backwards compatible version of window.postMessage(). It checks if the browser supports the postMessage-method. If it does, it uses that. If not, it uses the URL(both from the iframe and the parent) to pass along data.
幸运的是，Josh Fraser已经提供了一个向后兼容的 window.postMessage() 版本。它检查浏览器是否支持postMessage- 方法。如果是，它会使用它。如果没有，它会使用URL（来自 iframe 和父级）来传递数据。
Now you can use the following methods to let both windows "talk" to eachother:
现在您可以使用以下方法让两个窗口相互“交谈”：
XD.postMessage(msg, src, frames[0]);
XD.receiveMessage(function(message){
window.alert(message.data + " received on "+window.location.host);
}, 'URL');
Just make sure you read the documentation properly, since the configuration has to be set just right.
只要确保您正确阅读文档，因为配置必须设置得恰到好处。
回答by Christophe
As you say, this is a cross-domain issue.
正如你所说，这是一个跨域问题。
If you have control on both pages you can use postMessage to exchange information between the two pages.
如果您对两个页面都有控制权，则可以使用 postMessage 在两个页面之间交换信息。
Some references:
一些参考：
- Ben Alman's example of resizing iframes
- John Resig's articleon postMessaging
- this excellent presentationon iframes (what you're interested in starts at slide 16).
- a list of libraries/pluginsthat include this technique
- Ben Alman 调整 iframe 大小的示例
- John Resig关于 postMessaging的文章
- 这个关于 iframe 的优秀演示文稿（您感兴趣的内容从幻灯片 16开始）。
- 包含此技术的库/插件列表
