如何在 chrome Web 扩展中避免跨源读取阻塞 (CORB)

Question

我写了一个 chrome web extension 来避免开发我自己的网络应用程序时的 CORS 限制。该扩展是开发人员的工具，用于代理从源 url 到目标 url 的请求。

扩展核心代码如下，开发者可以在我的页面上开发自己的页面没有 CORS 限制的网站和请求到他们的服务器端：

chrome.webRequest.onBeforeRequest.addListener(details => {
  let redirectUrl = '';
  //...
  redirectUrl = details.url.replace(TNT.validRules[i].source, TNT.validRules[i].dest);
 return {redirectUrl}
}, {urls: ['<all_urls>']}, ['blocking']);


chrome.webRequest.onHeadersReceived.addListener(details => {
  details.responseHeaders.map(item => {
    if (item.name.toLowerCase() == 'Access-Control-Allow-Origin'.toLowerCase()) {
      item.value = '*'
    }
  })
  return {responseHeaders};
}, {urls: ['<all_urls>']}, ["blocking", "responseHeaders"]);

但是最新的Chrome72无法代理请求。控制台错误是：

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://xxxxxxx.com/abc.json?siteId=69 with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Answer 1

请参阅 co-founder 在 Moesif 提交的这个问题。

https://bugs.chromium.org/p/chromium/issues https://bugs.chromium.org/p/chromium/issues/detail?id=933893

根据他与 Chronium 工程师的讨论，基本上，您应该添加 extraHeaders 添加侦听器时的额外选项，这会将此触发器拉近网络并在触发 CORB 之前注入 headers。

chrome.webRequest.onHeadersReceived.addListener(details => {
  const responseHeaders = details.responseHeaders.map(item => {
    if (item.name.toLowerCase() === 'access-control-allow-origin') {
      item.value = '*'
    }
  })
  return { responseHeaders };
}, {urls: ['<all_urls>']}, ['blocking', 'responseHeaders', 'extraHeaders'])

顺便说一句，这里有一点自我推销。为什么不直接使用我们的 CORS 工具，

https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc?hl=en

已经是功能最全的CORS工具了。

Answer 2

我在 google 文档中找到了答案：

避免 Cross-Origin 在内容脚本中获取

旧内容脚本，进行 cross-origin 获取：

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

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

如何在 chrome Web 扩展中避免跨源读取阻塞 (CORB)

How to avoid Cross-Origin Read Blocking(CORB) in a chrome web extension

google-chrome-extension

cross-origin-read-blocking