CODEWITHSUNDEEP
javascriptgoogle-chrome-extensionsame-origin-policyfirefox-addon-webextensions
Daniel Kats
Daniel Kats

Reputation: 5554

Firefox extension request is interpreted as CORS

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:

enter image description here

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

Upvotes: 19

Views: 6667

Answers (4)

Daniel Gospodinow
Daniel Gospodinow

Reputation: 21

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)))

Upvotes: 2

Baccata
Baccata

Reputation: 581

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.

Upvotes: 2

Maxime VAST
Maxime VAST

Reputation: 570

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.

Upvotes: 8

Andrew Swan
Andrew Swan

Reputation: 1343

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.

Upvotes: 9

Related Questions