最新的Chrome 85更新后出现CORS问题

Question

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

我有一个Chrome扩展程序，它与Gmail一起工作，并通过Rails应用程序的Phusion Passenger服务器从我的Web服务器上的API获取信息。

我的Nginx版本是nginx version: nginx/1.15.8，Phusion Passenger版本为Phusion Passenger Enterprise 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 中开始出现的错误 ############

因跨域资源共享（CORS）策略而被阻止访问 'https://my-site.com/'，其来源为 'https://mail.google.com'

请求的资源上没有 'Access-Control-Allow-Origin' 头，已被阻止访问。

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

之后，我根据各种来源和博客的建议/参考更新了 CORS 设置，现在更新后的 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未授权错误。

我尝试了所有的方法，但无法解决它。是否有什么我错过或者做的不同的地方？

请帮帮我！

- indevruby

Answer 1

这个规范变更的效果不就是这样吗？

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

- shoito

Answer 2

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

Chrome 将拒绝不安全的 SameSite=None Cookies

不再支持使用 SameSite 设置为 None 的 Cookie，而没有标记 Secure 属性。任何请求 SameSite=None 但未标记 Secure 的 Cookie 都将被拒绝。此功能已开始向稳定版 Chrome 用户推出，于 2020 年 7 月 14 日开始。有关完整时间表和详细信息，请参见 SameSite 更新。通过明文信道传递的 Cookie 可能会被网络攻击者分类或修改。要求跨站点使用的 Cookie 使用安全传输减少了这种风险。

- Stef

Answer 3

我遇到了同样的问题。我的解决方案是（如上面链接中所述）将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;
});

- Carsten Spräner