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

"Access is Denied" on contentDocument in IE9 on same domain

本文关键字:IE9 contentDocument 中的 访问 quot 拒绝      更新时间:2023-09-26

简短/通用版本:

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

这在现代浏览器中是可以的,但由于这个错误,在IE9中会出现问题。(请参阅最上面的答案,以很好地解释为什么会这样。(AFAIK,每个比IE9更新的浏览器都会自动继承程序创建的iframe的document.domain,所以这是特定于IE9的。由于我的场景的一些独特要求(tldr:iframe-src需要更改(,上面帖子中的答案对我不起作用。

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

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

  • 我已经在FineUploader 4.0.3和5.0.3上尝试过了
  • IE11中一切正常。如果我在F12控制台中将文档模式切换到9,它就会中断
  • 我没有打开CORS支持,因为我没有从其他域加载任何内容
  • 我的页面所在的域中有一个伪/空白文件
  • 我可以(在"网络"面板中(看到来自AWS的HTTP 303响应,其中包括Location密钥和一个指向我的空白文档的值。如果我将整个URL粘贴到地址栏中,页面加载良好,并且如预期的那样是空白的
  • 我已经尝试过将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



更新

我已经确定,它不能开箱即用的原因是应用程序在页面加载时设置了document.domain,并且它不同于location.host的(子集(。FineUploader的303重定向到空白页的机制运行良好,但iframe的document.domain与父级不同(由于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();
        }
    });
}

(如果有人在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>

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

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

这似乎不会干扰AWS准备的论点。我们仍然在这个应用程序中使用FineUploader4.0.3,但这也应该适用于最新版本。

tl,dr它有效!在IE11文档模式和本机IE9中进行了测试。

该错误表明iframe所服务的页面确实与承载上传程序的页面不在同一域。要么是这样,要么你有一些插件/扩展引起了麻烦。根据错误,Fine Uploader根本无法访问iframe中的任何内容,当iframe的域与承载上传程序的框架/页面的域不匹配时,就会发生这种情况。