"访问被拒绝”;在同一域的IE9中的contentDocument上
"Access is Denied" on contentDocument in IE9 on same domain
简短/通用版本:
我正在开发一个应用程序(不幸的是,由于其他原因(,它将每页顶部的document.domain
设置为"true"域的子字符串:用于像sub.app.local
、document.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的域与承载上传程序的框架/页面的域不匹配时,就会发生这种情况。
- Angular JS IE9 Hashbang url rewriting
- 在Twitter上用ie9中的空白src访问iframe的contentWindow
- 在IE9中的输入字段中输入焦点最近按钮
- 为什么jQuery 1.8不能在IE8和InternetExplorer9中使用?(截至2012年9月的IE9最新版本)
- IE9的HTML5 Canvas getImageData()函数存在问题
- 使用JavaScript在IE9中获取数据列表选项
- Ajax模式下的Jquery Select2 V4在IE9中不起作用
- jQuery无法在IE9中隐藏选项
- 对象为null或IE9中存在未定义错误
- IE9抛出错误的reactJs
- 使用jquery创建dom元素会导致ie9出现拒绝访问错误
- DreamFactory REST API POST休息/用户/会话请求总是在IE9中返回错误
- 在IE9中使用jQuery.change定位select元素
- IE9-添加和删除DOM元素会破坏父keydown事件
- 在IE9下提取IFrame的XML内容
- 触发IE9中的输入文件点击
- IE9 javascript嵌套`createElement`失败
- javascript/jQuery:在title中添加换行符——在IE9中有效,但在IE8中无效
- 为什么我的on change事件在ie9上返回空
- "访问被拒绝”;在同一域的IE9中的contentDocument上