阻止访问来源为“null”的 iframe

Question

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

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

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

未捕获的安全错误：无法读取“contentDocument”属性 来自“HTMLIFrameElement”：阻止了具有原点的框架 “https://acme.azurewebsites.net”来自访问具有原点的框架 “空值”。请求访问的帧具有“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

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

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

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

通常只有以下元素支持数据协议：

• 对象（仅限图像）（即：非 activeX 控件）
• img
• 输入类型=图像
• 链接
• 接受 URL 的 CSS 声明

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