Get best of the week

Bloqueio de leitura de origem cruzada (CORB) nas extensões do Chrome

imagem

Se você desenvolveu uma extensão para o Chrome, pode ser que pare de funcionar.

O motivo é que, a partir do ano passado, as solicitações de origem cruzada de scripts de conteúdo são bloqueadas no navegador Chrome. Isso significa que, se sua extensão acessar alguma API de terceiros diretamente do script de conteúdo, essa solicitação será bloqueada graças ao CORB (Cross-Origin Read Blocking)

A maneira recomendada de resolver o problema de bloqueio é transferir solicitações do script de conteúdo para o script em segundo plano. Exemplo da documentação:

Script de conteúdo antigo:

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

Novo script de conteúdo:

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

Novo script em segundo plano:

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

Preste atenção também ao fato de que você não deve fazer um proxy a partir de um script em segundo plano, ou seja, O URL não deve ser enviado como uma mensagem do script de conteúdo para o script de segundo plano para receber dados, mas vale a pena determinar a URL dentro do script de segundo plano com base nos dados da mensagem. Assim, no exemplo acima, a URL para o pedido é determinada a partir das contentScriptQuery e parâmetros ItemId . Um exemplo de uma mensagem "ruim", tirada da documentação:

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

PS: estou

desenvolvendo extensões para Firefox e Chrome, mas o navegador principal é o Firefox e verifico o desempenho no Chrome ao baixar uma nova versão da extensão. Outro dia, descobri que uma das minhas extensões parou de funcionar, você adivinhou, graças ao CORB. Verifique suas extensões para que isso não seja uma surpresa para você.

More articles:


All Articles