How to stop CORB from blocking requests to data resources that respond with CORS headers?

Based on the examples in "Changes to Cross-Origin Requests in Chrome Extension Content Scripts", I replaced all invocations of fetch with a new method fetchResource, that has a similar API, but delegates the fetch call to the background page:

// contentScript.jsfunction fetchResource(input, init) {  return new Promise((resolve, reject) => {    chrome.runtime.sendMessage({input, init}, messageResponse => {      const [response, error] = messageResponse;      if (response === null) {        reject(error);      } else {        // Use undefined on a 204 - No Content        const body = response.body ? new Blob([response.body]) : undefined;        resolve(new Response(body, {          status: response.status,          statusText: response.statusText,        }));      }    });  });}// background.jschrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {  fetch(request.input, request.init).then(function(response) {    return response.text().then(function(text) {      sendResponse([{        body: text,        status: response.status,        statusText: response.statusText,      }, null]);    });  }, function(error) {    sendResponse([null, error]);  });  return true;});

This is the smallest set of changes I was able to make to my app that fixes the issue. (Note, extensions and background pages can only pass JSON-serializable objects between them, so we cannot simply pass the Fetch API Response object from the background page to the extension.)

Background pages are not affected by CORS or CORB, so the browser no longer blocks the responses from the API.

See https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

To improve security, cross-origin fetches from content scripts are disallowed in Chrome Extensions since Chrome 85. Such requests can be made from extension background script instead, and relayed to content scripts when needed.

You can do that to avoid Cross-Origin.

Old content script, making a cross-origin fetch:

var itemId = 12345;var url = "https://another-site.com/price-query?itemId=" +         encodeURIComponent(request.itemId);fetch(url)  .then(response => response.text())  .then(text => parsePrice(text))  .then(price => ...)  .catch(error => ...)

New content script, asking its background page to fetch the data instead:

chrome.runtime.sendMessage(    {contentScriptQuery: "queryPrice", itemId: 12345},    price => ...);

New extension background page, fetching from a known URL and relaying data:

chrome.runtime.onMessage.addListener(  function(request, sender, sendResponse) {    if (request.contentScriptQuery == "queryPrice") {      var url = "https://another-site.com/price-query?itemId=" +              encodeURIComponent(request.itemId);      fetch(url)          .then(response => response.text())          .then(text => parsePrice(text))          .then(price => sendResponse(price))          .catch(error => ...)      return true;  // Will respond asynchronously.    }  });

Allow the URL in manifest.json (more info):

• ManifestV2 (classic): "permissions": ["https://another-site.com/"]
• ManifestV3 (upcoming): "host_permissions": ["https://another-site.com/"]

Temporary solution: disable CORB with run command browser--disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

Example run command on Linux.

For Chrome:

chrome %U --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

For Chromium:

chromium-browser %U --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

Similar question.

Source.