How Chrome broke the Chrome Extensions.

I ‘m working on internal chrome extension which deals with the backend server through the API’s. One day my chrome extension unexpectedly stopped working and started throwing errors. After digging a lot I found that my extension is broken due to the latest update in chrome. Updated chrome was blocking my API responses, that's why the extension was throwing the errors. After reading the changelog for chrome I found that the chrome has added some security features which causes the extension to break.

Chrome has maintained the “allow list” of affected extensions that may continue to make such requests for the time being, but this list is available only for the extensions which are published on chrome store. To keep your extension temporarily in “allow list” file a bug here.

What is new in Chrome with the context of Chrome Extensions?

Chrome has recently launched a new security feature called Site Isolation. To prevent leaks of sensitive information, web pages are generally not allowed to fetch cross-origin data. Specifically, Site Isolation not only blocks the response but prevents the data from ever being delivered to the Chrome renderer process containing the web page, using a feature called Cross-Origin Read Blocking (CORB).

Content scripts pose a challenge for Site Isolation because they run in the same Chrome renderer process as the web page they operate on.

So, Content scripts lose the ability to fetch cross-origin data from origins in their extension’s permissions, and they will only be able to fetch data that the underlying page itself has access to.

To fetch additional data, content scripts can send messages to their extension’s background pages, which can relay data from sources that the extension author expects.

This change starts in Chrome 73 (version 73.0.3666.0).

Check if your extension is affected

If your extension makes cross-origin fetches from content scripts, then your extension may be broken and you may observe the following errors in the DevTools console:

Cross-Origin Read Blocking (CORB) blocked cross-origin response <URL> with MIME type <type>. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Migration of cross-origin fetches from content script to background

Use chrome message passing model for communicating between the contentscript.js & background.js

contentscript.js

Instead of making cross-origin fetches from contentscript.js we can send the request to background.js, in the callback we will get a response for the request we made,

chrome.extension.sendRequest({title: 'showResponse'}, 
function (response) {
  
  console.log('Response From API', response);
});

background.js

background.js will listen to such requests and make a call to API & send the response back to the requester.

chrome.extension.onRequest.addListener(function (message, sender, sendResponse) { 
 if (message.title === 'showResponse'){
  $.ajax({ 
    type: “GET”, 
    url: https://somesite.com/somelists
  }).done(function (success) {
    sendResponse(success);
  }).fail(function () {
    sendMessage(error);
  });
 }
}

Summary

Removing cross-origin fetches from content scripts is an important step in improving the security of Chrome since it helps to prevent leaks of sensitive data even when Chrome’s renderer process might be compromised.