同域 iframe 的权限被拒绝
Posted
技术标签:
【中文标题】同域 iframe 的权限被拒绝【英文标题】：Permission denied to same-domain iframe 【发布时间】：2016-09-24 18:24:17 【问题描述】：我一直在努力更新一些旧版软件。我们最近更新了我们系统中使用的几个早就应该更新的工具，随着这些更新，我们的 jQuery 和 AngularJS 工作库发生了变化。
我已经让我们的大部分代码与新的更新一起工作，但这一段已经让我困扰了很长一段时间。有人告诉我，这在更新之前效果很好，之后就停止了。我无法测试这种说法。
使用ng-import，我们引入如下代码：
<iframe id="uploadFrame" frameborder="0" ng-src="/store/client/productscripts/binderCreate/partials/upload.html?dealer=dealer" name="uploadFrame" scrolling="no" margin margin>
</iframe>
相关文件如下所示：
<html><head>(snip)</head><body>
<form id="uploadForm" enctype="multipart/form-data" method="post" action="http://other.ourdomain.com/clientbinders/upload?dealer=dealer">
<input id="uploadFileInput" type="file" name="uploadFile">
</form>
</body></html>
用户使用 iFrame 中的文件输入来上传他们的新图像。然后，一旦它被加载，我们在 iFrame 之外有一个按钮，用于触发 iFrame 的表单提交。这样，我们可以让用户上传他们的图片并立即看到结果，而无需重新加载整个表单。在添加了大量跟踪代码以尝试确定 javascript 所看到的内容，并尝试了几种不同的访问 iFrame DOM 的方法（.contentWindow.document、.contentDocument 等）之后，此代码如下所示：
function uploadFile()
var myIfrm = jQuery('#uploadFrame');
console.log("TEST #uploadFrame");
console.log(myIfrm);
console.log(myIfrm.length);
console.log("TEST #uploadFileInput");
console.log(myIfrm.contents().find('#uploadFileInput')); // ERROR HAPPENS HERE
console.log(myIfrm.contents().find('#uploadFileInput').length);
(snip: lots more tracking code and eventually a .submit() )
我在指定行收到的错误是：
错误：访问属性“文档”的权限被拒绝
由于 iframe 引用的是同一域上的页面，我不明白为什么应该拒绝该权限。当然，问题是：为什么我访问该 DOM 的权限被拒绝？或者，我应该如何做才能让它发挥作用？
【问题讨论】：
是的，这是一种已知行为。 使用 iframe 时请记住http://www.example.com != http://example.com
@PraveenKumar - 好的，那么已知的解决方案是什么？
@GeorgeLee - 是的，但我没有使用 www。一点也不。而且 iframe 没有引用域，它以斜杠开头并从那里继续 - 默认情况下，相同的域。
@PraveenKumar 搞定了。我不明白为什么，但我得到了它的工作。
【参考方案1】：
对于 Iframe，您可以像这样设置域。你应该可以避免Error: Permission denied to access property "document"
<script type="text/javascript">
window.document.domain = "ourdomain.com";
</script>
【讨论】：
试过了。没有帮助。这些不在不同的域上，将其输入到两个位置并引用同一个域并不能解决问题。【参考方案2】：我还没有弄清楚这里出了什么问题，但我得到了它的工作。不幸的是，这没有任何意义。
在程序的更高级别，使用 ng-import 导入了一个片段，如下所示：
ng-import="'client/productscripts/binderCreate/partials/'"
更新至：
ng-import="'/store/client/productscripts/binderCreate/partials/'"
它开始正常工作。该更改对 ng-import 是否有效没有任何影响。 ng-import 一直有效。但是在更高级别进行更改会导致此级别的代码突然开始工作。抱歉没有包含足够的问题 - 我从来没有想过似乎工作正常的更高级别的 ng-import 会以这种方式影响事情。
【讨论】：
是的……很奇怪。没有区别。以上是关于同域 iframe 的权限被拒绝的主要内容，如果未能解决你的问题，请参考以下文章
jquery 代码显示权限被 IE Edge 和 iframe 拒绝