Blocked from accessing an Iframe with origin 'null'

Question

I am using an iframe for a pseudo-ajax file upload. The iframe is in the same view as the upload javascript:

<iframe id="upload_iframe" name="upload_iframe" style="position: absolute; left: -999em; top: -999em;"></iframe>

his works 'nicely' on my local machine, but when I deploy to an Azure web site, I get the following error in Chrome's debug console:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://acme.azurewebsites.net" from accessing a frame with origin "null". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "data". Protocols must match.

I understand this iframe to be same-origin, as it is strictly local, but how do I convince the browser that it is local? That is, is there something I should be doing to the origin and protocol of my iframe to avoid this error?

This is my code, in a nutshell:

dataAccess.submitAjaxPostFileRequest = function (completeFunction) {
    $("#userProfileForm").get(0).setAttribute("action", $.acme.resource.links.editProfilePictureUrl); 
    var hasUploaded = false;
    function uploadImageComplete() {
        if (hasUploaded === true) {
            return;
        }
        var responseObject = JSON.parse($("#upload_iframe").contents().find("pre")[0].innerText);
        completeFunction(responseObject);
        hasUploaded = true;
    }
    $("#upload_iframe").load(function() {
        uploadImageComplete();
    });
    $("#userProfileForm")[0].submit();
};

The form userProfileForm has its target property set to the iframe. This upload arrangement seems to work for most requests, and I don't know if the 'uncaught exception' message is just an observation on Chrome's part, or a potential show stopper. Is there not perhaps a way I can 'catch and ignore' such an exception, and just display a generic message if this happens?

Have you tried using a dummy URL on the same site for the IFRAME's src attribute? Example: <iframe src='blank.html'></iframe>. Or alternately injecting the IFRAME into the doc on demand instead of in advance? — nothingisnecessary

nothingisnecessary nothingisnecessary · Accepted Answer · 2014-12-16T15:43:30

This may depend on your browser, but the IFRAME element is generally not supported for the data protocol, see Wikipedia entry:

http://en.wikipedia.org/wiki/Data_URI_scheme

It may have worked on localhost because localhost can use different authentication & authorization methods (for example on Windows it may run as a trusted site, and may pass your windows user credentials to server automatically, etc.). Same origin I believe means protocol, host, and port must all match. Since data protocol is different than https this is not same origin, hence the security error.

Usually the data protocol is only supported by these elements:

object (images only) (ie: not activeX controls)
img
input type=image
link
CSS declarations that accept a URL

Can you post more of your code and problem statement? There are multiple other ways to accomplish file uploads. For example, traditional POST method (single file), HTML5 method (multi files), or even using javascript to send a stream of bytes to a web service (I did this once in an ActiveX control that used TWAIN to scan documents on user's computer and then upload the scanned image to the website).

Blocked from accessing an Iframe with origin 'null'

1 Answers