Replies: 1 comment 4 replies
-
This script is inline because we need it to execute asap to avoid flash of unstyled content, notably reading the dark/light mode from localStorage before the UI prints anything. If we moved this to an external resource, we'd have to block and to wait for it to download before the user sees anything, otherwise the UI would maybe first display the bad theme, and then the theme "gets fixed", producing bad blinking UX. For performance reasons it's much better to inline such scripts, and many other frameworks do the same. It's not just about the theme, but the announcement bar and the classes injected through data attributes too. All this needs to run as soon as possible. I'm not an expert in CSP. Why do you need that "unsafe-inline" in the first place? Can you share an example of how to have an inline script, and yet make it pass your requirements? |
Beta Was this translation helpful? Give feedback.
-
docusaurus-theme-classic injects a script tag into the page.
This makes it difficult to apply a Content Security Policy without
script-src 'unsafe-inline'
. Is there a recommended way around this?Things that could help are switching the injected tag into an external script file, or SHA384 hashing the script content on build and adding the hash to the CSP.
Anyway, just wondered if anyone has solved this before. There doesn't seem to be a nice plugin hook that would work both in dev server and in production builds where the script content can be inspected.
Beta Was this translation helpful? Give feedback.
All reactions