When you load a 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 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: 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) (search for "descendant script fetch options") Chromium test ensuring none propagation Firefox bug implementing nonce propagation CSP issue: Someone concerned about propagation being a vulnerability CSP issue: Proposal for import-src that went nowhere 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: 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''

Below is a strict, but still workable Content Security Policy for your Ruby on Rails project. Use this CSP if...

I recently encountered this error as I was trying to build assets: $ node esbuild.config.js .../node_modules/esbuild-plugin-browserslist/dist/resolveToEsbuildTarget.js:43 throw new Error('Could...

TypeScript basically uses structural typing, which is conceptually quite similar to duck typing, but with static compile-time type checking...

I use the Gemini web chat interface quite extensively. One thing that is tedious is giving it all the context...

If you use the selenium-webdriver gem, it will sneakily phone home once every hour whenever you run a browser...

When you query the browser for DOM elements, there are some footguns you should know about. Some lists are synchronized...

Quick reference for passing data from Rails to JavaScript via Unpoly compilers. Haml Attribute Syntax # Ising hash rockets and string...

Quick guide for frequently used compiler selector patterns of Unpoly. 1. BEM Component Pattern When: Reusable UI components with multiple...

prettier calls itself an opinionated code formatter. I recommend using it for your JavaScript and TypeScript code. prettier only concerns...

The linked MDN article is quite informative of a neat feature supported by all major browsers: Unicode character class escape...

Frontend performance and user experience are orthogonal to feature development. If care is not taken, adding features usually degrades frontend...

Modern CSS offers the field-sizing property to allow elements to automatically adjust size (width and/or height) to fit their...

It can be hard to understand what causes a browser scroll smoothly or instantly. CSS, JavaScript and the browser settings...

Say you wrap your index view in a form to apply different filters like pagination or a search query. On...

For Selenium tests, your browser starts in your local timezone, or whatever your system's environment specifies. This is usually...

DirectUpload allows you to upload files to your file storage without having to wait for the form to submit. It...

ActiveStorage does not provide any built-in way of implementing authentication for the available DirectUpload endpoint in Rails. When using...

SVG files often contain redundant information, like editor metadata or hidden elements. When esbuild handles your static assets, you can...

Hint If you are using our opscomplete.com hosting we can set all environment variables mentioned below for your deployment on...

Elements can be hidden and shown by toggling the display property. However, this is not animatable, so we often turn...

Starting with ChromeDriver 127, if your application displays a beforeunload confirmation dialog, ChromeDriver will immediately close it. In consequence, any...

esbuild comes with a minifier that is good enough for most cases. If you're looking to squeeze out as...

Terser is a really good minifier ("compressor") for JavaScript code. I'm often surprised by the thoughtfulness of its compressed...