对同域iframe的权限被拒绝

I have been working on updating some legacy software. We recently updated several long-overdue-for-update tools used in our system, and with those updates, our working libraries of jQuery and AngularJS have changed.

我一直在努力更新一些遗留软件。我们最近更新了我们系统中使用的几个长期更新的工具,随着这些更新,我们的jQuery和AngularJS工作库发生了变化。

I have gotten most of our code working with the new updates, but this one piece has been stymieing me for quite a while. I am TOLD that this worked perfectly well before the update, and stopped working afterwards. I have no way of testing this claim.

我已经让我们的大部分代码都使用了新的更新,但这一篇文章已经让我停滞了很长一段时间。我告诉我,这在更新之前运行得很好,之后就停止了工作。我无法测试这个说法。

Using ng-import, We bring in the following code:

使用ng-import,我们引入以下代码:

<iframe id="uploadFrame" width="250" height="50" frameborder="0" ng-src="/store/client/productscripts/binderCreate/partials/upload.html?dealer={{dealer}}" name="uploadFrame" scrolling="no" marginwidth="0" marginheight="0">
</iframe>

The relevant file looks like this:

相关文件如下所示:

<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>

The user uses the file input in the iFrame to upload their new image. Then, once it's loaded, we have a button outside of the iFrame meant to trigger the iFrame's form to submit. This way, we can have the user upload their image and immediately see the result without needing to reload the entire form. After adding in a lot of tracking code to try to determine what the javascript was seeing, and trying several different ways of accessing the iFrame DOM ( .contentWindow.document, .contentDocument, etc) This code looks like so:

用户使用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() )
}

The error I receive at the designated line is:

我在指定行收到的错误是:

Error: Permission denied to access property "document"

错误:拒绝访问属性“文档”的权限

Since the iframe is referencing a page on the same domain, I don't see why the permission should be denied. Question being, of course: Why is my permission being denied to access that DOM? Alternatively, how should I be doing this to make it work?

由于iframe引用了同一域上的页面,因此我不明白为什么应该拒绝该权限。问题当然是:为什么我的权限被拒绝访问该DOM?或者,我应该怎么做才能使它工作?

2 个解决方案

#1

For Iframe you can set you domain like this. and you should be able to avoid Error: Permission denied to access property "document"

对于Iframe,您可以像这样设置域名。你应该能够避免错误:拒绝权限访问属性“文档”

  <script type="text/javascript">
        window.document.domain = "ourdomain.com";
    </script>

#2

I haven't figured out what was wrong, here, but I got it working. Unfortunately, it makes no sense.

在这里,我还没弄清楚出了什么问题,但是我确实做到了。不幸的是,它毫无意义。

At a higher level in the program, a piece was imported using ng-import, as so:

在程序的更高级别,使用ng-import导入一个片段,如下所示:

ng-import="'client/productscripts/binderCreate/partials/'"

When updated to:

更新为:

ng-import="'/store/client/productscripts/binderCreate/partials/'"

It began working properly. The change made no difference in whether or not the ng-import worked. The ng-import worked all along. But making that change at a higher level caused the code at this level to suddenly start working. Apologies for not including enough of the problem - it never occurred to me that a higher-level ng-import which seemed to be working just fine would affect things in this way.

它开始正常工作。这种变化对ng-import是否有效没有影响。 ng-import一直在努力。但是,在更高级别上进行更改会导致此级别的代码突然开始工作。抱歉没有包括足够的问题 - 我从来没有想过,更高级别的ng-import似乎工作得很好会以这种方式影响事情。

#1