javascript - Chrome blocking iframe requests as cross-origin request even when origins are the same - Stack Overflow

admin管理员组

文章数量:1327488

This one has me stumped.

I have a web app that has a file upload/download area. Files are downloaded in the background via a temporary iFrame element. This is a single-paged AJAX application and the UI is written in Javascript, jQuery and uses the jQuery.FileDownloader.js to manage the iFrame. The application runs over HTTPS and the site and download URL are on the same exact domain. The back-end is a RESTful application. This has worked great for months. Until today.

All of a sudden, when attempting to download a file in Chrome, the browser reports an error of "Blocked a frame with origin from accessing a cross-origin frame."

The problem is that the origin of the main site and that of the iframe are the exact same domain. I have ensured that the domains are the same as well as the protocol. Chrome is the only browser that throws up the cross-origin error. IE, Firefox, Opera, Safari... all work as expected. It's only in Chrome and it's only as of today. To make things worse, no updates were made to the browser. It truly is spontaneous. I've also ruled out plugins as the cause by running in Incognito mode, where none are allowed to run by my settings, as well as disabling my anti-virus software. This problem is being exhibited on other puters, in other locations (not on our LAN or subnet), all running Chrome.

And, again, both domains of the parent frame and the embedded iframe are identical. This only happens against the production server which runs over HTTPS. Other non-HTTPS sites (e.g. our dev environment, localhost) don't have the problem. Our SSL is valid. Since this is a single-paged AJAX application, we're trying to avoid popping up another window for the download.

Hopefully, someone can offer some advice. Thanks in advance.

Update: After additional research, I have found the solution to this problem is to enclose the filename in the response header in double-quotes.

This one has me stumped.

I have a web app that has a file upload/download area. Files are downloaded in the background via a temporary iFrame element. This is a single-paged AJAX application and the UI is written in Javascript, jQuery and uses the jQuery.FileDownloader.js to manage the iFrame. The application runs over HTTPS and the site and download URL are on the same exact domain. The back-end is a RESTful application. This has worked great for months. Until today.

All of a sudden, when attempting to download a file in Chrome, the browser reports an error of "Blocked a frame with origin https://example. from accessing a cross-origin frame."

The problem is that the origin of the main site and that of the iframe are the exact same domain. I have ensured that the domains are the same as well as the protocol. Chrome is the only browser that throws up the cross-origin error. IE, Firefox, Opera, Safari... all work as expected. It's only in Chrome and it's only as of today. To make things worse, no updates were made to the browser. It truly is spontaneous. I've also ruled out plugins as the cause by running in Incognito mode, where none are allowed to run by my settings, as well as disabling my anti-virus software. This problem is being exhibited on other puters, in other locations (not on our LAN or subnet), all running Chrome.

And, again, both domains of the parent frame and the embedded iframe are identical. This only happens against the production server which runs over HTTPS. Other non-HTTPS sites (e.g. our dev environment, localhost) don't have the problem. Our SSL is valid. Since this is a single-paged AJAX application, we're trying to avoid popping up another window for the download.

Hopefully, someone can offer some advice. Thanks in advance.

Update: After additional research, I have found the solution to this problem is to enclose the filename in the response header in double-quotes.

• javascript
• jquery
• ajax
• rest

Share Improve this question Follow edited Jul 17, 2014 at 18:52 PeterToTheThird asked Mar 18, 2014 at 0:15 PeterToTheThirdPeterToTheThird 39711 gold badge22 silver badges1010 bronze badges 4

• Probably a shot in the dark since you note that the protocol is the same, but are you sure you're accessing the <iframe> via https:? The error message you quote has http:. – Stephen Thomas Commented Mar 18, 2014 at 0:27
• That was just bad copying on my part. It is, indeed, https. – PeterToTheThird Commented Mar 18, 2014 at 0:32
• Any chance, you are using a protocol-less url? - //example./ – palanik Commented Mar 18, 2014 at 15:49
• Nope. Chrome's Developer Tools Network view shows the call as being HTTPS and to the same domain. – PeterToTheThird Commented Mar 18, 2014 at 16:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I have found the cause of the problem. It turns out that Google Chrome has problems with files that have mas in their filename. When downloading the file via a direct link, Chrome will report that duplicate headers were reported from the server. This has been a long-standing problem with Chrome that has gone un-addressed. Other browsers are not susceptible to this problem. Still, it's a fairly easy problem to troubleshoot and, indeed, when I searched on this error, the first search result had the solution: remove mas from filenames when handling a request from Google Chrome.

However, this wasn't a direct link, it was an AJAX-request, which results in a different exception. In this case, the error provided by Chrome is the cross-origin request exception and this is what made it so difficult to troubleshoot.

So, the tl;dr of it all is to strip out mas in the names of uploaded files.

Another instance I found where this issue occurred is after executing code similar to:

document.domain = '[the exact same domain that the iframe originally had]'

Removing this line of code got rid of this error for me.

本文标签：