Header setzen nach Plattform

Vorlagen für Vercel, Netlify, Next.js, Cloudflare, nginx und Apache. Dazu, was bei WordPress, Shopify, Lovable und Bolt geht.

Alle Vorlagen setzen dieselben sechs Header mit Werten, die fast nie etwas kaputt machen. Was jeder bewirkt und wie Sie ihn später verschärfen, steht in Schutz-Einstellungen für den Browser. Hier die Werte als Liste:

Header

Content-Security-Policy: object-src 'none'; base-uri 'self'; frame-ancestors 'self'; upgrade-insecure-requests
Strict-Transport-Security: max-age=31536000
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()

Veröffentlichen Sie Ihre Seite nach jeder Änderung neu und prüfen Sie sie dann noch einmal. Unten finden Sie Ihre Plattform.

Vercel

Legen Sie im Hauptordner Ihres Projekts eine Datei vercel.json an. Gibt es sie schon, ergänzen Sie den Teil headers.

vercel.json

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "object-src 'none'; base-uri 'self'; frame-ancestors 'self'; upgrade-insecure-requests"
        },
        {
          "key": "Strict-Transport-Security",
          "value": "max-age=31536000"
        },
        {
          "key": "X-Frame-Options",
          "value": "SAMEORIGIN"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        },
        {
          "key": "Permissions-Policy",
          "value": "camera=(), microphone=(), geolocation=()"
        }
      ]
    }
  ]
}

Netlify

Netlify liest eine Datei namens _headers im Ordner, der veröffentlicht wird. Bei Projekten mit Vite, wie sie Lovable und Bolt erzeugen, gehört sie in den Ordner public.

public/_headers

/*
  Content-Security-Policy: object-src 'none'; base-uri 'self'; frame-ancestors 'self'; upgrade-insecure-requests
  Strict-Transport-Security: max-age=31536000
  X-Frame-Options: SAMEORIGIN
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=()

Next.js

In der next.config legen Sie die Header einmal für alle Seiten fest. Das gilt, wenn Next.js als Server läuft, etwa bei Vercel. Bei einem statischen Export mit output: "export" greift das nicht. Nehmen Sie dann die Datei Ihres Hosters von oben.

next.config.ts

import type { NextConfig } from "next";

const securityHeaders = [
  { key: "Content-Security-Policy", value: "object-src 'none'; base-uri 'self'; frame-ancestors 'self'; upgrade-insecure-requests" },
  { key: "Strict-Transport-Security", value: "max-age=31536000" },
  { key: "X-Frame-Options", value: "SAMEORIGIN" },
  { key: "X-Content-Type-Options", value: "nosniff" },
  { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
  { key: "Permissions-Policy", value: "camera=(), microphone=(), geolocation=()" },
];

const nextConfig: NextConfig = {
  async headers() {
    return [{ source: "/:path*", headers: securityHeaders }];
  },
};

export default nextConfig;

Cloudflare

Läuft Ihre Seite über Cloudflare, können Sie die Header dort ergänzen, ohne den Server anzufassen.

Öffnen Sie im Cloudflare-Dashboard Ihre Domain und gehen Sie zu den Regeln (Rules).
Legen Sie eine neue Regel an, die Antwort-Header ändert. Sie heißt Response Header Transform Rule.
Als Bedingung wählen Sie alle eingehenden Anfragen.
Fügen Sie je Header eine Zeile hinzu: setzen, statischer Wert, Name und Wert aus der Liste oben.

Für HSTS hat Cloudflare einen eigenen Schalter bei den Einstellungen für SSL/TLS. Die Menünamen ändern sich ab und zu, die Begriffe bleiben gleich.

nginx

# im server-Block Ihrer Domain
add_header Content-Security-Policy "object-src 'none'; base-uri 'self'; frame-ancestors 'self'; upgrade-insecure-requests" always;
add_header Strict-Transport-Security "max-age=31536000" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
server_tokens off;

Danach mit sudo nginx -t prüfen und mit sudo systemctl reload nginx neu laden. Achtung: Steht in einem location-Block ein eigenes add_header, gelten dort die Zeilen aus dem server-Block nicht mehr. Wiederholen Sie sie dann im location-Block.

Apache

Tragen Sie die Zeilen in die .htaccess im Hauptordner Ihrer Seite ein. Dafür muss das Modul mod_headers aktiv sein, was bei den meisten Hostern der Fall ist.

.htaccess

<IfModule mod_headers.c>
  Header always set Content-Security-Policy "object-src 'none'; base-uri 'self'; frame-ancestors 'self'; upgrade-insecure-requests"
  Header always set Strict-Transport-Security "max-age=31536000"
  Header always set X-Frame-Options "SAMEORIGIN"
  Header always set X-Content-Type-Options "nosniff"
  Header always set Referrer-Policy "strict-origin-when-cross-origin"
  Header always set Permissions-Policy "camera=(), microphone=(), geolocation=()"
  Header unset X-Powered-By
</IfModule>

WordPress

Sie haben zwei Wege:

Mit Plugin. Suchen Sie im Plugin-Verzeichnis nach „security headers“. Diese Plugins setzen die Header über eine Einstellungsseite, ohne dass Sie Dateien öffnen müssen.
Auf Server-Ebene. Läuft Ihr Hoster mit Apache, nehmen Sie die Zeilen aus dem Abschnitt Apache. Setzen Sie sie in der .htaccess oberhalb von # BEGIN WordPress. Den Teil zwischen BEGIN und END überschreibt WordPress selbst.

Bei verwalteten WordPress-Hostern gibt es dafür oft eine eigene Einstellung im Panel.

Shopify

Ihr Shop läuft auf den Servern von Shopify. Eigene Header können Sie dort nicht eintragen, weder im Theme noch in den Einstellungen. Einige Schutz-Header setzt Shopify selbst. Was fehlt, kostet Punkte, die Sie nicht zurückholen können. Eine CSP als meta-Tag im Theme wirkt im Browser gegen eingeschleuste Skripte und zählt bei uns als CSP, wenn sie script-src oder default-src festlegt. frame-ancestors greift im meta-Tag nicht, der Schutz gegen Einbetten fehlt dann weiter.

Kümmern Sie sich bei Shopify um das, was Sie in der Hand haben. Entfernen Sie Apps und eingebundene Skripte, die Sie nicht mehr brauchen, und richten Sie den Schutz gegen gefälschte Mails für Ihre Domain ein.

Lovable, Bolt und andere Baukästen

Ob Sie Header setzen können, hängt davon ab, wo die App läuft. Beim Hosting des Baukastens selbst geht das oft nicht oder nur eingeschränkt. Verbinden Sie das Projekt mit GitHub und veröffentlichen es über Netlify oder Vercel, nehmen Sie die passende Vorlage von oben. Für Apps aus v0 gilt die Vorlage für Vercel und Next.js.

Sie können auch den Assistenten im Baukasten bitten, die Datei anzulegen:

Anweisung an den Assistenten

Neue Datei public/_headers anlegen, damit Netlify diese Header für alle Seiten setzt:

Content-Security-Policy: object-src 'none'; base-uri 'self'; frame-ancestors 'self'; upgrade-insecure-requests
Strict-Transport-Security: max-age=31536000
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()

Noch Fragen? Schreiben Sie uns.