Security in Astro

A traditional CMS exposes a database, an admin login, and a stack of plugins that all run on every request — each one a potential entry point for SQL injection, remote code execution, or privilege escalation. An Astro site built to static HTML has none of that at runtime. Visitors receive pre-built files from a CDN, so there is no live application server to compromise.

Any value you render with { } is HTML-escaped, so a string like <script> is shown as text instead of executed. The escape hatch is the set:html directive — it injects raw HTML, so only ever pass it content you trust or have sanitized.

---
const userBio = await getUserBio(); // untrusted input
---

{/* ✅ Safe: automatically HTML-escaped */}
<p>{userBio}</p>

{/* ❌ Dangerous: set:html renders raw HTML, bypassing escaping */}
<p set:html={userBio} />

When you genuinely need to render user-supplied HTML (a rich-text bio, Markdown from an untrusted source), sanitize it first with a library like sanitize-html or isomorphic-dompurify.

---
import sanitizeHtml from "sanitize-html";
const clean = sanitizeHtml(userBio);
---

{/* ✅ Safe: rendered raw, but stripped of scripts and event handlers first */}
<p set:html={clean} />

Only variables prefixed with PUBLIC_ are inlined into the client bundle. Anything else is available on the server and at build time, but is never shipped to visitors. Keep your .env file out of git.

# .env  (add to .gitignore, never commit secrets)
PUBLIC_ANALYTICS_ID=G-XXXXXXX     # shipped to the browser
STRIPE_SECRET_KEY=sk_live_xxxxx   # server-only, never sent to the client

For type-safe variables with validation, use astro:env. Declaring a variable as access: "secret" guarantees it can never be imported into client code — the build fails if you try.

// astro.config.mjs
import { defineConfig, envField } from "astro/config";

export default defineConfig({
  env: {
    schema: {
      STRIPE_SECRET_KEY: envField.string({ context: "server", access: "secret" }),
      PUBLIC_ANALYTICS_ID: envField.string({ context: "client", access: "public" }),
    },
  },
});

When you handle form POST requests on the server, the security.checkOrigin option verifies that the request's Origin header matches your site before your handler runs — a simple, effective guard against CSRF. It is enabled by default for on-demand rendered pages, and you can set it explicitly:

// astro.config.mjs
import { defineConfig } from "astro/config";

export default defineConfig({
  output: "server",
  security: {
    checkOrigin: true, // reject cross-origin form POST/PUT/PATCH/DELETE requests
  },
});

On a static deploy, set response headers at your host. Netlify and Cloudflare Pages read a public/_headers file; Vercel uses vercel.json.

# public/_headers  (Netlify / Cloudflare Pages)
/*
  Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  X-Frame-Options: DENY
  Permissions-Policy: geolocation=(), microphone=(), camera=()

For on-demand routes, set headers in middleware so they apply to every response:

// src/middleware.ts
import { defineMiddleware } from "astro:middleware";

export const onRequest = defineMiddleware(async (context, next) => {
  const response = await next();
  response.headers.set("X-Content-Type-Options", "nosniff");
  response.headers.set("Referrer-Policy", "strict-origin-when-cross-origin");
  response.headers.set("X-Frame-Options", "DENY");
  return response;
});

Astro Actions validate input with Zod before your handler ever runs, so the data you receive is already typed and checked. The same Zod-powered schemas back Content Collections, giving your Markdown and data files validation at build time too.

// src/actions/index.ts
import { defineAction } from "astro:actions";
import { z } from "astro:schema";

export const server = {
  contact: defineAction({
    accept: "form",
    input: z.object({
      email: z.string().email(),
      message: z.string().min(1).max(2000),
    }),
    handler: async ({ email, message }) => {
      // input is already validated and typed before it reaches here
      await sendEmail(email, message);
      return { ok: true };
    },
  }),
};