阻止访问原点为“null”的 Iframe

Question

我正在使用 iframe 进行伪 ajax 文件上传。iframe 与上传 javascript 处于同一视图中：

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

他在我的本地机器上“很好”地工作，但是当我部署到 Azure 网站时，我在 Chrome 的调试控制台中收到以下错误：

未捕获的安全错误：无法从“HTMLIFrameElement”中读取“contentDocument”属性：阻止了来源为“ https://acme.azurewebsites.net ”的框架访问来源为“null”的框架。请求访问的帧具有“https”协议，被访问的帧具有“数据”协议。协议必须匹配。

我理解这个 iframe 是同源的，因为它是严格本地的，但是我如何说服浏览器它是本地的？也就是说，我应该对 iframe 的来源和协议做些什么来避免这个错误？

这是我的代码，简而言之：

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();
};

表单userProfileForm的target属性设置为 iframe。这种上传安排似乎适用于大多数请求，我不知道“未捕获的异常”消息是否只是 Chrome 的一个观察结果，还是一个潜在的节目阻止者。也许没有一种方法可以“捕获并忽略”这样的异常，并且在发生这种情况时只显示一条通用消息？

Answer 1

这可能取决于您的浏览器，但该协议IFRAME通常不支持该元素data，请参阅维基百科条目：

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

它可能在本地主机上工作，因为本地主机可以使用不同的身份验证和授权方法（例如，在 Windows 上，它可以作为受信任的站点运行，并且可以自动将 Windows 用户凭据传递到服务器等）。我认为同源意味着协议、主机和端口必须全部匹配。由于data协议不同，https这不是同源，因此存在安全错误。

通常数据协议仅由这些元素支持：

• 对象（仅限图像）（即：不是 activeX 控件）
• 图像
• 输入类型=图像
• 关联
• 接受 URL 的 CSS 声明

您可以发布更多代码和问题陈述吗？还有多种其他方法可以完成文件上传。例如，传统的 POST 方法（单个文件）、HTML5 方法（多个文件），甚至使用 javascript 将字节流发送到 Web 服务（我在使用 TWAIN 扫描用户计算机上的文档的 ActiveX 控件中执行过一次）然后将扫描图像上传到网站）。