Content Security Policy の 'strict-dynamic' で nonce をちゃんと設定しているのにエラーになるときは prefetch/preload が原因かも

1491 ワード
CSP content-security-policy ContentsSecurityPolicy CSP テキストリンク

結論

<link rel="preload" href="/_nuxt/dddd88be1484ef5d94bc.js" as="script" nonce="2UhC1DHXJTpbvWCe">

上記のように preload(prefetchなども？) している script にも nonce をつけたらエラーが消えました。

経緯

ヘッダーは

Content Security Policy: script-src 'nonce-2UhC1DHXJTpbvWCe' 'unsafe-inline' 'strict-dynamic' https: http:;

となっていて、読み込むソースも

<script nonce="2UhC1DHXJTpbvWCe" src="***"></script>

となっているのに、なぜかChromeで

Refused to load the script "/_nuxt/dddd88be1484ef5d94bc.js" because it violates the following Content Security Policy directive: "script-src 'nonce-2UhC1DHXJTpbvWCe' 'unsafe-inline' 'strict-dynamic' https: http:". 'strict-dynamic' is present, so host-based whitelisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

というエラーが出てしまっていた。

Nuxtを使っていたので、ずっとServiceWorker（worker-src）や
manifest.jsonの content_security_policy など色々と疑っていたのですが、
まさかの盲点でした。