google chrome - ¿Cómo evitar que CORB bloquee las solicitudes a los recursos de datos que responden con los encabezados CORS?

google-chrome google-chrome-extension

Question

Estoy desarrollando una extensión de Chrome que realiza solicitudes de ciertos sitios web a una API que controlo. Hasta Chrome 73, la extensión funcionó correctamente. Después de actualizar a Chrome 73, comencé a recibir el siguiente error:

El bloqueo de lectura de origen cruzado (CORB) bloqueó la respuesta de origen cruzado http://localhost:3000/api/users/1 con la aplicación de tipo MIME / json

De acuerdo con la documentación de Chrome en CORB , CORB bloqueará la respuesta de una solicitud si se cumplen todas las siguientes condiciones:

1. El recurso es un "recurso de datos". Específicamente, el tipo de contenido es HTML, XML, JSON.

2. El servidor responde con un encabezado de X-Content-Type-Options: nosniff , o si este encabezado se omite, Chrome detecta que el tipo de contenido es HTML, XML o JSON al inspeccionar el archivo

3. CORS no permite explícitamente el acceso al recurso

Además, de acuerdo con "Lecciones de Spectre and Meltdown" (Google I / O 2018) , parece que puede ser importante agregar mode: cors para fetch invocaciones, es decir, fetch(url, { mode: ''cors'' }) .

Para intentar arreglar esto, hice los siguientes cambios:

Primero, agregué los siguientes encabezados a todas las respuestas de mi API:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Origin: https://www.example.com

En segundo lugar, actualicé mi invocación fetch() en la extensión para tener este aspecto:

fetch(url, { credentials: ''include'', mode: ''cors'' })

Sin embargo, estos cambios no funcionaron. ¿Qué puedo cambiar para que mi solicitud no sea bloqueada por CORB?

Answer 1

Basándome en los ejemplos de different , reemplacé todas las invocaciones de fetch con un nuevo método fetchResource , que tiene una API similar, pero delega la llamada fetch a la página de fondo:

// contentScript.js
function fetchResource(input, init) {
  return new Promise((resolve, reject) => {
    chrome.runtime.sendMessage({input, init}, messageResponse => {
      const [response, error] = messageResponse;
      if (response === null) {
        reject(error);
      } else {
        // Use undefined on a 204 - No Content
        const body = response.body ? new Blob([response.body]) : undefined;
        resolve(new Response(body, {
          status: response.status,
          statusText: response.statusText,
        }));
      }
    });
  });
}

// background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  fetch(request.input, request.init).then(function(response) {
    return response.text().then(function(text) {
      sendResponse([{
        body: text,
        status: response.status,
        statusText: response.statusText,
      }, null]);
    });
  }, function(error) {
    sendResponse([null, error]);
  });
  return true;
});

Este es el conjunto más pequeño de cambios que pude realizar en mi aplicación que soluciona el problema. (Tenga en cuenta que las extensiones y las páginas de fondo solo pueden pasar los objetos serializables JSON entre ellos, por lo que no podemos simplemente pasar el objeto Fetch API Response de la página de fondo a la extensión).

Las páginas de fondo no se ven afectadas por CORS o CORB, por lo que el navegador ya no bloquea las respuestas de la API.

Answer 2

Consulte different

Para mejorar la seguridad, las recuperaciones de origen cruzado pronto serán rechazadas de los scripts de contenido en las Extensiones de Chrome. Dichas solicitudes pueden hacerse desde páginas de fondo de extensión en su lugar, y retransmitirse a los scripts de contenido cuando sea necesario.

Puedes hacer eso para evitar el origen cruzado.

Antiguo script de contenido, haciendo una búsqueda de origen cruzado:

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, que pide a su página de fondo para obtener los datos en su lugar:

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

Nueva página de fondo de extensión, recuperando una URL conocida y transmitiendo datos:

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

Answer 3

Solución temporal: deshabilite CORB con el explorador de comandos de ejecución --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

Ejemplo de comando de ejecución en Linux.

Para Chrome:

chrome %U --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

Para el cromo:

chromium-browser %U --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

Pregunta similar

Source