When you load a <script> with a nonce, that script can await import() additional sources from any hostname. The nonce is propagated automatically for the one purpose of importing more scripts.
This is not related to strict-dynamic, which propagates nonces for any propose not limited to imports (e.g. inserting <script> elements).
Example
We have a restrictive CSP that only allows nonces:
Content-Security-Policy: default-src 'none'; script-src 'nonce-secret123'
Our HTML loads script.js using that nonce:
<script type="module" nonce="secret123" src="script.js">
Our script.js imports other.js without a nonce:
let other = await import('other.js')
console.log("Look, script.js has imported %o", other)
The import succeeds without a nonce, due to implicit nonce propagation.
Why this is useful
In modern build pipelines, code splitting (chunking) is implemented using dynamic imports. Nonce propagation allows us to use automatic chunking with restrictive, nonce-based CSPs without using strict-dynamic.
E.g. esbuild automatically groups dynamically imported modules into chunks, and writes that chunk to disk. The compiled build has an await import('assets/chunk-NAXSMFJV.js'). There's no way to inject a nonce into that import(), but implicit nonce propagation still allows the request.
Should I worry about this?
It would require some truly strange code for user input to make it into an import() argument.
I wouldn't lose sleep over this.
Is this a browser bug?
It is by design. Here are some sources:
- HTML Spec Section 8 (Web Application APIs) Show archive.org snapshot (search for "descendant script fetch options")
- Chromium test ensuring none propagation Show archive.org snapshot
- Firefox bug implementing nonce propagation Show archive.org snapshot
- CSP issue: Someone concerned about propagation being a vulnerability Show archive.org snapshot
-
CSP issue: Proposal for
import-srcthat went nowhere Show archive.org snapshot
Are other CSP sources also propagated?
No, only nonces. In particular host-based CSPs do not propagate trust.
For example, you only allow scripts from our own host (no nonces):
Content-Security-Policy: default-src 'none'; script-src 'self'
Our HTML loads script.js from our own host:
<script type="module" src="script.js">
Our script.js imports other.js from a different host:
let other = await import('https://other-host.com/other.js')
This fails with a CSP violation:
Executing inline script violates the following Content Security Policy directive 'script-src 'self''
