最新Chrome 85更新后的CORS问题



我是这里的一个非常新的用户,所以,如果我违反了任何规则,请提前道歉。这是我面临的问题,需要建议。

我有一个Chrome扩展,它可以与Gmail和;通过Rails应用程序的Phusion Passenger服务器,使用我在nginx上运行的web服务器上的API。

我的Nginx版本是Nginx版本:Nginx/1.15.8,Phusion Passenger版本是Phusion客车企业6.0.1

我在nginx中的CORS设置如下:

####### CORS Management ##########
add_header 'Access-Control-Allow-Origin' 'https://mail.google.com,https://*.gmail.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE, HEAD';
add_header Referrer-Policy "no-referrer";
add_header Pragma "no-cache";
##################################

这种情况一直持续到Chrome 84,然而,随着Chrome 85的最新更新,它开始抛出CORS错误,如下所示:

##########Chrome 85开始出现错误##########

访问"获取https://my-site.com/'来自原点'https://mail.google.com'已被CORS策略阻止:请求的资源上不存在"Access Control Allow Origin"标头。

##########################################

之后,我根据各种来源和博客的建议/参考,将CORS设置更新为完全开放,现在更新的CORS设置如下所示:

更新Nginx中的CORS设置

location / {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' $http_origin always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;

#
# Custom headers and headers various browsers *should* be OK with but aren't
#
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;

#
# Tell client that this pre-flight info is valid for 20 days
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8' always;
add_header 'Content-Length' 0 always;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' $http_origin always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' $http_origin always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
}
}

############################################

在Nginx中更新此设置后,CORS错误已经消失,但现在当扩展调用API时,我从服务器收到401未授权错误。

我试着调整所有的方法,但没能解决。有什么是我遗漏的或者做得不一样的吗?

请帮忙!

这不是这次规范更改的结果吗?

Chrome扩展内容脚本中跨源请求的更改https://www.chromium.org/Home/chromium-security/extension-content-script-fetches

我也遇到了同样的问题。我的解决方案是(如上面链接中所述(将Http请求移动到后台内容脚本中。您需要向后台脚本发送一条消息,然后从那里执行请求。

收到响应后,您需要向内容脚本发送一条消息,以便在其中处理响应数据。

ContentPage                  BackgorundPage
-- RequestData -->
Initialize the request and return to the content script
.... some time later....
Callback of HttpRequest is finished
<-- handleResponse--  (In callback handler)

内容脚本:

var msg = new Object();
msg.message = "loadOrders";
chrome.runtime.sendMessage(msg);

背景脚本:

chrome.runtime.onMessage.addListener(
function (msg, sender, sendResponse) {
if( msgName=="loadOrders") {
doXHRRequest( function(responseData) {
sendMessageToActiveTab(responseData);
});
}
function sendMessageToActiveTab(responseData) {
var msg = new Object();
msg.message = "receiveOrders";
msg.orderList = JSON.parse(Http.responseText);
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, msg);
});
}

内容脚本中的最后一个:

chrome.runtime.onMessage.addListener(function(message, callback) {
if( message.message == "receiveOrders") {
receiveOrderList(message.orderList);
}
return;
});

如中所述https://developers.google.com/web/updates/2020/07/chrome-85-deps-rems

chrome将拒绝不安全的SameSite=无cookie

不再支持在SameSite设置为"无"且没有"安全"属性的情况下使用cookie。任何请求SameSite=None但未标记为Secure的cookie都将被拒绝。该功能于2020年7月14日开始向稳定Chrome用户推出。有关完整的时间表和详细信息,请参阅SameSite更新。通过明文通道传递的Cookie可能会被网络攻击者编目或修改。要求跨站点使用cookie的安全传输可以降低这种风险。

最新更新