Site breaks in Chrome/Edge when require-trusted-types-for is enabled in CSP header

[joeld-win]

When require-trusted-types-for: 'script' is enabled in the Content Security Policy (CSP), the site fails to render in Edge and Chrome.

Presumably this happens because the scripts inject raw strings into the DOM rather than appending typed values to the DOM. See the MDN docs.

The site renders in Safari and Firefox because those browsers do not yet support the require-trusted-types-for directive. Presumably they will support in the future, however.

[eikek]

Thanks for the report! I'm not sure I understand the issue correctly: who is putting this value into the headers? Sharry doesn't do this afaict, right? So even if Firefox supports this csp directive in the future - it does it only when it's present?

This js file is generated from Elm, so there is not much we can do 🤷🏼. Then I see a base64.js file being loaded - this doesn't happen on my installation as well?

[joeld-win]

who is putting this value into the headers? Sharry doesn't do this afaict, right?

Correct, I added this directive to the CSP header on all our sites, via the nginx conf file in this case, in response to a security audit. I understand this directive is still considered “experimental” so I will just roll it back for now, but it will probably become part of JS best practice before too long.

Anyway, sounds like this is may be a limitation of the Elm compiler for the time being?

Regarding the base64.js file, here’s where it’s coming from:

[eikek]

Ah I see, thanks for clarification! Yes, I think for the sharry-app.js this must be somehow addressed by Elm, this file is the product of compiling the elm source files. Let's see, perhaps there will be a new release when this directive becomes more widespread.

Thanks also for showing the base64.js - I totally forgot the dependencies from tus.js here.