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

    image

    Если вы когда-то разработали расширение для 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. Проверьте свои расширения, чтоб это не стало для вас таким же неожиданным сюрпризом.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 1

      0

      Давно еще, в 12 году, перевел архитектуру своих расширений на клиент-серверную схему, сервер это background, в котором и делаются внешние запросы.

      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

      Самое читаемое