Chrome Extension *Background* Script access to XMLHttpRequest has been blocked by CORS policy

user_2568945 0
Viewed 1309

I have a Chrome Extension published which luckily has a decently sized user base (thousands of users).

The background page connects to my server to verify their subscription.

For ~95% of users this works as intended, and on every machine I have tested, it works as intended.

According to https://developer.chrome.com/extensions/xhr, "a script executing in an extension's background page or foreground tab can talk to remote servers outside of its origin, as long as the extension requests cross-origin permissions." My manifest.json specifies my server domain in the permissions, and again, this is seemingly working for the vast majority of users with no issue.

Occasionally I get support requests from users who are being blocked and ultimately provide a screenshot of the background page dev console showing the error

Access to XMLHttpRequest at 'https://www.mydomainname.com/check_subscription.php?guid=example-example-example-example' from origin 'chrome-extension://abcexampleexampleexample' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What, if anything, could cause some users computers to have this issue and not others? I'm interested in anything that could cause this, whether it's something I can fix in my code, or something that users can fix on their computer, or any other solutions.

google-chrome-extension cors google-chrome
3 Answers

You just need to bypass cors policy with CORS proxy, Just prefix your URL with 'https://cors-anywhere.herokuapp.com/'

For example, if you are requesting at: https://www.mydomainname.com/check_subscription.php? , then

you have to request at : 'https://cors-anywhere.herokuapp.com/https://www.mydomainname.com/check_subscription.php?'

This URL is a proxy for CORS policy and it will work like magic.

user_110046960

This can help you

Explanation As of Chrome 73, cross site requests are blocked. (Even if you have the hosts in your permissions property.) Some sites seem to get through unblocked but I'm sure eventually most won't.

You have to make the request in a background page...

Setup Add a section to your manifest.json to point to the background page.

"background": { "scripts": ["bg_page.js"], "persistent": false } Create the background page: bg_page.js

chrome.runtime.onMessage.addListener( function(url, sender, onSuccess) { fetch(url) .then(response => response.text()) .then(responseText => onSuccess(responseText))

    return true;  // Will respond asynchronously.
} ); Then use it in main.js

chrome.runtime.sendMessage( //goes to bg_page.js url, data => dataProcessFunction(data) ); Additional Tips If you do anything like console.log() from the bg page, click the "inspect views background page" link in your extension's square in chrome's extensions manager and you'll get a separate dev tools window for everything that happens with your background page.

If you want to see the docs for yourself, check out step 2 of the Recommended Developer Actions section here: https://www.chromium.org/Home/chromium-security/extension-content-script-fetches#TOC-2.-Avoid-Cross-Origin-Fetches-in-Content-Scripts

from here

user_119393350

Have you tried adding:

Access-Control-Allow-Origin: *

to your script? The '*' character is a wild card that allows access a request to come from any domain.

For a more in-depth approach, have you considered using a pre-flight request? Some info via the MDN:

Unlike “simple requests” (discussed above), for "preflighted" requests the browser first sends an HTTP request using the OPTIONS method to the resource on the other origin, in order to determine if the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.

Lastly, and just throwing this out there since you are a Chrome extension developer, CNET offers a good article detailing the woes of the upcoming Manifest v3 in mid-January 2021. This might be a good resource to check out so you can see if you'll have any issues with your user base come the new year.

user_148054140
Related