Support CSP headers generation for static content on Netlify

[castarco]

To improve the usability of Astro-Shield, it would be good to support the generation of headers metadata specific for the Netlify provider, so we can generate CSP headers for static content.

Reference

• See https://docs.netlify.com/routing/headers/

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.

[dsmith-digitalmint]

@castarco thank you for working on this issue. I am having trouble getting it to work though. Is there the ability to configure the path of the _headers file? Here is my current setup:

public/headers:

# _headers
/* 
  X-Frame-Options: DENY
  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Resource-Policy: same-origin
  X-Robots-Tag: index, follow
  Referrer-Policy: no-referrer
  X-Content-Type-Options: nosniff
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
  Permissions-Policy: geolocation=(), midi=(), sync-xhr=(), microphone=(), camera=(), magnetometer=(), gyroscope=(), fullscreen=(self), payment=()

astro.config.mjs:

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import mdx from "@astrojs/mdx";
import sitemap from "@astrojs/sitemap";
import icon from "astro-icon";
import {shield} from '@kindspells/astro-shield'

export default defineConfig({
  site: 'my-site',
  integrations: [
      mdx(), 
      tailwind(),
      icon(),
      sitemap(),
      shield({}),
  ],
});

It looks like my headers file was properly consumed:

but it looks like the CSP isn't being properly added reference

What should I do?

[castarco]

Hi @dsmith-digitalmint , it works like this:

1. You can have a _headers file in your public/ directory, where you specify some headers. This is optional. But in case you do, the syntax is the one specified in https://docs.netlify.com/routing/headers/#syntax-for-the-headers-file , it would be something like...

   # a path:
   /templates/index.html
    # headers for that path:
    X-Frame-Options: DENY
    X-XSS-Protection: 1; mode=block
   # another path:
   /templates/index2.html
    # headers for that path:
    X-Frame-Options: SAMEORIGIN

2. When you run astro build, if Astro-Shield is configured as stated in the documentation ( https://astro-shield.kindspells.dev/guides/hosting-integrations/netlify/ ), it will either:
   • "patch" the _headers file after it is copied from public/ to dist/
   • or create a new one in case you opted for not having a _headers file in your public/ directory.

From my tests, Netlify takes care of running astro build for us and reading the patched/generated _headers file, without requiring from us any extra step such as committing the patched/generated file.

There is one strange detail, though, that is a bit confusing to me (I'm not even sure if the behavior is correct or not, as I didn't had time to check it thoroughly):

• When I load a page for the first time, it has the content-security-policy header as we want. When I refresh the page... the header isn't there, but I'm not sure if that's because the page is actually not dowloaded again due to its cached nature (when I force a "real" refresh, the content-security-policy header is there again).

Now, I've tested this workflow for just one day and a half, so I think it is quite plausible that there might be some holes in it, or some mistakes in my understanding.

There are some things that you could check:

• Are you following a different workflow? Is there any relevant difference that we should account for?
• Do you use a different format for the entries in the _headers file present in your public/ directory? (it doesn't look like you do, just trying to cover all the bases)
• Can you verify if the _headers file is properly "patched/generated" in your dist/ directory when you run astro build locally?
• Is it possible that you are observing the same strange behavior I noticed with the cached pages not sending the headers as when the content is 100% fresh?
• I see that you wrote public/headers and not public/_headers, I suspect it's just a typo in this message, but is it possible that the typo exists as well in your repository?

[castarco]

@dsmith-digitalmint

P.S.: Ah, I see, it's missing a couple of entries in the configuration object.

export default defineConfig({
  site: 'my-site',
  integrations: [
      mdx(), 
      tailwind(),
      icon(),
      sitemap(),
      shield({
        securityHeaders: {
          // This is required to work with Netlify
          enableOnStaticPages: { provider: "netlify" },

          // This is required to ensure that the CSP headers are generated
          contentSecurityPolicy: {},
        }
      }),
  ],
});

Also, well, this is enough for 100% static pages. To generate the headers for SSR content there are some extra knobs to turn, I hope that the documentation in https://astro-shield.kindspells.dev is enough 🤓 . If not, let me know.

I know it would be great if this worked out of the box without the extra bits of configuration, but the Netlify part is necessary to ensure that we can also do the same for other providers (such as Vercel), and the CSP part is necessary because the roadmap includes support for more security-related headers and we need to provide some flexibility.