Same-origin 请求导致“Access-Control-Allow-Origin 不匹配”错误，尽管来源当然匹配。注意：有 CSP 政策 w/ "sandbox"

Question

当 exact same URL 被 CORS 及其网页使用时' URL, 我仍然在我的 Firefox 开发控制台中收到相同的错误消息。

浏览器控制台消息是：

Cross-Origin Request Blocked: \
  The Same Origin Policy disallows reading the remote resource \
  at https://egbert.net/fonts/fontawesome-webfont.woff2?v=4.7.0. \
  (Reason: CORS header ‘Access-Control-Allow-Origin’ does not \
  match ‘https://egbert.net’).

Header 设置，lighttpd 服务器

Access-Control-Allow-Origin: https://egbert.net
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range
Content-Security-Policy: \
    default-src 'none'; \
    base-uri 'none'; \
    script-src 'strict-dynamic'; \
    object-src 'none'; \
    style-src 'self'; \
    img-src https://egbert.net/favicon.ico https://egbert.net/images/ https://egbert.net/blog/articles/*/images/*.png data:; \
    media-src https://egbert.net/media/ data:; \
    frame-src https://egbert.net/frames/; \
    frame-ancestors 'self'; \
    worker-src 'self'; \
    child-src https://egbert.net/frames/; \
    font-src https://egbert.net/fonts/; \
    connect-src 'self' https://egbert.net/; \
    form-action 'none'; \
    require-trusted-types-for; \
    trusted-types template; \
    sandbox; \
    report-uri https://ssoseo1.report-uri.com/r/d/csp/enforce; \
    report-to endpoint-1; \
    upgrade-insecure-requests; \
    block-all-mixed-content;
Feature-Policy: accelerometer 'none'; camera 'none'; fullscreen 'self'; geolocation 'none'; gyroscope 'none'; magnetometer 'none'; microphone 'none'; midi 'none'; notifications 'none'; payment 'none'; push 'none'; sync-xhr 'none'; speaker 'none'; usb 'none'; vibrate 'none';
Referrer-Policy: no-referrer

HTML 设置

  <link rel="stylesheet" href="https://egbert.net/css/m-dark.compiled.css">

CSS路径

 */@font-face {
 font-family:'FontAwesome';
 src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
 src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
 url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
 url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
 url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
 url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
 font-weight:normal;
 font-style:normal
}

我已确保所有字体文件都可以通过同一浏览器在不同的选项卡中下载。

更奇怪的是，错误消息暗示 "remote resource"。它们完全相同 URL.

没有加载任何插件，这是 Firefox v73.0.1 的安全模式。

更新 1

当我用绝对目录路径替换CSS的/@font-face中的相对路径（'../fonts'）时，它没有任何改变。

更新 2

当我在 full-blown 的绝对目录路径前面的 CSS 的 /@font-face 中添加方案和域 (https://egbert.net/) 时，它没有任何改变=] URL路径。

这与以下问题不同：

Why doesn’t Postman get a “No 'Access-Control-Allow-Origin' header is present on
Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy
Firefox 'Cross-Origin Request Blocked' despite headers
How to get a cross-origin resource sharing (CORS) post request working
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at
Same origin Policy and CORS (Cross-origin resource sharing)
google maps - Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at

Answer 1

在 CSP 策略中用 sandbox allow-same-origin 替换 sandbox 将解决问题。

解释：

问题描述的CORS问题最终是由浏览器将原始值设置为null引起的。因此，即使 Access-Control-Allow-Origin 响应 header 设置为通常预期的原始值——匹配浏览器地址栏中显示的 URL——它实际上不匹配，由于事实上，浏览器已将原点设置为 null.

所以你最终陷入了一个看似悖论的境地：文档似乎与其来源不符。

https://whosebug.com/a/42242802/441757 outlines all cases where browsers set an origin to null. The specific cause of the case in the question arises from requirements at https://html.spec.whatwg.org/multipage/#attr-iframe-sandbox 的答案是说，如果设置了 sandbox：

content is treated as being from a unique origin, forms, scripts, and various potentially annoying APIs are disabled, links are prevented from targeting other browsing contexts, and plugins are secured. The allow-same-origin keyword causes the content to be treated as being from its real origin instead of forcing it into a unique origin.

所以底线是：无论何时指定 sandbox，在大多数情况下，您都希望使用包含的 allow-same-origin 关键字来指定它 — 为了防止意外和 hard-to-troubleshoot problems/side-effects如题中描述的CORS问题

Same-origin 请求导致“Access-Control-Allow-Origin 不匹配”错误，尽管来源当然匹配。注意：有 CSP 政策 w/ "sandbox"

Same-origin request causes “Access-Control-Allow-Origin doesn’t match” error, though origin of course matches. Note: has CSP policy w/ "sandbox"

javascript

firefox

sandbox

cors

content-security-policy

Header 设置，lighttpd 服务器

CSS路径

更新 1

更新 2