Zum Inhalt springen
CASOON

Astro 5.9 bis 5.16: Alle Neuerungen im Überblick

Entwicklung

Von Content Security Policy über Live Content Collections bis SVG-Optimierung – was sich seit Mai 2025 getan hat

12 Minuten
Astro 5.9 bis 5.16: Alle Neuerungen im Überblick
#Astro #Security #CSP #Content Security Policy

Astro hat seit Version 5.9 zahlreiche Features ausgeliefert – von experimenteller Content Security Policy über Live Content Collections bis hin zu SVG-Optimierung. Dieser Artikel fasst die wichtigsten Neuerungen der Versionen 5.9 bis 5.16 zusammen.

Astro 5.9: Security und Markdown-Rendering

Content Security Policy (experimentell)

Cross-Site-Scripting (XSS) zählt zu den häufigsten Angriffen auf Websites. Die Content Security Policy schränkt ein, von welchen Quellen Ressourcen geladen werden dürfen. Astro-Projekte mussten bisher oft auf unsafe-inline zurückgreifen – das hebelt den XSS-Schutz teilweise aus.

Astro 5.9 bringt experimentellen CSP-Support für alle Render-Modi:

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

export default defineConfig({
  experimental: {
    csp: true
  }
});

Astro generiert automatisch die passenden CSP-Header und <meta>-Elemente. Wer bereits CSP via Middleware nutzt, kann das weiterhin tun – der Browser wendet die strengere Richtlinie an.

Auswirkungen auf externe Ressourcen

CSP arbeitet mit Allowlists: Nur explizit erlaubte Quellen dürfen geladen werden. Das betrifft externe Skripte, Styles und Fonts gleichermaßen.

Externe Skripte (z.B. Alpine.js, Analytics): Ein Script von einem CDN wie unpkg wird blockiert, solange die Domain nicht in script-src eingetragen ist. Inline-Skripte benötigen zusätzlich Nonces oder Hashes – 'unsafe-inline' hebelt den XSS-Schutz aus.

Google Fonts: Hier sind zwei Direktiven nötig, da CSS und Schriftdateien von verschiedenen Domains kommen:

  • style-src für https://fonts.googleapis.com
  • font-src für https://fonts.gstatic.com

Ein typisches Setup für ein Astro-Projekt mit Alpine.js und Google Fonts:

Content-Security-Policy: 
  default-src 'self'; 
  script-src 'self' https://unpkg.com; 
  style-src 'self' https://fonts.googleapis.com; 
  font-src https://fonts.gstatic.com

CSP verhindert externe Ressourcen also nicht pauschal – sie müssen nur explizit freigegeben werden. Das erfordert initiale Konfigurationsarbeit, erhöht aber die Sicherheit erheblich.

Markdown-Helper-Funktion

Neu ist auch renderMarkdown für dynamische Markdown-Inhalte:

---
import { renderMarkdown } from 'astro:markdown';

const content = `
# Dynamischer Inhalt

Dieser Text kommt aus einer **API** oder Datenbank.
`;

const { html } = await renderMarkdown(content);
---

<article set:html={html} />

Anwendungsfälle: Markdown aus CMS-APIs rendern (Strapi, Directus, Contentful), dynamische Inhalte aus Datenbanken, GitHub READMEs einbinden.

Astro 5.10: Live Collections und Responsive Images

Live Content Collections (experimentell)

Das größte Feature: Content zur Laufzeit statt zur Build-Zeit laden. Die neuen Funktionen getLiveCollection() und getLiveEntry() ermöglichen frische Daten bei jedem Request.

Responsive Images (stabil)

Die zuvor experimentellen Responsive Images sind jetzt stabil. Automatische srcset- und sizes-Generierung mit drei Layout-Optionen:

  • constrained: Maximale Breite, skaliert nach unten
  • fixed: Feste Dimensionen
  • full-width: Volle Container-Breite

Neu ist die priority-Prop für Above-the-fold-Bilder.

CSP-Verbesserungen (5.10 + 5.11)

Der CSP-Support wurde in zwei Versionen erweitert: Ab 5.10 generiert Astro Response-Header für SSR-Seiten statt nur Meta-Tags. Mit 5.11 können Node.js-, Netlify- und Vercel-Adapter CSP-Header auch für prerenderte Seiten ausliefern. Direktiven wie report-uri, frame-ancestors und sandbox funktionieren damit auf statischen Seiten – aktivierbar über experimentalStaticHeaders.

Cloudflare-Adapter erweitert (5.10 + 5.13)

Der Cloudflare-Adapter bekommt kontinuierlich neue Features: workerEntryPoint (5.10) ermöglicht Durable Objects, Queues und Cron Triggers. Ab 5.13 funktioniert Workers KV auch während der lokalen Entwicklung.

Astro 5.11: Streaming-Kontrolle

HTML-Streaming deaktivieren

Der Node.js-Adapter bietet experimentalDisableStreaming – nützlich für Hosting-Szenarien, die nicht-gestreames HTML für CDN-Caching benötigen.

Astro 5.12: TOML-Support und Netlify Dev

TOML für Content Collections

Neben Markdown, JSON und YAML unterstützt Astro jetzt auch TOML-Dateien in Content Collections – ohne zusätzliche Konfiguration.

Neue Netlify Dev Experience

Der Netlify-Adapter nutzt jetzt Netlifys Vite-Plugin während der lokalen Entwicklung:

  • Lokaler Netlify Image CDN Server
  • Lokaler Netlify Blobs Server
  • Support für Redirects, Rewrites und Headers
  • Netlify Edge Context Zugriff

Environment Variables überarbeitet (5.12 + 5.13)

Zwei experimentelle Flags verbessern das Handling von Umgebungsvariablen: rawEnvValues (5.12) deaktiviert Astros automatische Typ-Konvertierung. Das experimentelle staticEnv (5.13) geht weiter – import.meta.env wird nicht mehr durch process.env-Calls ersetzt. Beide Features alignen Astro mit Vites Verhalten.

Astro 5.13: DevTools Workspace und Multiple Sitemaps

Chrome DevTools Workspace (experimentell)

Code-Änderungen direkt aus den Browser DevTools zurück in die Projektdateien speichern. CSS-Anpassungen synchronisieren automatisch.

Multiple Sitemaps

Die Sitemap-Integration erlaubt jetzt externe Sitemaps über customSitemaps einzubinden – nützlich für Multi-Framework-Setups.

Enum-Support in Astro DB

Text-Spalten in Astro DB unterstützen jetzt Enum-Werte mit korrekten TypeScript-Typen.

Astro 5.14: Routing Tools und React 19 Actions

Route Collision Warnings

Astro warnt jetzt, wenn mehrere dynamische Routen denselben Pfad rendern. Das experimentelle Flag failOnPrerenderConflict lässt den Build bei Konflikten fehlschlagen.

Route Patterns in getStaticPaths

Die neue routePattern-Property gibt Zugriff auf die ursprüngliche dynamische Segment-Definition.

Async Svelte Rendering

Svelte 5.36-Kompatibilität: Server-gerenderte Komponenten können jetzt await-Expressions direkt im Markup nutzen.

React 19 Actions Integration

Die stabilen Funktionen getActionState() und withState() integrieren mit Reacts useActionState() Hook für progressiv erweiterte Formulare.

Non-Node.js libSQL für Astro DB

Der neue web-Driver ermöglicht Astro DB in web-basierten Runtimes wie Cloudflare Workers.

SvgComponent Type

Ein neuer Built-in-Typ für SVG-Komponenten aus astro/types.

Astro 5.15: Skew Protection und Font-Preloading

Netlify Skew Protection

Automatische Synchronisierung von Client- und Server-Versionen während Deployments. Das System erkennt Version-Mismatches und handelt sie.

Neue Adapter APIs

Die AstroAdapter-Schnittstelle bekommt eine client-Konfiguration:

  • internalFetchHeaders: Custom Headers für Actions, View Transitions, Server Islands
  • assetQueryParams: Query-Parameter automatisch an Asset-URLs anhängen

Granulares Font-Preloading

Die experimentelle Fonts API erlaubt selektives Preloading nach Weight, Style und Subset.

Weitere Verbesserungen

  • Error Overlay: Copy-Button für Stack Traces
  • Cloudflare Scaffolding: astro add generiert automatisch wrangler.jsonc
  • Node.js 18 Deprecation im Vercel-Adapter

Astro 5.16: SVG-Optimierung und AI Agent Support

SVG-Optimierung mit SVGO (experimentell)

Automatische SVG-Optimierung während des Builds mit konfigurierbaren SVGO-Plugin-Einstellungen:

// astro.config.mjs
export default defineConfig({
  experimental: {
    svg: true
  }
});

Interactive Shortcuts für astro preview

Keyboard-Shortcuts im Preview-Modus: o + Enter öffnet im Browser, q + Enter beendet.

Besserer AI Agent Support

astro add --yes überspringt interaktive Prompts – ideal für Coding-Assistenten und Automation-Tools.

ActionInputSchema Utility Type

Ein neuer TypeScript-Utility-Typ extrahiert Input-Schemas aus Action-Definitionen.

Netlify Adapter Optimierung

82 MB weniger Dependencies durch eliminierte 310 transitive Abhängigkeiten.

Upgrade-Empfehlung

Für alle Versionen gilt:

# Empfohlene Methode
npx @astrojs/upgrade

# Oder manuell
npm install astro@latest

Experimentelle Features sind noch nicht für Produktion empfohlen – die API kann sich ändern. Die offizielle Dokumentation hat die aktuellen Details.

Einordnung

Die Astro-Entwicklung seit 5.9 zeigt klare Schwerpunkte:

  1. Security: CSP-Support wird kontinuierlich ausgebaut
  2. Developer Experience: DevTools Workspace, CLI-Shortcuts, AI Agent Support
  3. Adapter-Ecosystem: Netlify, Vercel und Cloudflare bekommen stetig neue Features
  4. Performance: Responsive Images stabil, SVG-Optimierung, Streaming-Kontrolle

Besonders die Live Content Collections (5.10) und der erweiterte CSP-Support verdienen Aufmerksamkeit für Projekte, die 2025 auf Astro setzen.

Quellen