Manifest V3 - CORS Issue

[Nej]

I'm in the process of migrating from Manifest V2 to Manifest V3 and I'm running into a CORS issue.

My extension currently uses the background (service worker) to make any CORS request.

The below example is built on top of a default installation (no setting/flag changes) of Chrome Canary (Version 80.0.3973.0 (Official Build) canary (64-bit)).

Here is my manifest:

{
  "manifest_version" : 3,
  "name"             : "Name",
  "version"          : "3.0.0",
  "description"      : "Description",
  "author"           : "Me",
  "icons"            : {
    "16"  : "16x16.png",
    "32"  : "32x32.png",
    "128" : "128x128.png"
  },
  "content_scripts"  : [
    {
      "matches"    : ["<all_urls>"],
      "run_at"     : "document_start",
      "js"         : ["content-scripts.js"]
    }
  ],
  "background" : {
    "service_worker" : "background.js"
  },
  "browser_action": {
    "default_popup": "browser-action/index.html",
    "default_title": "Name"
  },
  "host_permissions" : [
    "http://*/*",
    "https://*/*"
  ],
  "permissions" : [
    "webRequest",
    "activeTab",
    "tabs",
    "unlimitedStorage",
    "storage",
    "background",
    "notifications",
    "<all_urls>"
  ]
}

Here is my background.js code:

fetch('https://mywebsite.com/config.json').then(() => {
  console.log('it worked!');
}).catch(error => {
  console.error(error);
});

When making the above request, it falls into the "catch" block with the following error:

Access to fetch at 'https://mywebsite.com/config.json' from origin 'chrome-extension://dsjfsdkfjdsklfjdskfsdjkflsd' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

As I understand from this post (https://www.chromium.org/Home/chromium-security/extension-content-script-fetches) and (https://developer.chrome.com/extensions/migrating_to_manifest_v3) all CORS request should be done in the background, however, it seems like even though I'm running this request in the background, I'm still running into CORS restrictions.

Any help would be highly appreciated, thank you!

[Anton Bershanskiy]

In order to prevent site A from messing with another site B, browsers require server B to explicitly allow load of a resource by A via Access-Control-Allow-Origin header. This extends to extensions. In this case, site A is extension and site B is mywebsite.com. To fix the warning and allow resource load, you can make your server Access-Control-Allow-Origin: *. Note that this is a very generic value allowing any other site to load this resource. For security purposes, you should use your extension's id instead of *.

[tzatter tzatter]

Server side headers should be include below

Access-Control-Allow-Origin: *

Content-Type: application/json;charset=UTF-8

Client side headers should be include mode: "cors"

fetch(url, {

method: "GET",

mode: "cors",

}).then(response => response.json()).then((result) => {

  console.log('it worked!');

}).catch(error => {

  console.error(error);

});

2019年11月23日土曜日 9時11分24秒 UTC+9 Nej:

[PhistucK]

I have not tried the canary, I tried a snapshot build of Chromium and it worked without anything special. See https://groups.google.com/a/chromium.org/d/msg/chromium-extensions/lpu3kzdRGLo/Z3U9EJXDAAAJ for details.

(I also verified that without host_permissions, it fails, as expected.)

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/bdcea4b6-919d-4079-8473-5ea5506926ea%40chromium.org.

[Nej]

@PhistucK, thank you for your suggestion, I just tried it with Chromium and it worked.

I'm going to try it on Chrome/Canary again in the coming months to insure that Chrome/Canary will follow suite with Chromium so there are no surprises with incompatibility issues.

To the people suggesting changing Access-Control-Allow-Origin: *, I agree that is the a possible solution, however the current extension on manifest V2 has been able to access https://mywebsite.com/config.json without adding Access-Control-Allow-Origin: * headers from the server using the extension "background", so I was looking for a solution without needing to make any server changes.

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extensions+unsub...@chromium.org.