如何在 chrome Web 扩展中避免跨源读取阻塞 (CORB)
How to avoid Cross-Origin Read Blocking(CORB) in a chrome web extension
我写了一个 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.
请参阅 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 工具,
已经是功能最全的CORS工具了。
我在 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 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.
请参阅 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 工具,
已经是功能最全的CORS工具了。
我在 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