Question

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

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

他的作品很好地＆＃39;在我的本地计算机上，但是当我部署到Azure网站时，我在Chrome的调试控制台中收到以下错误：

Uncaught SecurityError：无法阅读＆＃39; contentDocument＆＃39;属性来自＆＃39; HTMLIFrameElement＆＃39;：使用原点阻止了一个框架＆＃34; https://acme.azurewebsites.net＆＃34;从访问原始框架＆＃34;空＆＃34 ;.请求访问的帧具有＆＃34; https＆＃34;的协议被访问的帧具有＆＃34;数据＆＃34;的协议。协议必须匹配。

我理解这个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

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

通常只有这些元素支持数据协议：

对象（仅限图像）（即：不是activeX控件）
IMG
输入类型=图片
链接
接受网址的CSS声明

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

阻止访问带有来源的iframe＆＃39; null＆＃39;

1 个答案: