Vercel

Content-Security-Policy for Static Content

Ensuring that Vercel serves your static content with the correct Content-Security-Policy headers requires some additional configuration. Specifically:

1. Set securityHeaders.enableOnStaticPages.provider to the value "vercel".
2. Set the @astrojs/vercel/static adapter (install the package @astrojs/vercel, you can check its documentation).

See a more complete example:

import { resolve } from 'node:path'

import vercel from '@astrojs/vercel/static';
import { shield } from '@kindspells/astro-shield'
import { defineConfig } from 'astro/config'

const rootDir = new URL('.', import.meta.url).pathname
const modulePath = resolve(rootDir, 'src', 'generated', 'sriHashes.mjs')

export default defineConfig({
  adapter: vercel(),
  integrations: [
    shield({
      // - If set, it controls how the security headers will be generated.
      // - If not set, no security headers will be generated.
      securityHeaders: {
        // This option is required to configure CSP headers for your static
        // content on Vercel.
        enableOnStaticPages: { provider: "vercel" },

        // - If set, it controls how the CSP (Content Security Policy) header
        //   will be generated.
        // - If not set, no CSP header will be configured for your static
        //   content (there is no need to specify its inner options).
        contentSecurityPolicy: {
          // - If set, it controls the "default" CSP directives (they can be
          //   overriden at runtime).
          // - If not set, Astro-Shield will use a minimal set of default
          //   directives.
          cspDirectives: {
            'default-src': "'none'",
          }
        }
      }
    })
  ]
})

संकेत

To see how to configure CSP headers for your dynamic content, check the page Content-Security-Policy (CSP).

संकेत

To learn more about how to configure headers for static content on Vercel, see their official documentation:

• Vercel: Headers