Referrer-Policy für Next.js konfigurieren
Konfigurationsanleitung: Referrer-Policy über next.config.js headers() global setzen, mit Middleware für dynamische Policies und pro-Element-Überschreiben in JSX/TSX.
Referrer-Policy in Next.js
Next.js bietet eine native Möglichkeit zur Header-Konfiguration über die headers()-Funktion in next.config.js. Für die meisten Anwendungsfälle reicht diese globale Konfiguration aus. Für dynamische, route-abhängige Policies bietet die Middleware maximale Flexibilität.
Referrer-Policy bringt 10 von 166 Punkten im Wolf-Agents Web Security Check. Beide Ansätze funktionieren für App Router und Pages Router. Bei statischem Export (output: 'export') greift next.config.js headers() nicht — dort ist ein vorgelagerter Webserver (Nginx, Cloudflare) oder das HTML-Meta-Tag notwendig.
next.config.js headers()
Die headers()-Funktion in next.config.js (oder next.config.ts) ist der empfohlene Weg für statische, globale HTTP-Header in Next.js. Das Muster '/(.*)' matcht alle Routen — inklusive API-Routes. Der Header wird beim Serving aller Seiten gesetzt.
// next.config.js — Globale Referrer-Policy
module.exports = {
async headers() {
return [
{
source: '/(.*)',
headers: [
{
key: 'Referrer-Policy',
value: 'strict-origin-when-cross-origin',
},
],
},
];
},
};// next.config.js — Alle Security-Header
const securityHeaders = [
{ key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
{ key: 'X-Content-Type-Options', value: 'nosniff' },
{ key: 'X-Frame-Options', value: 'SAMEORIGIN' },
{ key: 'Permissions-Policy', value: 'camera=(), microphone=()' },
];
module.exports = {
async headers() {
return [
{
source: '/(.*)',
headers: securityHeaders,
},
];
},
};Änderungen an next.config.js werden erst nach einem Neustart des Development-Servers (npm run dev) oder einem neuen Build (npm run build) wirksam. Im Gegensatz zur Middleware erfordert next.config.js keine Runtime-Verarbeitung.
Middleware-Alternative
Die Next.js Middleware läuft auf der Edge Runtime vor jedem Request und ermöglicht dynamische, route-abhängige Header. Legen Sie die Datei middleware.ts im Projekt-Root (App Router) oder im src/-Verzeichnis an.
// middleware.ts — Dynamische Referrer-Policy per Route
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const response = NextResponse.next();
// Strengere Policy für Admin-Bereich
if (request.nextUrl.pathname.startsWith('/admin')) {
response.headers.set('Referrer-Policy', 'no-referrer');
} else {
response.headers.set(
'Referrer-Policy',
'strict-origin-when-cross-origin'
);
}
return response;
}next.config.js vs. Middleware
| Eigenschaft | next.config.js | Middleware |
|---|---|---|
| Ausführung | Build-Zeit | Edge (pro Request) |
| Dynamische Header | Nein | Ja |
| Performance-Overhead | Keiner | Minimal (Edge) |
| Empfehlung | Standard-Fall | Komplexe Policies |
Pro-Element überschreiben
Für einzelne externe Links, Bilder oder Fetch-Requests können Sie die globale Policy mit dem referrerPolicy-Attribut (JSX) oder dem referrerpolicy-Attribut (HTML) überschreiben. Das ist nützlich, wenn bestimmte externe Ressourcen überhaupt keinen Referrer sehen sollen.
// Pro-Element überschreiben — im JSX/TSX
// Externer Partner-Link ohne Referrer
<a
href="https://partner.de"
referrerPolicy="no-referrer"
target="_blank"
rel="noopener noreferrer"
>
Partner-Website
</a>
// Bild ohne Referrer laden
<img
src="https://cdn.example.com/bild.jpg"
referrerPolicy="no-referrer"
alt="Beispielbild"
/>Das Element-Level-Attribut (referrerPolicy) hat die höchste Priorität und überschreibt sowohl den HTTP-Header als auch das Meta-Tag. Nutzen Sie es für einzelne Elemente, die eine abweichende Policy benötigen — z.B. externe Partner-Links ohne Referrer.
Konfiguration verifizieren
Bauen Sie die Anwendung neu und starten Sie den Server, bevor Sie den Header prüfen. Bei Vercel-Deployments überprüfen Sie den Header nach dem Deployment im Production-Environment — nicht nur lokal.
# 1. Next.js-Server lokal testen
npm run build && npm start
# 2. Header per curl prüfen
curl -sI http://localhost:3000 | grep -i referrer-policy
# Erwartete Ausgabe:
# Referrer-Policy: strict-origin-when-cross-origin
# 3. API-Route prüfen
curl -sI http://localhost:3000/api/health | grep -i referrer-policyWie steht Ihre Domain bei Referrer-Policy?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.
Häufig gestellte Fragen
Wie setze ich die Referrer-Policy in Next.js?
Die einfachste Methode: Fügen Sie in next.config.js eine headers()-Funktion hinzu, die für alle Routen (Muster "/(.*)" ) den Referrer-Policy Header setzt. Alternativ nutzen Sie die Next.js Middleware für dynamische, route-abhängige Policies.
Was ist der Unterschied zwischen next.config.js und Middleware für Header?
next.config.js headers() ist für statische, globale Header optimal — sie werden beim Build-Prozess konfiguriert. Middleware läuft bei jedem Request und erlaubt dynamische Header basierend auf Route, User-Agent, Authentifizierung etc. Für die Referrer-Policy reicht next.config.js in den meisten Fällen.
Gilt die Konfiguration für alle Routen inklusive API-Routes?
Ja. Das Muster "/(.*)" matched alle Routen inklusive API-Routes (/api/*). Wenn Sie für API-Routes eine andere Policy wünschen, definieren Sie zwei Einträge im headers()-Array: einen für /api/(.*) und einen für den Rest.
Wie setze ich die Referrer-Policy in Next.js App Router vs. Pages Router?
Die next.config.js headers()-Methode funktioniert für beide Router — App Router und Pages Router. Für den App Router gibt es zusätzlich die Option, Header in Route Handlers (app/api/route.ts) über Response-Objekte zu setzen. Die Middleware-Methode funktioniert ebenfalls für beide.
Werden Header auch bei statisch generierten Seiten (SSG) gesetzt?
Bei Next.js auf Vercel und eigenem Node.js-Server: Ja, der Header wird auch bei SSG-Seiten gesetzt, da Next.js die Header beim Serving hinzufügt. Bei reinem Static-Export (next export) funktioniert next.config.js headers() nicht — Sie benötigen dann eine serverseitige Lösung (Nginx/Cloudflare) oder das referrerPolicy-Meta-Tag.
Kann ich das referrerPolicy-Attribut auf einzelnen Next.js Link-Komponenten setzen?
Ja. Das standard HTML referrerpolicy-Attribut funktioniert auf dem nativen <a>-Tag. Die Next.js <Link>-Komponente rendert ein <a>-Tag — Sie können dort referrerPolicy="no-referrer" für spezifische externe Links setzen und damit die globale Policy überschreiben.
Funktioniert die Konfiguration auf Vercel, Netlify und eigenem Server?
next.config.js headers() funktioniert auf Vercel und eigenem Node.js-Server (npm start). Auf Netlify wird es ebenfalls unterstützt. Bei statischem Export oder anderen Hosting-Plattformen kann das Verhalten abweichen — prüfen Sie die Dokumentation Ihres Hosting-Providers.