如何避免 chrome web 扩展中的跨域读取阻塞(CORB)

Posted

技术标签:

【中文标题】如何避免 chrome web 扩展中的跨域读取阻塞(CORB)【英文标题】:How to avoid Cross-Origin Read Blocking(CORB) in a chrome web extension 【发布时间】:2019-07-14 03:50:46 【问题描述】:

我写了一个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"]);

但最新的 Chrome 72 无法代理请求。控制台错误是:

跨域读取阻塞 (CORB) 阻止了跨域响应 https://xxxxxxx.com/abc.json?siteId=69 MIME 类型应用程序/json。看 https://www.chromestatus.com/feature/5629709824032768 了解更多 详情。

【问题讨论】:

在您的后台页面执行请求并通过消息将结果发送到您的内容脚本。 确实我添加了一个 eventListener onHeadersReceived 并在 background.js 中设置 'Access-Control-Allow-Origin'='*'。该扩展在 chrome 72 之前运行良好。但现在无法运行。 刚刚偶然发现了official explainer,它演示了我上面所说的内容。 谢谢。这就是扩展程序不起作用的原因。我还需要弄清楚如何解决这个问题。不知道要花多少钱:( @wOxxOm 对不起,我的英语很差。这些代码是否清楚地解释了我的问题? 【参考方案1】:

我在谷歌文档中找到了答案:

避免内容脚本中的跨域提取

旧内容脚本,进行跨域抓取:

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

【讨论】:

主要答案应该用这个答案更新。谢谢! 解决方案是使用一些浏览器特定的API?这是什么,IE又来了? :-|【参考方案2】:

请参阅 Moesif 的联合创始人提交的此问题。

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

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

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 工具。

【讨论】:

使用 Chrome 72.0.3626.121 我通过了 CORS 扩展,但请求因:core.js:15723 ERROR TypeError: rxjs__WEBPACK_IMPORTED_MODULE_2__.Observable.throw is not a function at ApiService.push../ src/app/services/api.service.ts.ApiService.logError (api.service.ts:49) 在 CatchSubscriber.selector (api.service.ts:16) 在 CatchSubscriber.push../node_modules/rxjs/_esm5/ internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34) ,,, 我正在使用 cors 工具,这为我解决了这个问题。谢谢井架 @derrick 在本例中是否需要“阻止”选项? 感谢您让我的头免于撞墙。唯一对我有用的解决方案是 Moesif CORS 工具。

以上是关于如何避免 chrome web 扩展中的跨域读取阻塞(CORB)的主要内容,如果未能解决你的问题,请参考以下文章

跨域读取阻止 (CORB) API-调用 Chrome 扩展

chrome下如何实现ajax的跨域访问

来自 Google Chrome 中的用户脚本的跨域 XHR

如何避免 jquery ajax 中使用 wcf 服务的跨域策略?

chrome浏览器的跨域设置

chrome中的跨域ajax POST