How Chrome broke the Chrome Extensions.

Gopal Shimpi
Apr 17 · 3 min read

temporarilyfile 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:

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.

Aviabird

Aviabird Technologies provides enterprise software consulting in Angular, Rails, Elixir, Golang, React, Flutter and other technologies.

Gopal Shimpi

Written by

Full stack developer

Aviabird

Aviabird

Aviabird Technologies provides enterprise software consulting in Angular, Rails, Elixir, Golang, React, Flutter and other technologies.