How can I override javascript files that link to crossorigin = "anonymous" using the Google Chrome extension?

Question

The HTML response of a website with a domain like http://www.example.com has many javascript files. One of them refers to a javascript file in another domain, and this script tag has the crossorigin="anonymous" attribute:

 <script crossorigin="anonymous" src="//cdn.example.net/script.js"></script> 

I tried redirecting the request to a different URL using the Google Chrome extension:

 chrome.webRequest.onBeforeRequest.addListener(function(info) { return { redirectUrl: "http://example.org/custom.js" }; }, { urls: [ "*://cdn.example.net/script.js" ], types: ["script"] }, ["blocking"]); 

However, when I try to load the site, I get an error in the javascript console:

Redirection at the beginning of http://cdn.example.net blocked from downloading by Cross-Origin resource sharing policy: an incorrect answer was received.
The origin of http://www.example.com is therefore not permitted.

If I intercept the HTML response manually (outside of Chrome) and crossorigin="anonymous" attribute, it works as expected.

I have a file in http://example.org/custom.js to submit:

 Access-Control-Allow-Origin: * 

I also tried removing / changing the response headers from www.example.com , but that does not seem to matter. Response headers (for reference) from the main frame:

 HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Vary: Accept-Encoding Status: 200 OK X-XSS-Protection: 1; mode=block X-Content-Type-Options: nosniff X-UA-Compatible: chrome=1 Cache-Control: no-cache, no-store X-Frame-Options: SAMEORIGIN P3P: CP="NOI DSP COR NID ADMa OPTa OUR NOR" Content-Encoding: gzip 

There are other javascript files that load after this, and depend on it, and I would like to leave them as they are.

Again, the main problem seems to be the crossorigin="anonymous" tag (which, from what I can say, supposedly has the main purpose of choosing whether the error information will be displayed )

How to write a Google Chrome extension to override javascript that runs from this source?

Answer 1

Your solution attempts do not work, because the corresponding CORS- only headers are those served by the source resource. If this CORS check succeeds, then redirects are checked, etc.

However, it seems that the initial CORS check failed. I reported this error at https://code.google.com/p/chromium/issues/detail?id=387198 .

There is a workaround. Starting with Chromium 35.0.1911.0, you can forward requests to the chrome.webRequest.onHeadersReceived event. Cross-origin request redirection at this point seems to work if you set access-control-allow-origin: * along with redirectUrl . A small drawback of this approach is that the request is not immediately redirected, but only after receiving a response from the request for origin. If the original request results in an error, for example. 404, then your redirect will not happen at all. However, this is the only way to get the desired effect until the error is fixed.

 chrome.webRequest.onHeadersReceived.addListener(function(info) { return { responseHeaders: info.responseHeaders.concat([{ name: 'access-control-allow-origin', value: '*' }]), redirectUrl: "http://localhost:2222/custom.js" }; }, { urls: [ "*://example.net/script.js" ], types: ["script"] }, ["blocking", "responseHeaders"]); 

Note. Regardless of the method, the redirection target should also include the appropriate access-control-allow-origin header, or the request will still be aborted with the following error:

Redirection in the source " http://example.net " is blocked from downloading according to the Cross-Origin resource sharing policy: the header "Access-Control-Allow-Origin" is present on the requested resource. The origin of http://localhost:4444 'is therefore not allowed.