IFRAME Permission Denied Solution

By  on  

I was recently rolling my own AJAX upload script, posting a form to a hidden IFRAME and using the load event to know when the upload was complete.  When the upload completed, I wanted to access the IFRAME content so I could verify that the upload completed successfully.  Surprisingly I ran into the following JavaScript error:

Error: Permission denied to access property 'document'

If you were using jQuery, you may see this error instead:

Error: Permission denied to access property 'nodeType'

This confused me because I knew that my IFRAME was accessing an address on the same host, including protocol. After pulling my hair out and sending a plea for ideas on Twitter, Daniel Buchner mentioned a server-side header that I needed to adjust to allow for accessing that frame's nodes: x-frame-options. The header can have values of NONE or SAMEORIGIN, and setting the x-frame-options to SAMEORIGIN fixed my issue!

If you continue seeing a "Permission Denied" error, it's very possible you're trying to do a cross-origin request, and that simply wont allow you access to the IFRAME content, unless a CORS configuration has been added.

Recent Features

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • By
    MooTools Equal Heights Plugin:  Equalizer

    Keeping equal heights between elements within the same container can be hugely important for the sake of a pretty page. Unfortunately sometimes keeping columns the same height can't be done with CSS -- you need a little help from your JavaScript friends. Well...now you're...

  • By
    Create a Context Menu with Dojo and Dijit

    Context menus, used in the right type of web application, can be invaluable.  They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available.  Dojo's Dijit frameworks provides an easy way to create stylish, flexible context...

Discussion

  1. I’ve had to deal with this before, too.

    You’ll need to make sure that you are correctly referencing the correct context with jQuery, otherwise, from what I understand, it is working off of the parent window’s “document” object.

    Here’s a link for reference: http://thomas.bindzus.me/2007/12/24/adding-dynamic-contents-to-iframes/

  2. Gregg Moore

    Thanks for tip, D!

  3. Vladimir Cristian Popa

    The way I’ve dealt with this when I first made an AJAX upload, was to put a javascript function in the iframe. Since I controlled the contents of the iframe, I’ve put a small function call in the iframe, with the needed parameters:

    success = false;
    message = "The file is too large!";
    window.top.uploadFinished(success, message);
    
  4. Thomas Mack

    Thanks!

    On one user’s firefox, we saw this problem starting in some point of time. Before that time or using the Internet Explorer, there was no problem. And no other user encountered such a problem ever – needless to say, I couldn’t verify the problem here.

  5. Prachi

    Hi David

    I am doing cross-origin communication using postMessage. I want to access the elements within the document within the iframe using javascript. However, I get the permissions error. You said that this can be resolved by using CORS settings. Do these settings have to be applied in our iframe? or in the other environment? If you know of a resource that explains this clearly, please let me know of that.

    Thanks
    Prachi

  6. Hi David,

    Big fan of your blog, thanks for posting this.

    I’m running into a similar issue, I’m dynamically creating the iframe and using JS to .submit() the form once the iframe load event is fired. How are you sending the custom headers? Here is a piece of my code:

    if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
    if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);
    
    // Set properties of form...
    form.setAttribute("target", "upload_iframe");
    form.setAttribute("action", action_url);
    form.setAttribute("method", "post");
    form.setAttribute("enctype", "multipart/form-data");
    form.setAttribute("encoding", "multipart/form-data");
    

    Let me know your thoughts, looking forward to your response.

    Thanks a lot,
    Jeff

  7. Where are the custom headers? If you mean like server headers, you can’t send those from a post to an Iframe :/

  8. Raphael Cohen

    Just a note on this: I have noticed that you cannot set custom headers in your request when using the IFrame technique for uploading files (for IE9 and below). I ran into a webservice which required that a token be passed in the header (X-AUTH-TOKEN) when uploading a file. I have found no way of modifying the headers of multi-part upload form. I had to inform the client that he would need to change his webservice if we wanted it to work with IE9 and below.

  9. This didn’t work for me. I’ve tried everything and the weird thing is that this ONLY happens in Firefox Android. The domain and origin are the same between the iFrame and parent and work fine everywhere else I’ve tested.

    I can even reproduce the bug by specifying to Desktop Firefox that it is running Android as the user agent and triggering the responsive template.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!