Get best of the week

Bloqueo de lectura de origen cruzado (CORB) en extensiones de Chrome

imagen

Si alguna vez desarrolló una extensión para Chrome, puede resultar que ha dejado de funcionar.

La razón es que a partir del año pasado, las solicitudes Cross-Origin de los scripts de contenido se bloquean en el navegador Chrome. Esto significa que si su extensión accede a alguna API de terceros directamente desde el script de contenido, dicha solicitud se bloqueará gracias al Bloqueo de lectura de origen cruzado (CORB)

La forma recomendada de resolver el problema de bloqueo es transferir solicitudes desde el script de contenido al script de fondo. Ejemplo de la documentación:

Script de contenido antiguo:

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

Nuevo script de contenido:

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

Nuevo script de fondo:

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

También preste atención al hecho de que no debe crear un proxy a partir de un script de fondo, es decir, La URL no debe enviarse como un mensaje de la secuencia de comandos de contenido a la secuencia de comandos de fondo para recibir datos, pero vale la pena determinar la URL dentro de la secuencia de comandos de fondo en función de los datos del mensaje. Así, en el ejemplo anterior, la dirección URL de la solicitud se determina a partir de los contentScriptQuery y parámetros ITEMID . Un ejemplo de un mensaje "malo", tomado de la documentación:

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

PD: estoy

desarrollando extensiones para Firefox y Chrome, pero el navegador principal es Firefox, y compruebo el rendimiento en Chrome cuando descargo una nueva versión de la extensión. El otro día, descubrí que una de mis extensiones dejó de funcionar, lo adivinaste, gracias a CORB. Comprueba tus extensiones para que esto no te sorprenda.

More articles:


All Articles