在同一域上的IE9中的contentDocument上"拒绝访问"

Question

短/通用版本:

我正在开发一个应用程序(不幸的是,出于其他原因),将document.domain每个页面的顶部设置为"true"域的子字符串:对于子域名,例如sub.app.local,document.domain = "app.local".我也在动态创建一个iframe并将其添加到页面中.iframe加载与父页面位于同一服务器上的文件.稍后,一些Javascript需要访问contentDocumentiframe 的属性.

这在现代浏览器中很好,但由于此错误导致IE9中出现问题.(请参阅最佳答案以获得对此原因的详细解释.)AFAIK,每个比IE9更新的浏览器都会自动继承document.domain以编程方式创建的iframe,因此这是IE9特有的.由于我的场景的一些独特要求(tldr:iframe src需要更改),上面帖子中的答案对我不起作用.

更长/特定于应用程序的版本:

我在IIS上运行的应用程序中使用FineUploader,将文件上传到S3.在现代浏览器中,一切都运行良好,但IE9支持给我带来麻烦,即使在遵循文档(支持IE9及更早版本)配置iframeSupport.localBlankPagePath选项之后也是如此.我有点难过!

• 我在FineUploader 4.0.3和5.0.3上都尝试过这个.
• 在IE11中一切正常.如果我在F12控制台中将文档模式切换为9,则会中断.
• 我没有打开CORS支持,因为我没有从其他域加载任何东西.
• 我在与我的页面相同的域中有一个虚拟/空白文件.
• 我可以看到(在"网络"面板中)来自AWS的包含Location密钥的HTTP 303响应,以及指向我的空白文档的值.如果我将整个网址粘贴到地址栏中,页面会正常加载,并且按预期显示为空白.
• 我已尝试添加X-Frame-Options SAMEORIGIN到服务器的响应标头,如此处所示,但它没有帮助.

我在控制台中遇到的错误是:

[Fine Uploader 5.0.3] Error when attempting to access iframe during handling of upload response (Access is denied.
)
[Fine Uploader 5.0.3] Amazon likely rejected the upload request

UPDATE

我已经确定它不是开箱即用的原因是因为应用程序设置document.domain了页面加载,并且它与(子集)不同location.host.FineUploader的303重定向机制到空白页面工作正常,但document.domainiframe的不同之处(由于IE9没有继承属性),因此拒绝访问.

实际的S3上传工作正常.这只是验证上传失败的最后一步.

这是我的客户端代码:

FineUploader.js

var fu = namespace('App.FineUploader');
fu.DocId;
fu.ClientDeployId;
fu.viewModel;
fu.defaultAttachmentEndpoint = "https://s3.amazonaws.com/App.UploadBucket";
fu.FineUploaderController = "FineUploaderDocAttachment";

fu.delete = function (documentAttatchmentID, attachmentID) {
    var data = documentAttatchmentID;
    $.ajax({
        type: "POST",
        url: App.BaseUrl + "/api/" + fu.FineUploaderController + "/delete",
        data: JSON.stringify(data),
        success: function () {
            $('#fineUploader' + attachmentID).fineUploader('reset');
            $('#fineUploader' + attachmentID).show();
            $('#aDownloadfineUploader' + attachmentID).html('');
            $('#aDownloadfineUploader' + attachmentID).hide();
            $('#aDeletefineUploader' + attachmentID).hide();
        },
        dataType: 'json',
        contentType: 'application/json'
    })
}

fu.lockAll = function () {
    $('.fineUploader').hide();
    $('a[id^="aDeletefineUploader"]').hide();
}

fu.init = function (sID) {
    $('#' + sID).fineUploaderS3({
        request: {
            endpoint: fu.defaultAttachmentEndpoint,
            accessKey: "[key]",
            params: {
                documentid: $('#' + sID).attr('documentid'),
                attachmentid: $('#' + sID).attr('attachmentid')
            }
        },
        signature: {
            endpoint: App.BaseUrl + "/api/" + fu.FineUploaderController + "/signtureHandler"
        },
        uploadSuccess: {
            endpoint: App.BaseUrl + "/api/" + fu.FineUploaderController + "/success"
        },
        iframeSupport: {
            localBlankPagePath: App.BaseUrl + "/Scripts/FineUploader/4.0.3/html/blank.html"
        },
        objectProperties: {
            key: function (fileId) {
                var keyRetrieval = new qq.Promise(),
                    filename = $('#' + sID).fineUploader("getName", fileId);
                var documentid = $('#' + sID).attr('documentid');
                var attachmentid = $('#' + sID).attr('attachmentid');
                var data = { name: filename, documentId: documentid, attachmentId: attachmentid }
                $.ajax({
                    type: "POST",
                    url: App.BaseUrl + "/api/" + fu.FineUploaderController + "/preUpload",
                    data: JSON.stringify(data),
                    success: null,
                    dataType: 'json',
                    contentType: 'application/json'
                }).done(function (data) {
                    keyRetrieval.success(data.key);
                }).fail(function () {
                    keyRetrieval.failure();
                });
                return keyRetrieval;
            }
        },
        validation: {
            itemLimit: 1
        },
        chunking: {
            enabled: true
        }
    }).on('error', function (event, id, name, errorReason, xhrOrXdr) {
        alert(qq.format("Error on file number {} - {}.  Reason: {}", id, name, errorReason));
    }).on('complete', function (event, id, name, response) {
        if (fu.FineUploaderController === "FineUploaderDocLibraryAttachment") {
            $('#' + sID).fineUploader('reset');
            App.Contracts.Create.ReloadImageLibraryList(true);
            App.Contracts.Create.HideLoader();
        } else {
            $('#aDownload' + sID).attr('href', response.url);
            $('#aDownload' + sID).html(response.name);
            $('#aDownload' + sID).show();
            $('#aDelete' + sID).show();
            $('#aDelete' + sID).attr('onclick', 'App.FineUploader.delete(' + response.daId + ',' + sID.replace('fineUploader', '') + ');');
            $('#' + sID).hide();
        }
    }).on('submitted', function () {
        if (fu.FineUploaderController === "FineUploaderDocLibraryAttachment") {
            App.Contracts.Create.ShowLoader();
        }
    });
}

Answer 1

（如果有人在 FineUploader 的上下文之外偶然发现这个答案，这个想法就是我的解决方案的基础。）

为了实现这一点，我将 FineUploader 的 Blank.html 稍微设置为非空白：

<head>
<script type="text/javascript">
    // Provide a mechanism to override document.domain
    // inside the iframe via this url syntax: blank.html?[args]#domain.com
    if (location.hash.substring(1).length > 0)
        document.domain = location.hash.substring(1);
</script>
</head><body></body>

document.domain这为我提供了一种在生成 iframe 时从父页面提供正确值的方法。对FineUploader配置对象稍作修改：

$.fineUploaderS3({
[snip]
    iframeSupport: {
        localBlankPagePath: App.BaseUrl + "/Scripts/FineUploader/4.0.3/html/blank.html#" + document.domain
    },
[/snip]
}

这似乎不会干扰 AWS 前置的参数。我们在此应用程序中仍然使用 FineUploader 4.0.3，但这也应该适用于最新版本。

TL，博士；有用！在 IE11 文档模式和本机 IE9 下进行了测试。