Cross-Origin Read Blocking (CORB) в расширениях для Chrome

Если вы когда-то разработали расширение для Chrome, то может оказаться, что оно перестало работать.

Причина в том, что начиная аж с прошлого года, в браузере Chrome блокируются Cross-Origin запросы из content-скриптов. Это означает, что если ваше расширение обращается к некоторому строннему API напрямую из content-скрипта, такой запрос будет заблокирован благодаря Cross-Origin Read Blocking (CORB)

Рекомендуемый путь решения проблемы с блокировкой — перенос запросов из content-скрипта в background-скрипт. Пример из документации:

Старый content-скрипт:

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 => ...)

Новый content-скрипт:

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

Новый background-скрипт:

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

Также обращают внимание на то, что не стоит делать proxy из background-скрипта, т.е. не следует передавать сообщением из content-скрипта в background-скрипт URL для получения данных, а стоит определять URL внутри background-скрипта исходя из данных в сообщении. Так, в примере выше, URL для запроса определяется из параметров contentScriptQuery и itemId. Пример «плохого» сообщения, взятый из документации:

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

P.S.:

Разрабатываю расширения для Firefox и Chrome, но основной браузер — Firefox, а работоспособность в Chrome проверяю при загрузке новой версии расширения. На днях обнаружил, что одно из моих расширений перестало работать, как вы уже догадались, благодаря CORB. Проверьте свои расширения, чтоб это не стало для вас таким же неожиданным сюрпризом.

Автор: ris58h

Источник