SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsastro-security

astro-security

Security & auditing

View repository

Updated 10-15 21:48

About this skill

Also covers the adapters' staticHeaders option (formerly experimentalStaticHeaders) for emitting CSP as HTTP headers instead of a meta tag, and the 7.1+ kind scoping to script-src-elem/-attr and style-src-elem/-attr. States the known limitations: CSP is inactive in dev mode (test with build + preview), incompatible with <ClientRouter /> view transitions, and unsupported for Shiki's inline styles. Does not cover general deployment adapter setup beyond the CSP header wiring (astro-deployment).

Astro Security

Agent Workflow (MANDATORY)

Before ANY implementation, spawn 3 agents in parallel, one Agent call each with a name:

  1. fuse-ai-pilot:explore-codebase - Analyze existing security config, adapters, headers
  2. fuse-ai-pilot:research-expert - Verify latest Astro 7 CSP docs via Context7/Exa
  3. mcp__context7__query-docs - Check CSP compatibility with deployment adapter

After implementation, run fuse-ai-pilot:sniper for validation.

Overview

When to Use

  • Enabling CSP in an Astro project (stable in v6.0.0)
  • Configuring security.csp in astro.config.mjs
  • Adding SHA-256/384/512 hashes for external scripts or styles
  • Using nonces for dynamic script injection
  • Setting up adapter staticHeaders for CSP as HTTP headers

CSP in Astro

Content Security Policy is stable since Astro 6.0 (previously experimental) and unchanged in Astro 7. When enabled:

  • Astro automatically generates SHA hashes for all bundled scripts and styles
  • Injects a <meta http-equiv="content-security-policy"> in each page's <head>
  • Supports script-src and style-src directives by default
  • Since 7.1: hashes/resources accept { hash | resource, kind: 'element' | 'attribute' | 'default' } to target *-src-elem / *-src-attr

Limitations:

  • Not supported in dev mode — test with build + preview
  • External scripts and styles require manual hash configuration
  • Incompatible with <ClientRouter /> view transitions (use native View Transition API)
  • Shiki syntax highlighter (inline styles) not currently supported

Reference Guide

Concepts

Topic Reference When to Consult
CSP overview csp-overview.md Understanding CSP in Astro
Configuration csp-config.md All config options
Script directive script-directive.md script-src configuration
Style directive style-directive.md style-src configuration
Nonces nonces.md Dynamic script injection
Static headers static-headers.md Adapter-based CSP headers

Templates

Template When to Use
csp-basic.md Basic CSP enable with algorithm
csp-advanced.md Full config with directives + static headers

Best Practices

  1. Always test with build + preview — CSP is inactive in dev mode
  2. Start with SHA-512 — strongest hash algorithm
  3. Use 'self' explicitly — not included by default in resources
  4. Hash external scripts manually — compute SHA hashes for CDN resources
  5. Combine with adapter headers — use staticHeaders: true on the Vercel/Netlify/Node adapter

Forbidden

  • Testing CSP in dev mode (doesn't work — always use build + preview)
  • Using <ClientRouter /> with CSP enabled
  • Forgetting to add 'self' when using resources array
  • Adding unsafe-inline (defeats purpose of CSP)