Content Security Policy (CSP) #1168

ematipico · 2025-05-13T12:17:34Z

Summary

export default defineConfig({
	security: {
		csp: true
	}
})

Links

proposals/0055-csp.md

NepCono · 2025-05-13T16:45:09Z

@ematipico everybody is calling hashes, this can be nice, however wouldn't be nice to use a simple nonce generated by the user. and that the user can assign it to for instance Astro.cspNonce. In that case it would be very easy I guess ?
I wish I had more time, than I could develop with it.

But in the meantime will there be a possible workaround ?

ematipico · 2025-05-13T17:04:57Z

@NepCono in the RFC I explained why nonce wouldn't work for Astro. Did you read that part?

NepCono · 2025-05-15T10:24:20Z

@ematipico just read about the nonce, very understandable :-) I was just saying that the nonce solution would be more simplified than the hash.

However still a question remaining would the out of the box implementation security > csp and strictdynamic > true that we dont have to insert a nonce on the script (not a server island:script) which will lead to using typescript instead of javascript ?

btw; when will this be released and can I access it earlier ?

proposals/0055-csp.md

florian-lefebvre · 2025-05-15T11:29:12Z

proposals/0055-csp.md

+Include any useful background detail that that explains why this RFC is important.
+What are the problems that this RFC sets out to solve? Why now? Be brief!
+
+It can be useful to illustrate your RFC as a user problem in this section.
+(ex: "Users have reported that it is difficult to do X in Astro today.")


This is from the default template, we can probably extract things from the original discussion

florian-lefebvre · 2025-05-15T11:30:02Z

proposals/0055-csp.md

+
+- Provide *multiple* solutions to fix the same problem
+- Support for third-party scripts dynamically imported by users e.g. `document.createElement("script")`, `import("https://path.to/script.js")`;
+- Support for third-party styles dynamically imported by users.


If I undestand correctly, injectCspAsset would allow this

I want to rephrase it then. What I meant is that out of the box Astro won't create a hash for the dynamically imported script/style. Any suggestions?

proposals/0055-csp.md

florian-lefebvre · 2025-05-15T11:33:32Z

proposals/0055-csp.md

+Users can add an entire directive. Astro won't check if the directive is grammatically correct.
+
+```js
+Astro.insertCspPolicy(`image-src '${Astro.site}'`)


I guess this API covers injecting hashes directly eg.

Astro.insertCspPolicy(`script-src 'self' '${myHash}'`)

I like this, it's better then my proposal on Discord to have it on insertCspAsset

No, we can't provide such API, in fact I think I will try to make it more strict. Astro must control the script-src and style-src directives, because that's where we append all the hashes. If a user provides their own directive, they override ours, and it's all for nought

florian-lefebvre · 2025-05-15T11:34:02Z

proposals/0055-csp.md

+
+# Drawbacks
+
+The hashes solution will negatively impact the rendering engine because Astro will have to calculate the hashes **at runtime**. The most expensive solution is the support of server islands because the contents of their scripts depend on props and slots, which are only known during the rendering phase.


Do we know how big the impact is? Genuinely curious

No, but we can set up a codspeed benchmark

On a comparable solution, it would take around 500ms for dozens of pages in a Netlify Free tier build. This should be the base performance

Co-authored-by: Florian Lefebvre <[email protected]>

ematipico · 2025-05-16T08:48:21Z

I changed the APIs for additional directives. I believe the new API is better because counts for better DX:

cc6d3bf (#1168)

NepCono · 2025-05-16T12:56:56Z

We also have to keep in mind, that in order to work out of the box.

If I am correct the CSP policy will be configured in astro.config.mjs and that the CSP is handled by Astro.
That we also want something like whitelisted domains, for instance for "connect-src" default value will be "self".
but one must have the possibility to add "api.example.com"

proposals/0055-csp.md

Co-authored-by: Marocco2 <[email protected]>

louisescher · 2025-05-30T13:17:11Z

As discussed in the API bash, view transitions break when using the CSP settings without setting strictDynamic to true. I think we should log a warning if the user tries to use the client router while strictDynamic is not set to true?

florian-lefebvre · 2025-05-30T13:21:01Z

proposals/0055-csp.md

+```
+
+
+#### `Astro.insertScriptHash(string)`


I think it would be nice to expose utilities to compute the hash, so it can be fed to this function eg.

import { generateHash } from 'astro/csp' const hash = await generateHash(content, 'SHA-256') Astro.insertScriptHash(`sha256-${hash}`)

Naming is bad but you get the idea

I still think this API isn't useful, as it essentially creates some unusual usage. Let's say you have some script.js somewhere. What would happen is the following:

The user must import script.js somewhere, and provide its content as a string to the generateHash

The generated hash must be saved or sent somewhere

Then the user must provide this hash to Astro via configuration or runtime

This very script must be added to the application

Let's wait and see.

proposals/0055-csp.md

Co-authored-by: Matt Kane <[email protected]>

Johannes-Andersen

Great work on the proposal! Really exited with the new Header and adapter support 🙌

It could be a benefit to document this:

Authors are strongly encouraged to place meta elements as early in the document as possible, because policies in meta elements are not applied to content which precedes them. In particular, note that resources fetched or prefetched using the Link HTTP response header field, and resources fetched or prefetched using link and script elements which precede a meta-delivered policy will not be blocked.

– https://www.w3.org/TR/CSP3/#meta-element

Would also be valuable to make sure the Astro puts it on the top of head?
Seems from my quick testing it is added at the bottom of <head />:

proposals/0055-csp.md

Johannes-Andersen · 2025-06-11T12:21:36Z

proposals/0055-csp.md

+
+The mapping is defined as `Map<IntegrationResolvedRoute, string>`, and it's the list of **static routes**, where:
+- `IntegrationResolvedRoute` is the route type provided to the integrations;
+- `string` is the **content** of the entire CSP header e.g. `"script-src: 'self' sha256-yadayada; style-src: 'self' sha256-yadayada`


Suggested change

- `string` is the **content** of the entire CSP header e.g. `"script-src: 'self' sha256-yadayada; style-src: 'self' sha256-yadayada`

- `string` is the **content** of the entire CSP header e.g. `"script-src 'self' sha256-yadayada; style-src 'self' sha256-yadayada`

Directive should not have a : between key and value

proposals/0055-csp.md

Co-authored-by: Johannes Andersen <[email protected]>

ematipico · 2025-06-11T15:51:22Z

Thank you @Johannes-Andersen, I applied your suggestions. It makes more sense to have the user write their format (apostrophe VS no apostrophe). Since this is an advanced API, we can reasonably assume that users are familiar with its usage. I will have to send a PR to change the APIs.

Co-authored-by: Johannes Andersen <[email protected]>

ematipico · 2025-06-17T08:41:28Z

@stefanmaric Thank you for your suggestion. Unfortunately, this API wouldn't play well in Astro, where we need more control over the script-src and style-src directives. Also, in the future, we might need to have control over other directives too.

HannesOberreiter · 2025-07-16T12:57:42Z

Great implementation as far as I can tell. Two things I want to throw into the discussion:

Naming

Currently the Runtime APIs do not really reflect in their naming that they have something to do with CSP. Maybe they need a kind of prefix, eg. Astro.cspInsertStyleResource

Disable one of the two

Currently it is only possible to activate both script-src and style-src but not only one. Additionally to this, I would love a Runtime API which does completely overwrites the directives and not only add to resources/hashes (maybe an option flag for the current APIs, eg. overwrite = true). The reason on some pages I use legacy external scripts which apply a lot of inline css, and I can't be the only one with this problem.

ascorbic · 2025-07-16T16:13:21Z

Or maybe Astro.csp.insertDirective() etc. Most other features are on an object, not at the top level

florian-lefebvre · 2025-08-27T09:26:30Z

If in your Astro config, you have directives: ["img-src 'self'"] and you call Astro.insertDirective("img-src whatever"), what happens? Does it override, merge, or add (which is incorrect)?

Eveeifyeve · 2025-08-27T15:13:50Z

I have found issues with csp specifically devtools. Idk if this is known, but I thought I would post it anyways.

ascorbic · 2025-08-28T09:19:16Z

@Eveeifyeve can you share a reproduction?

ematipico · 2025-08-28T09:51:11Z

@Eveeifyeve

This is expected. CSP doesn't work in development. It's explicitly stated in this RFC and the documentation

ematipico · 2025-08-28T09:53:02Z

If in your Astro config, you have directives: ["img-src 'self'"] and you call Astro.insertDirective("img-src whatever"), what happens? Does it override, merge, or add (which is incorrect)?

Since it's an insertion, this API will add an item to the existing array.

If that's incorrect, what do you expect from the API?

florian-lefebvre · 2025-08-28T11:25:36Z

I would expect it to merge, like what we did for fonts basically

ematipico · 2025-08-28T11:29:03Z

I would expect it to merge, like what we did for fonts basically

Why though? I'm not saying it's incorrect, but font-src is particular because Astro needs to own font-src. If Astro doesn't own the other resources, why should Astro deduplicate the values that aren't owned?

florian-lefebvre · 2025-08-28T12:11:11Z

Why though? I'm not saying it's incorrect, but font-src is particular because Astro needs to own font-src. If Astro doesn't own the other resources, why should Astro deduplicate the values that aren't owned?

Sorry I was on phone so it wasn't very clear. My point is not about deduplication but rather avoiding loosing directives. Taking my example again:

If in your Astro config, you have directives: ["img-src 'self'"] and you call Astro.insertDirective("img-src whatever"), what happens? Does it override, merge, or add (which is incorrect)?

Here are the 3 outcomes:

override: img-src whatever;. That is wrong IMO because you likely want to inherit the config from your astro config
add (current IIRC): img-src 'self'; img-src whatever;. I think this is wrong because only the last occurence will be picked up
merge (my recommendation): img-src 'self' whatever;. We preserve everything

What do you think?

cleancommunities · 2025-08-31T20:19:37Z

Hello, I was pointed in this direction from the discord, in relation to an inquiry about use cases of, "style-src-attr". Repo, https://github.com/cleancommunities/csp-test (https://discordapp.com/channels/830184174198718474/830184175176122389/1411782698720170046)

ematipico · 2025-10-02T11:59:33Z

@florian-lefebvre

I would go for the third option, however I think we should change the APIs, the make the merging safer and less prone to error on our side e.g.

Astro.csp.insertDirective("img-src", "whatever")

florian-lefebvre · 2025-10-02T12:00:40Z

Not necessarily, we already have the logic for it with font-src

ematipico force-pushed the feat/rfc-csp branch 3 times, most recently from bbed778 to 85545c3 Compare May 13, 2025 12:21

ematipico changed the title ~~feat: Content Security Policy~~ Content Security Policy (CSP) May 13, 2025

ematipico marked this pull request as ready for review May 13, 2025 12:21

ematipico mentioned this pull request May 13, 2025

Content Security Policy (CSP) #1149

Closed

ematipico force-pushed the feat/rfc-csp branch from 85545c3 to 71d269e Compare May 13, 2025 12:59

feat: Content Security Policy

56d0e84

ematipico force-pushed the feat/rfc-csp branch from 71d269e to 56d0e84 Compare May 13, 2025 13:01

Marocco2 reviewed May 13, 2025

View reviewed changes

proposals/0055-csp.md Outdated Show resolved Hide resolved

ematipico mentioned this pull request May 13, 2025

Astro - CSP - Preact withastro/astro#13798

Closed

1 task

ematipico added 2 commits May 14, 2025 10:07

chore: add algorithm

0c65955

chore: use the name 'directive'

3774bc8

florian-lefebvre reviewed May 15, 2025

View reviewed changes

ematipico and others added 3 commits May 15, 2025 15:18

Update proposals/0055-csp.md

6322221

Co-authored-by: Florian Lefebvre <[email protected]>

update summary

c10c2c5

chore: better directives

cc6d3bf

rename fields

c3d7e5f

Marocco2 suggested changes May 16, 2025

View reviewed changes

proposals/0055-csp.md Outdated Show resolved Hide resolved

ematipico and others added 3 commits May 16, 2025 15:20

Update proposals/0055-csp.md

fd1f95f

Co-authored-by: Marocco2 <[email protected]>

better runtime APIs

b19ce56

strict dynamic

1bbef1e

ematipico self-assigned this May 21, 2025

florian-lefebvre reviewed May 30, 2025

View reviewed changes

ascorbic reviewed Jun 11, 2025

View reviewed changes

proposals/0055-csp.md Outdated Show resolved Hide resolved

ematipico and others added 2 commits June 11, 2025 12:13

Update proposals/0055-csp.md

91a2e78

Co-authored-by: Matt Kane <[email protected]>

chore: address feedback

eb28bb3

Johannes-Andersen reviewed Jun 11, 2025

View reviewed changes

ematipico mentioned this pull request Jun 11, 2025

feat(csp): add static header adapter function withastro/astro#13926

Merged

Apply suggestions from code review

e69e1c9

Co-authored-by: Johannes Andersen <[email protected]>

ematipico and others added 2 commits June 11, 2025 16:51

Update proposals/0055-csp.md

bd6fa9f

Co-authored-by: Johannes Andersen <[email protected]>

chore: update APIs

798c703

ematipico mentioned this pull request Jun 17, 2025

fix(csp): types and validation issues withastro/astro#13957

Merged

This comment has been minimized.

Sign in to view

Eveeifyeve mentioned this pull request Aug 28, 2025

CSP Works in Dev, But devtools are not able to load styles. withastro/astro#14284

Closed

1 task

This comment has been minimized.

Sign in to view

ematipico mentioned this pull request Aug 29, 2025

CSP not working with minification integrations withastro/astro#14288

Closed

1 task

chore: update runtime APIs

79b228e


		# Drawbacks

		The hashes solution will negatively impact the rendering engine because Astro will have to calculate the hashes at runtime. The most expensive solution is the support of server islands because the contents of their scripts depend on props and slots, which are only known during the rendering phase.

	- `string` is the content of the entire CSP header e.g. `"script-src: 'self' sha256-yadayada; style-src: 'self' sha256-yadayada`
	- `string` is the content of the entire CSP header e.g. `"script-src 'self' sha256-yadayada; style-src 'self' sha256-yadayada`

		```


		#### `Astro.insertScriptHash(string)`

Content Security Policy (CSP) #1168

Are you sure you want to change the base?

Content Security Policy (CSP) #1168

Uh oh!

Conversation

ematipico commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Links

Uh oh!

Uh oh!

NepCono commented May 13, 2025

Uh oh!

ematipico commented May 13, 2025

Uh oh!

NepCono commented May 15, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ematipico May 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ematipico commented May 16, 2025

Uh oh!

NepCono commented May 16, 2025

Uh oh!

Uh oh!

louisescher commented May 30, 2025

Uh oh!

florian-lefebvre May 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Johannes-Andersen left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Johannes-Andersen Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ematipico commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ematipico commented Jun 17, 2025

Uh oh!

HannesOberreiter commented Jul 16, 2025

Naming

Disable one of the two

Uh oh!

ascorbic commented Jul 16, 2025

Uh oh!

florian-lefebvre commented Aug 27, 2025

ematipico commented May 13, 2025 •

edited

Loading

ematipico May 15, 2025 •

edited

Loading

florian-lefebvre May 30, 2025 •

edited

Loading

Johannes-Andersen left a comment •

edited

Loading

Johannes-Andersen Jun 11, 2025 •

edited

Loading

ematipico commented Jun 11, 2025 •

edited

Loading

Eveeifyeve commented Aug 27, 2025 •

edited

Loading

ematipico commented Aug 28, 2025 •

edited

Loading

cleancommunities commented Aug 31, 2025 •

edited by florian-lefebvre

Loading