Added display:none style causing CSP errors

[osiegmar]

Astro Info

Astro                    v3.1.1
Node                     v20.6.1
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/solid-js

If this issue only occurs in one browser, which browser is a problem?

Tested with Chrome, Firefox and Safari. They're all affected but the error message in this ticket is taken from Chrome.

Describe the Bug

Since astro 3.1.1 (caused by #8580) Chrome refuses to apply those new style="display:none" attributes on scripts and styles, because they'd require 'unsafe-hashes' in the Content Security Policy:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='". Either the 'unsafe-inline' keyword, a hash ('sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

Note that sha256-aqNNdDLnnrDOnTNdkJpYlAxKVJtLt9CtFLklmInuUAE= is the hash for style="display:none".

What's the expected result?

No errors in the console, no added style="display:none" to script-/style-elements.

Also see: https://content-security-policy.com/examples/allow-inline-style/

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-zcshce?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Oh that's weird, why do we do that? cc @bluwy aren't styles and scripts always display none anyways?

[natemoo-re]

This was merged in #8580 which fixed #8377, but IMO the user's CSS overriding the default UA styles to override the visibility of scripts/styles is not our concern. They should fix their CSS.

[bluwy]

The issue is that Astro is injecting new nodes that causes the CSS that should work fine as written to not work. But I guess display: none wasn't the right solution either as they have to update their CSS to account for the injected node too. So ok with reverting then.