Get best of the week

Cross-Origin Read Blocking (CORB) in Chrome Extensions

image

If you once developed an extension for Chrome, it may turn out that it has stopped working.

The reason is that starting from last year, Cross-Origin requests from content scripts are blocked in the Chrome browser. This means that if your extension accesses some third-party API directly from the content script, such a request will be blocked thanks to Cross-Origin Read Blocking (CORB)

The recommended way to solve the blocking problem is to transfer requests from the content script to the background script. Example from the documentation:

Old content script:

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:

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

New background script:

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.
    }
  });

Also pay attention to the fact that you should not make a proxy from a background script, i.e. URL should not be sent as a message from the content script to the background script to receive data, but it is worth determining the URL inside the background script based on the data in the message. So, in the example above, the URL for the request is determined from the contentScriptQuery and itemId parameters . An example of a “bad” message, taken from the documentation:

{
  contentScriptQuery: "fetchUrl",
  url: "https://example.com/any/path/or/site/allowed/here"
}

PS: I

’m developing extensions for Firefox and Chrome, but the main browser is Firefox, and I check the performance in Chrome when I download a new version of the extension. The other day, I discovered that one of my extensions stopped working, you guessed it, thanks to CORB. Check your extensions so that this does not come as a surprise to you.

More articles:


All Articles