feat: experimental CSP

[ematipico]

Changes

API Bash instructions

Check out this repository.

git clone https://github.com/ematipico/astro-csp
cd astro-csp
pnpm i

You can test CSP using the command pnpm start

pnpm start

As explained in the README.md, you can't use the pnpm dev command because of how Vite works.

There are three pages:

• /counter, which uses a React component
• /islands, which uses server Islands
• /transitions (this seems borked, so I'll have to investigate why, but view transitions swap all the head elements, so maybe that's the reason)
• /index, list of the the pervious pages

All pages have custom <style>.

Tasks

• In /counter, try to use different client directives, for example client:only="react"
• In /islands, try to add props to the islands, or the fallback or slots too
• Try to add other styles in different means, such as importing a file from an external file
• Try to customise the directives, and add one regarding images where they can be loaded only from one source e.g. an external website

Testing

Docs

[changeset-bot]

🦋 Changeset detected

Latest commit: 93abee5

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codspeed-hq]

CodSpeed Performance Report

Merging #13802 will not alter performance

_{Comparing feat/csp (89ef3c4) with main (3c3b492)}

Summary

✅ 6 untouched benchmarks

[pkg-pr-new]

astro

npm i https://pkg.pr.new/astro@13802

@astrojs/cloudflare

npm i https://pkg.pr.new/@astrojs/cloudflare@13802

@astrojs/netlify

npm i https://pkg.pr.new/@astrojs/netlify@13802

@astrojs/node

npm i https://pkg.pr.new/@astrojs/node@13802

@astrojs/vercel

npm i https://pkg.pr.new/@astrojs/vercel@13802

commit: 89ef3c4

[HiDeoo]

Small feedback from me playing during the amazing API bash:

Directives not requiring a value

This is only a type issue, but some directives like upgrade-insecure-requests, sandbox, or trusted-types don't require a value.

For example, for upgrade-insecure-requests, the expected value is upgrade-insecure-requests ${string}, but it should be upgrade-insecure-requests without any value.

I guess there are 2 cases here:

• Directives not accepting a value at all, like upgrade-insecure-requests where the type should only be 'upgrade-insecure-requests'.
• Directives that can be used with or without a value, like sandbox and trusted-types, where the type should be 'sandbox' | `sandbox ${string}` .

report-uri directive

The report-uri directive is deprecated in favor of report-to, but as documented, until report-to is broadly supported you can specify both:

Content-Security-Policy: …; report-uri https://endpoint.example.com; report-to endpoint_name

I think we need to support both directives at the moment.