Chromium同域样式请求错误携带Sec-Fetch-Site: cross-site问题咨询

问题现象 #

当Web服务器返回如下响应头时：

Content-Security-Policy: sandbox; default-src 'none'; img-src 'self'; style-src 'self';

Chromium在请求与包含它的HTML页面同域（同目录）的样式表时，会添加请求头：

Sec-Fetch-Site: cross-site

而预期的正确请求头应为Sec-Fetch-Site: same-origin。

复现步骤（Nginx+Chromium） #

• 在Nginx配置的location指令中添加以下配置：

  add_header Content-Security-Policy "sandbox; default-src 'none'; img-src 'self'; style-src 'self';";
  if ($http_sec_fetch_site = 'cross-site') {
    return 403;
  }
  

• 在该位置部署两个静态文件：
  1. report.html：

     <!DOCTYPE html>
     <html>
     <head>
       <title>Report</title>
       <link rel="stylesheet" href="report.css">
     </head>
     
     <body>
       <h1>Report</h1>
     </body>
     </html>
     

  2. report.css：

     body { font-family: sans-serif }
     

通过开发者工具可见，report.css请求因携带错误的Sec-Fetch-Site: cross-site头而返回403 Forbidden。

咨询问题 #

为何在允许同域样式表的CSP配置下，Chromium会为同域文件请求提交Sec-Fetch-Site: cross-site头？

解答 #

这是因为启用了CSP的sandbox指令但未指定allow-same-origin属性。

当页面被sandbox沙箱隔离且未开启allow-same-origin时，浏览器会将该页面视为独立源（opaque origin），即便它原本和样式表同域。此时浏览器会判定样式表的请求来自与当前页面不同的源，因此标记Sec-Fetch-Site: cross-site。

虽然CSP配置通过style-src 'self'允许加载同域样式，但sandbox的隔离规则优先于源判定——沙箱已将页面的源改为独立源，这里的'self'指代的是这个独立源而非原本的域名，所以实际请求时浏览器会判定为跨站。

解决方法 #

在sandbox指令中添加allow-same-origin，修改后的CSP响应头如下：

Content-Security-Policy: sandbox allow-same-origin; default-src 'none'; img-src 'self'; style-src 'self';

这样页面会保留原本的源，请求同域样式表时就会发送Sec-Fetch-Site: same-origin头，不会触发403错误。

内容的提问来源于stack exchange，提问作者Matt