正文 

当前位置： 首页 > 知识 >

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

     2023-02-22     265

关键词：

【中文标题】如何避免 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 工具。

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

】如何避免jqueryajax中使用wcf服务的跨域策略？【英文标题】：howtoavoidcrossdomainpolicyinjqueryajaxforconsumingwcfservice?【发布时间】：2011-08-0620:41:49【问题描述】：jqueryajax中如何避免跨域策略使用wcf服务？？我需要在web.config中对跨域策... 查看详情

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

】来自GoogleChrome中的用户脚本的跨域XHR【英文标题】：Cross-originXHRfromauserscriptinGoogleChrome【发布时间】：2010-12-2813:01:07【问题描述】：有没有人幸运地从GoogleChrome中的用户脚本执行跨源XHR？请求通过服务器（我可以在日志中看到... 查看详情

chrome中的跨域ajax POST

】chrome中的跨域ajaxPOST【英文标题】：CrossdomainajaxPOSTinchrome【发布时间】：2011-08-2118:48:22【问题描述】：关于跨域AJAX问题有几个主题。我一直在看这些，结论似乎是这样的：除了使用JSONP之类的东西或代理解决方案之外，您应该... 查看详情

reactjs中的跨域读取阻塞错误

】reactjs中的跨域读取阻塞错误【英文标题】：Cross-OriginReadBlockingErrorinreactjs【发布时间】：2019-07-1300:12:05【问题描述】：我正在学习ReactJS。我正在使用fetch从API获取数据。我使用了下面的代码。fetch(\'http://myurl.com/api\').then(res=>... 查看详情

chrome浏览器的跨域设置

...;如下图所示：3.点击应用和确定后关闭属性页面，并打开chrome浏览器。如果浏览器出现提示“你使用的是不受支持的命令标记--disable-web-security”，那么说明配置成功。版本号49之后的chrome跨域设置chrome的版本升到49之后，... 查看详情

JSP中JSON Web服务中的跨域错误？

】JSP中JSONWeb服务中的跨域错误？【英文标题】：CrossDomainErrorinJSONwebserviceinJSP?【发布时间】：2015-06-1117:17:34【问题描述】：您好，我是JSP新手，我使用Jersey库1.19包创建JSONWeb服务。此Web服务在Android和iOS中运行良好，但通过Ajax调... 查看详情

通过 Chrome 扩展程序避免跨域策略

】通过Chrome扩展程序避免跨域策略【英文标题】：Avoidcross-originpolicyviaChromeextension【发布时间】：2019-03-2002:34:14【问题描述】：站点A是一个网站，其&lt;iframe&gt;包含站点B。它在带有扩展程序的chrome浏览器上运行。我可以控... 查看详情

chrome浏览器的跨域设置

...原因往往需要将浏览器设置成支持跨域的模式，而且chrome浏览器支持可跨域的设置，但是新版本的chrome浏览器提高了跨域设置的门槛，原来的方法不再适用了。其实网上也有很多大神总结的chrome跨域设置教程，都... 查看详情

WCF wsHttpBindingwith silverlight 中的跨域错误

】WCFwsHttpBindingwithsilverlight中的跨域错误【英文标题】：CrossdomainerrorinWCFwsHttpBindingwithsilverlight【发布时间】：2014-01-0200:27:59【问题描述】：我有一个WCF服务，我在web.config中使用wsHttpBinding。我还从IIS7创建了一个测试证书，并将其... 查看详情

如何修复“跨域读取阻塞 (CORB) 阻止了 MIME 类型应用程序/json 的跨域响应”。问题？

】如何修复“跨域读取阻塞(CORB)阻止了MIME类型应用程序/json的跨域响应”。问题？【英文标题】：Howtofix"Cross-OriginReadBlocking(CORB)blockedcross-originresponsewithMIMEtypeapplication/json."issue?【发布时间】：2019-07-0903:05:43【问题描述】... 查看详情

Chrome 中的跨域问题可能是奇怪的 Dart HttpRequest 行为的 b/c

】Chrome中的跨域问题可能是奇怪的DartHttpRequest行为的b/c【英文标题】：Cross-DomainissueinChromepossiblyb/cofstrangeDartHttpRequestbehavior【发布时间】：2015-07-0211:40:44【问题描述】：我知道伙计们，有很多关于AmazonS3Buckets和CORS的问题。但是，... 查看详情

如何解决此错误跨域读取阻塞 (CORB) 阻止了在邮递员上工作的跨域响应

】如何解决此错误跨域读取阻塞(CORB)阻止了在邮递员上工作的跨域响应【英文标题】：HowtosolvethiserrorCross-OriginReadBlocking(CORB)blockedcross-originresponseworkingonpostman【发布时间】：2019-07-2914:51:20【问题描述】：我使用JqueryAJAX调用了第三... 查看详情

反应.js |如何摆脱 Codesandbox 中的跨域错误

】反应.js|如何摆脱Codesandbox中的跨域错误【英文标题】：react.js|howtogetridofcross-originerrorinCodesandbox【发布时间】：2018-09-0416:55:31【问题描述】：INFIREFOX:当我执行我的代码时，我应该得到的典型错误是：“TypeError:Cannotreadproperty\'setS... 查看详情

如何修复 Firefox 中的跨域请求失败

】如何修复Firefox中的跨域请求失败【英文标题】：Howtofixcross-originrequestfailinFirefox【发布时间】：2016-01-1203:53:18【问题描述】：我有一个javascript文件，我想在其中将json数据发送到ERP系统：varformData1=JSON.stringify($(\'#msform\').serializeO... 查看详情

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

】跨域读取阻止(CORB)API-调用Chrome扩展【英文标题】：Cross-OriginReadBlocking(CORB)API-CallChrome-extension【发布时间】：2019-10-2201:54:52【问题描述】：我想通过我的chrome-extension的post调用一个api，问题是没有得到响应数据。我刚刚在控制台... 查看详情

在 Java Web 项目中显示 BLOB 对象，避免持久的跨站点脚本？

...ssitescripting?【发布时间】：2015-12-1804:19:05【问题描述】：如何在JavaWeb项目中显示存储为BLOB对象的数据并避免持久的跨站点脚本漏洞？ViewDeliveredReportsPage.java中的方法respo 查看详情

使用 CORS 的跨域 REST/Jersey Web 服务

...从服务器端的角度来看，我需要做哪些代码/配置更改？如何从HTML5/js调用此服务。谢谢【问题讨论】：见CORS-Com 查看详情

使用后台页面的跨域 XMLHttpRequest

...dpages【发布时间】：2011-12-0317:14:04【问题描述】：在我的Chrome扩展程序中，我想让我的options.html页面与Google的OpenIdAPI之类的东西进行通信。为了无缝地做到这一点，我在选项页面上有一个隐藏的iframe，它将弹出Google帐户登录页面... 查看详情