X-Content-Type-Options für Next.js konfigurieren
Schritt-für-Schritt-Anleitung: nosniff via next.config.js headers() global setzen, API Routes absichern und statische Assets korrekt ausliefern.
X-Content-Type-Options in Next.js
Next.js bietet die headers()-Funktion in next.config.js als native Methode für HTTP-Security-Header. Ein Pattern wie source: "/(.*)" trifft alle Routen — Seiten, API-Endpunkte und statische Assets. Die Konfiguration funktioniert für Pages Router und App Router gleichermaßen.
X-Content-Type-Options bringt 10 von 166 Punkten im Wolf-Agents Web Security Check. Für API Routes, die eigene Response-Objekte zurückgeben, können Sie den Header zusätzlich explizit setzen — als Defense-in-Depth-Maßnahme, falls die Middleware-Konfiguration in Edge-Cases übersprungen wird.
next.config.js headers()
Die headers()-Funktion in next.config.js ist die empfohlene Methode für globale HTTP-Header in Next.js. Das Pattern /(.*) trifft alle Routen. Der Vorteil gegenüber Middleware: kein Performance-Overhead, keine Edge-Runtime-Einschränkungen.
// next.config.js
const nextConfig = {
async headers() {
return [
{
// Alle Routen — Seiten, API und statische Assets
source: '/(.*)',
headers: [
{
key: 'X-Content-Type-Options',
value: 'nosniff',
},
{
// Weitere empfohlene Security-Header
key: 'X-Frame-Options',
value: 'SAMEORIGIN',
},
{
key: 'Referrer-Policy',
value: 'strict-origin-when-cross-origin',
},
],
},
];
},
};
module.exports = nextConfig;Bei Deployment auf Vercel wird die next.config.js-Konfiguration automatisch angewendet. Für andere Hosting-Plattformen (Netlify, Render, eigener Server) gelten die gleichen Next.js-Konfigurationsregeln.
API Routes absichern
Für API Routes, die sensible Daten zurückgeben, können Sie den Header zusätzlich in der Route-Handler-Funktion setzen. Das ist eine Defense-in-Depth-Maßnahme — besonders relevant für API-Endpunkte, die JSON oder andere Datenformate zurückgeben.
// pages/api/data.js oder app/api/data/route.ts
// Pages Router API Route
export default function handler(req, res) {
// Explizit setzen für API-Antworten
res.setHeader('X-Content-Type-Options', 'nosniff');
res.setHeader('Content-Type', 'application/json');
res.json({ data: '...' });
}
// App Router Route Handler
export async function GET() {
return Response.json(
{ data: '...' },
{
headers: {
'X-Content-Type-Options': 'nosniff',
'Content-Type': 'application/json',
},
}
);
}Content-Type: application/json-Header ist für API-Endpunkte Pflicht — er verhindert, dass Browser die JSON-Antwort als HTML oder Script interpretieren. Zusammen mit nosniff ist der Schutz vollständig. Statische Assets prüfen
Next.js liefert statische Assets (JS-Chunks, CSS) aus dem /_next/static/-Verzeichnis aus. Mit der globalen headers()-Konfiguration sind diese automatisch mit nosniff abgesichert. Für Upload-Verzeichnisse können Sie ein separates Pattern mit Content-Disposition: attachment definieren.
// next.config.js — Spezifische Konfiguration für statische Assets
const nextConfig = {
async headers() {
return [
{
// Alle Routen
source: '/(.*)',
headers: [
{ key: 'X-Content-Type-Options', value: 'nosniff' },
],
},
{
// Upload-Bereich als Download erzwingen
source: '/uploads/(.*)',
headers: [
{ key: 'X-Content-Type-Options', value: 'nosniff' },
{ key: 'Content-Disposition', value: 'attachment' },
],
},
];
},
};
module.exports = nextConfig;Für Produktionsanwendungen empfiehlt sich S3, Cloudflare R2 oder ein ähnlicher Object-Storage für User-Uploads — mit eigener Domain und separaten Content-Type-Policies.
Verifizierung
Prüfen Sie den Header für verschiedene Routen-Typen: Seiten, API-Endpunkte und statische Assets. Next.js behandelt diese intern unterschiedlich — eine Prüfung aller drei Typen stellt sicher, dass die Konfiguration vollständig wirkt.
# Seite prüfen
curl -sI https://ihre-nextjs-app.de | grep -i x-content-type
# API-Route prüfen
curl -sI https://ihre-nextjs-app.de/api/data | grep -i x-content-type
# Statisches Asset prüfen
curl -sI https://ihre-nextjs-app.de/_next/static/chunks/main.js | grep -i "x-content-type|content-type"
# Erwartete Ausgabe bei allen drei:
# x-content-type-options: nosniffDie headers()-Konfiguration gilt auch im lokalen Development-Server (next dev). Testen Sie lokal mit curl -sI http://localhost:3000, bevor Sie deployen.
Wie steht Ihre Domain bei X-Content-Type-Options?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.
Häufig gestellte Fragen
Setzt Next.js X-Content-Type-Options automatisch?
Nein, nicht standardmäßig. Next.js bietet zwar eine eingebaute security-header-Konfiguration (seit Next.js 13.2 über die headers()-Funktion), aber Sie müssen den Header explizit konfigurieren. Die next.config.js-Methode ist die empfohlene Vorgehensweise für Next.js-Anwendungen.
Gilt der headers()-Block in next.config.js für alle Routen?
Das kommt auf das Pattern an. Mit source: "/(.*)" treffen Sie alle Routen — Seiten, API-Endpunkte und statische Dateien. Für maximale Abdeckung verwenden Sie dieses Pattern. Sie können auch spezifischere Patterns definieren, um bestimmte Routen unterschiedlich zu behandeln.
Was ist der Unterschied zwischen next.config.js headers() und Middleware?
headers() in next.config.js setzt Header statisch für gematchte Routen — einfach und performant. Next.js Middleware (middleware.ts) ist flexibler und kann Header dynamisch basierend auf Request-Daten setzen. Für statische Security-Header wie nosniff ist headers() ausreichend und bevorzugt.
Funktioniert die Konfiguration mit Next.js 13 App Router und Pages Router?
Ja. Die headers()-Funktion in next.config.js funktioniert für beide Router. Sie ist eine Konfigurationsoption auf Webserver-Ebene, nicht abhängig vom verwendeten Router. Für App Router und Pages Router ist die Konfiguration identisch.
Wie setze ich den Header für Next.js bei Vercel-Deployment?
Bei Vercel-Deployment wird die next.config.js-Konfiguration automatisch angewendet — kein separates Vercel-Konfigurationsfile nötig. Vercel unterstützt alle Next.js-Headers-Konfigurationen nativ. Alternativ können Sie Headers auch über vercel.json setzen, aber next.config.js ist die Next.js-native Methode.