Add support for Content Security Policy

[martijnimhoff]

What version of starlight are you using?

5.6.1

What is your idea?

Astro now has an experimental feature for Content Security Policy (CSP).

Content Security Policy (CSP) is a feature that helps to prevent or minimize the risk of certain types of security threats. It consists of a series of instructions from a website to a browser, which instruct the browser to place restrictions on the things that the code comprising the site is allowed to do. (link)

Currently this is not supported because inline scripts and styles are used here and in other places. There are two options to fix this:

• Make the style and script not inline but included via a seperate file
• Use a hash: https://docs.astro.build/en/reference/experimental-flags/csp/#hashes

Why is this feature necessary?

Defence against XSS attacks.

Do you have examples of this feature in other projects?

Here is an idx of Astro with Starlight and CSP enabled: https://idx.google.com/astro-starlight-csp-52530395. CSP only works in preview, so use these commands to see it working

npm run build && npm run preview

If you open the devtools, you'll see at least 10 errors caused by the inline styles and script being blocked by CSP:

Participation

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

[delucis]

Thanks for the discussion @martijnimhoff! We’ll definitely be looking into this and have just been waiting while the development of Astro’s CSP feature is experimental.

Would you mind sharing your reproduction some other way? (For example, exporting it to a public repo.) IDX projects aren’t public, so I can’t view that URL. Would be indeed handy to see what’s going on — and I’m curious what is causing problematic inline styles, because I knew we’d have to do some work for our inline <script> tags, but I though all our style usage would be handled automatically by Astro.