Get best of the week

CORB (Cross-Origin Read Blocking) dans les extensions Chrome

image

Si vous avez développé une fois une extension pour Chrome, il se peut qu'elle ne fonctionne plus.

La raison en est qu'à partir de l'année dernière, les demandes d'origine croisée provenant de scripts de contenu sont bloquées dans le navigateur Chrome. Cela signifie que si votre extension accède à une API tierce directement à partir d'un script de contenu, une telle demande sera bloquée grâce au blocage de lecture d'origine croisée (CORB)

La méthode recommandée pour résoudre le problème de blocage consiste à transférer les demandes du script de contenu vers le script d'arrière-plan. Exemple tiré de la documentation:

Ancien script de contenu:

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

Nouveau script de contenu:

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

Nouveau script d'arrière-plan:

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

Faites également attention au fait que vous ne devez pas créer de proxy à partir d'un script d'arrière-plan, c'est-à-dire L'URL ne doit pas être envoyée en tant que message du script de contenu au script d'arrière-plan pour recevoir des données, mais il convient de déterminer l'URL à l'intérieur du script d'arrière-plan en fonction des données du message. Ainsi, dans l'exemple ci-dessus, l'URL de la demande est déterminée à partir des paramètres contentScriptQuery et itemId . Un exemple de «mauvais» message, tiré de la documentation:

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

PS: je

développe des extensions pour Firefox et Chrome, mais le navigateur principal est Firefox, et je vérifie les performances dans Chrome lorsque je télécharge une nouvelle version de l'extension. L'autre jour, j'ai découvert qu'une de mes extensions ne fonctionnait plus, vous l'aurez deviné, grâce à CORB. Vérifiez vos extensions afin que cela ne vous surprenne pas.

More articles:


All Articles