Firefox extension request is interpreted as CORS

Question

When porting my Chrome extension to a Firefox web-extension, I can't make any network requests because they are blocked by the same origin policy.

As an example:

const headers = {"content-type": "application/json" };
window.fetch(myDomain + "/api/v3/token", { method: "GET", headers: headers });

This fails with the following error:

Is there a way to configure the Firefox extension to not consider these requests CORS? The same code works just fine as a Google Chrome extension.

This holds true even if the request goes to localhost.

I have tried this with jquery's $.ajax method and axios library to get the same result (works in Chrome, doesn't work in Firefox) so I don't think the problem is limited to the window.fetch API.

EDIT: I know that I can add a CORS handler on the server side, but I'm trying not to do that. And why does this work in Chrome and not in Firefox?

EDIT 2: The extension is a popup

Inhere

WebExtensions API in Firefox still has many bugs even in the core parts so maybe this is yet another one. – Comprador

Does it work when you do the same in the Firefox Scratchpad (Shift+F4 in Firefox)? – Weatherbeaten

Answer 1

This is documented here: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions

In short you need to add a host permission for localhost to mame same-origin requests by default. I don't know why Google Chrome handles this differently.

Gemot

Add what to where how? – Broca

Answer 2

For anyone who come across this issue in 2022:

Chrome is deprecating manifest V2 in favor of v3. So you'll probably end up using

host_permissions: ["*://domain/*"]

Firefox does not support manifest v3 yet (as of april 2022), you need to use:

permissions: ["*://domain/*"]

HOWEVER

If, like me, you were (successfully) specifying the port while working with chrome (i.e http://localhost:4000/*), it will not work with firefox. You need to use http://localhost/* instead, which works with both chrome and firefox.

Chelicera

To clarify your answer: one needs to use the match pattern http://localhost/* (without the port) and be given access to any port, as per docs at developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/… Right now, your answer reads ambiguously (as if you are limited to standard port in Firefox) – Aecium

Yes thank you for specifying this. I had read the documentation up to this part: developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/… But did not looked into the details of match patterns since it worked on chrome. It's worth specifying that the user interface on about:addons list the permission as valid and no warning is raised when using the port, but it is then silently ignored – Chelicera

I fn love you <3 – Macerate

Answer 3

Some notes for Firefox extensions using "manifest_version": 3:

Firefox is performing a CORS preflight request for these network requests. Chrome doesn't.

This may lead to unexpected behavior, given that this preflights are HTTP OPTIONS requests.

One may have to add the OPTIONS methods on the server endpoint.

One may also have to setup origin and header on the server endpoint.

Ptisan

Answer 4

My Firefox extension is using a V3 manifest and I was facing the exact CORS issue regardless of having host_permissions property configured in the manifest.

And as @Baccata mentioned here, it seems like Firefox is performing a CORS preflight request while Chrome doesn't.

I managed to resolve the issue by adding some basic CORS handling to my Go backend.

cors := cors.New(cors.Options{
  AllowedMethods: []string{http.MethodOptions, http.MethodHead, http.MethodGet, http.MethodPut, http.MethodDelete},
  AllowedHeaders: []string{"*"},
})

log.Fatal(http.ListenAndServe(":"+port, cors.Handler(router)))

Chesterfield