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

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

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

Рекомендуемый путь решения проблемы с блокировкой — перенос запросов из 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 проверяю при загрузке новой версии расширения. На днях обнаружил, что одно из моих расширений ^[3] перестало работать, как вы уже догадались, благодаря CORB. Проверьте свои расширения, чтоб это не стало для вас таким же неожиданным сюрпризом.

Автор: ris58h

Источник ^[4]