skills.rest
fusengine
fusengineCOMMUNITY
Explore all skills by this author →
Website𝕏@fusengineGitHub

astro-security

Configures Content Security Policy headers, hashes, and nonces in Astro projects.

1|Updated Jul 29, 2026
Search Tags:#security headers#vercel#csp#web security#astro#nonces#content security policy
One-click install
npx skills add https://github.com/fusengine/kimi-code --skill astro-security-fusengine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-security
Source: https://github.com/fusengine/kimi-code/tree/main/plugins/astro-expert/skills/astro-security
Command: npx skills add https://github.com/fusengine/kimi-code --skill astro-security-fusengine

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Setting up Content Security Policy in Astro requires manually computing SHA hashes for external scripts, choosing the right directives, and wiring adapter-based headers — a process prone to misconfiguration that either breaks the site or leaves it unprotected. ## Core Features & Use Cases - Automatic CSP Configuration: Enables security.csp in astro.config.mjs with SHA-256/384/512 hash generation for bundled scripts and styles. - External Resource Handling: Guides manual hash computation for CDN scripts and styles, plus nonce setup for dynamic script injection in SSR mode. - Adapter-Based Headers: Configures experimentalStaticHeaders for Vercel and Netlify to deliver CSP via HTTP headers instead of meta tags. - Use Case: You are deploying an Astro site to Vercel with Google Analytics and Google Fonts. Use this Skill to configure script-src and style-src directives with the correct hashes and resources, then verify no CSP violations appear in the production build. ## Quick Start Configure Content Security Policy in my Astro project with SHA-512 hashing and set up the Vercel adapter to emit CSP as HTTP headers.

Frequently Asked Questions about astro-security

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enable Content Security Policy in Astro?▼

Enable CSP in Astro by setting security.csp in astro.config.mjs, either as true for defaults or with an algorithm like SHA-512. Astro automatically hashes all bundled scripts and styles and injects a content-security-policy meta tag into each page.

How to add external script hashes to Astro CSP config?▼

Add external script hashes under security.csp.scriptDirective.hashes using the format sha384-base64hash. Compute the hash with openssl by piping the downloaded script through openssl dgst -sha384 -binary and base64 encoding the output.

Does Astro CSP work in dev mode?▼

No, CSP is inactive during astro dev. You must test with astro build followed by astro preview to see the generated meta tags and verify there are no CSP violations in the browser console.

Can I use Astro CSP with view transitions?▼

No, CSP is incompatible with the ClientRouter component used for view transitions. The recommended workaround is to use the native View Transition API instead of ClientRouter when CSP is enabled.

How do I serve CSP as HTTP headers instead of a meta tag in Astro?▼

Use the Vercel adapter with experimentalStaticHeaders set to true, which emits CSP as HTTP headers per route. For large sites over 2,500 pages, enable the globalCsp option to avoid exceeding Vercel's config size limit.

When should I use nonces instead of hashes for CSP in Astro?▼

Use nonces for dynamically injected scripts in SSR mode, generating a fresh random value per request via middleware and storing it in Astro.locals. Hashes are better for static, pre-known scripts and styles.

Related Skills

Explore More Software Engineering Skills→
svssdevasvssdeva
1

perf-astro

Optimize Astro sites by inlining critical CSS and compressing builds.

Community
Intermediate
jrc1883jrc1883

deploy-netlify

Generate Netlify deployment configuration for frontend frameworks.

Community
Advanced
RedHatProductSecurityRedHatProductSecurity
47

client-side-security

Review browser-facing code for security vulnerabilities and compliance.

Official
Advanced
engineers-hub-ltd-in-house-projectengineers-hub-ltd-in-house-project

security-headers

Implement HTTP security headers with TypeScript middleware for web applications.

Official
Intermediate