Question

我正在开发Chrome扩展程序，该扩展程序可以将某些网站的请求发送到我控制的API。直到Chrome 73，该扩展程序才能正常工作。升级到Chrome 73后，我开始出现以下错误：

跨源读取阻止（CORB）阻止了跨源响应 http://localhost:3000/api/users/1，MIME类型为application / json

根据Chrome's documentation on CORB，如果满足以下所有条件，则CORB将阻止请求的响应：

资源是“数据资源”。具体来说，内容类型为HTML，XML，JSON
服务器以X-Content-Type-Options: nosniff标头作为响应，或者如果省略此标头，Chrome将通过检查文件来检测内容类型是HTML，XML还是JSON之一
CORS不允许显式访问资源

此外，根据"Lessons from Spectre and Meltdown" (Google I/O 2018)，似乎很重要的一点是将mode: cors添加到fetch调用中，即fetch(url, { mode: 'cors' })。

为解决此问题，我进行了以下更改：

首先，我将以下标头添加到我的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

第二，我对扩展名的fetch()调用进行了更新，如下所示：

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

但是，这些更改不起作用。我该如何更改才能使我的请求不被CORB阻止？

Answer 1

基于"Changes to Cross-Origin Requests in Chrome Extension Content Scripts"中的示例，我用具有相似API的新方法fetch替换了fetchResource的所有调用，但将fetch的调用委托给了后台页面：

// 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 {
        resolve(new Response(new Blob([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;
});

这是我能够对应用程序进行修复的最小更改集。（请注意，扩展程序和后台页面只能在它们之间传递JSON可序列化的对象，因此我们不能简单地将Fetch API Response对象从后台页面传递给扩展程序。）

背景页面不受CORS或CORB的影响，因此浏览器不再阻止来自API的响应。

Answer 2

请参见https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

为了提高安全性，Chrome扩展程序中的内容脚本很快将禁止跨域获取。此类请求可以改为从扩展程序后台页面发出，并在需要时转发到内容脚本。

您可以这样做以避免交叉来源。

旧内容脚本，进行跨域抓取：

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

新的内容脚本，要求其背景页面获取数据：

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

新的扩展程序后台页面，从已知的URL提取并中继数据：

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

临时解决方案：使用运行命令浏览器禁用CORB --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

Linux上的示例运行命令。

对于Chrome：

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

对于Chromium：

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

如何阻止CORB阻止对以CORS标头响应的数据资源的请求？

3 个答案: