1

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?

Wolfman Joe
  • 799
  • 1
  • 8
  • 23
  • Yes, this is a known behaviour. – Praveen Kumar Purushothaman May 26 '16 at 16:16
  • When working with Iframes remember `http://www.example.com != http://example.com` – George May 26 '16 at 16:26
  • @PraveenKumar - OK, so what's the known solution? – Wolfman Joe May 26 '16 at 16:31
  • @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 May 26 '16 at 16:32
  • @WolfmanJoe Not anything that I know of. But will update if I come to know something. – Praveen Kumar Purushothaman May 26 '16 at 16:48
  • @PraveenKumar Could you point me at something which demonstrates this as 'known behaviour'? Because everything I can find suggests that with same-domain, I should be able to do this. – Wolfman Joe May 26 '16 at 16:50
  • @WolfmanJoe Also check: http://stackoverflow.com/questions/7995223 – Praveen Kumar Purushothaman May 26 '16 at 16:52
  • @PraveenKumar Yes, I've seen that. It's all about different-domains. I'm on the same domain. Unless you're pointing at something I'm missing. – Wolfman Joe May 26 '16 at 16:53
  • @WolfmanJoe `X-Frame-Options` determines if a page is allowed to be displayed inside a frame. It doesn't grant cross-origin JS permission. – Praveen Kumar Purushothaman May 26 '16 at 16:54
  • @PraveenKumar You may have linked me to the wrong page, because there is nothing about x-frame-options on the page you linked. I'll start doing research on that phrase, though I was rather hoping it'd be on the part of the program that was changed instead of the part of the program that wasn't, and is used multiple places. – Wolfman Joe May 26 '16 at 16:59
  • @PraveenKumar According to this: https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options - this is something done for the server not inside the html for individual pages. There is NO issue with the page being displayed inside a frame. That is happening fine. It is only accessing it via javascript from the parent which is failing. You are not answering the question I am asking. – Wolfman Joe May 26 '16 at 17:02
  • @WolfmanJoe Did any answer come up? I am more interested now. – Praveen Kumar Purushothaman May 27 '16 at 00:27
  • @PraveenKumar Not yet. Still looking. I'll answer my own question if I figure it out. – Wolfman Joe May 27 '16 at 14:24
  • 1
    @PraveenKumar Got it working. I don't understand WHY, but I got it working. – Wolfman Joe May 27 '16 at 19:02

2 Answers2

0

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>
Vijendra Kumar Kulhade
  • 2,217
  • 3
  • 15
  • 25
  • 1
    Tried that. Didn't help. These are not on different domains, and entering this into both locations and referencing the same domain hasn't fixed the problem. – Wolfman Joe May 26 '16 at 17:12
0

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.

Wolfman Joe
  • 799
  • 1
  • 8
  • 23