IFRAME Permission Denied Solution
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.
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/
Thanks for tip, D!
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);
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.
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