Permission denied to same-domain iframe

0
votes

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.

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: 

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

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?

2
javascriptjqueryangularjsdomiframe
Yes, this is a known behaviour. – Praveen Kumar Purushothaman
When working with Iframes remember http://www.example.com != http://example.com – George
@PraveenKumar - OK, so what's the known solution? – Wolfman Joe
@GeorgeLee - Yes, but I'm not using www. at all. And the iframe isn't referencing the domain, it starts with a slash and goes on from there - by default, the same domain. – Wolfman Joe
@PraveenKumar Got it working. I don't understand WHY, but I got it working. – Wolfman Joe

2 Answers

0
votes

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

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

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="'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.