Safari Web Extension background request CORS issues

Can you send a feedback report via Feedback Assistant with a test extension? Thanks!

Hi @timothy,
I re-tested my extension, actually it is my server issue, after I added the following headers in response

Access-Control-Allow-Origin: safari-web-extension://<guid>
Access-Control-Allow-Headers: <some request header we sent>

Safari background page makes the requests successfully.

However, this is still something extension developers may concerns about, should Safari check the CORS in the extension background page? I feel that the background page is not a normal webpage, extension developers may make API requests to the servers out of their control, if this CORS limit is applied, then a lot of the background requests will fail because of this web-extension protocol Origin

Compared with Chrome and Firefox, these browsers always approve the CORS request even if the origin mismatch.

Just would like to know if Apple have any plan remove this CORS limit in background page.

Thanks a lot

What I mean, is CORS requests are allowed in the background and pop up pages if the extension has those domains in their manifest permissions.

Thanks a lot @timothy for pointing out all these
Yes, I added the URL to manifest permission (it seems the wild cards url https://*/ has no effect on unblocking CORS), and the CORS request works fine in the background.
Thank you for the help!

Hello luxu, I have been facing with same CORS issue with my web extension. Can you share what URL permission was added to the manifest? This would help me try the same.

Hello luxu, I have been facing with same CORS issue with my web extension. Can you share what URL permission was added to the manifest? This would help me try the same.

luxu/swaminathanv, did you guys ever find working solution? I'm now trying on manifest 3 and trying this approach with host_permissions without success.

I am currently having the issue in Manifest v3 (In Manifest v2 everything works fine)

In my manifest I have this:

"host_permissions": [
        "*://example.com/*"
    ]

When I do fetch("https://example.com") in background.js I get these errors:

[Error] Fetch API cannot load https://example.com/ due to access control checks.
[Error] Failed to load resource: Origin safari-web-extension://e0b5d7c7-c079-484b-8825-44d261383cb6 is not allowed by Access-Control-Allow-Origin. Status code: 200 (example.com, line 0)

Is there a way to avoid CORS issues without altering server access control settings?

My Stackoverflow questions: https://stackoverflow.com/questions/73712933/cors-issue-during-http-request-from-background-service-worker-in-safari-web-exte

Link to GitHub repo with the project to reproduce the issue: https://github.com/nick-kadutskyi/safari-ext-cors-issue

Additional link to download project files to reproduce the issue: https://web.tresorit.com/l/DKcJu#83UK96xDiX0g9P35gehUsw

To test the issue:

1. Allow Unsighned Extensions in Safari > Develop menu item
2. Run the project in Xcode
3. Once extension is installed open console for background page Develop → Web Extension Background Pages → Test CORS Issue Extension - Service Worker
4. In main window navigate to https://example.com (you will need to allow the extension to access this domain via action button) or click action button in a toolbar (both actions will trigger fetch function in background script)

Update 1:

The workaround for now to use background scripts (deprecated in Manifest v3) instead of background service worker.

Instead of this:

"background": {
        "service_worker": "background.js"
    },

Do this:

 "background": {
        "scripts": ["background.js"]
    },

Disappointing, but the fix of switching from service_worker to the background script worked for our extension as well. Otherwise we get CORS issues. This seems like a bug in Safari with its service_worker implementation in Manifest v3.

Also note, the GUID for Safari web extensions changes every launch of Safari to avoid website fingerprinting.

If this is true, then how are you supposed to add a Safari extension to an Access-Control-Allow-Origin header? We'd like our extension to be able to POST data but it needs to be added to the header for CORS. We don't want to add safari-web-extension://* because that seems to be opening us up for cross-origin attacks from other extensions (unlikely, but you never know)