X-Content-Type-Options für Vercel konfigurieren

Schritt-für-Schritt-Anleitung: MIME-Sniffing auf Vercel verhindern — ein einfacher Header in vercel.json schützt vor Content-Type-Confusion-Angriffen.

Vercel · Schritt für Schritt

X-Content-Type-Options auf Vercel

X-Content-Type-Options: nosniff verhindert MIME-Sniffing — ein Verhalten, bei dem Browser den Content-Type einer Response erraten, statt den deklarierten Typ zu verwenden. Angreifer können das ausnutzen, um harmlose Dateien als ausführbaren Code zu tarnen. Der Header ist mit 10 von 166 Punkten im Wolf-Agents Web Security Check bewertet.

Vercel setzt korrekte Content-Types für statische Dateien automatisch. Trotzdem sollten Sie nosniff explizit setzen — als Defense-in-Depth-Maßnahme gegen fehlerhafte Content-Types in API Routes oder dynamisch generierten Responses. Die Konfiguration per vercel.json dauert weniger als eine Minute.

1 Schritt 1 von 3

nosniff per vercel.json setzen

Ein einziger Eintrag in der vercel.json genügt. Der Header hat nur einen gültigen Wert: nosniff. Er gilt für alle Responses — HTML, JavaScript, CSS, Bilder und API-Antworten.

vercel.json Produktiv
// vercel.json — MIME-Sniffing verhindern
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        }
      ]
    }
  ]
}
2 Schritt 2 von 3

Korrekte Content-Types sicherstellen

Mit nosniff lehnt der Browser Ressourcen ab, deren Content-Type nicht zum Kontext passt. Stellen Sie sicher, dass Ihre API Routes den richtigen Content-Type setzen — z.B. application/json für JSON-Responses. Vercel setzt Content-Types für statische Dateien korrekt.

middleware.ts (Alternative) Edge
// middleware.ts — X-Content-Type-Options per Edge Middleware
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  response.headers.set('X-Content-Type-Options', 'nosniff');
  return response;
}
Wenn Ihre API Routes text/plain für JSON-Daten senden, blockiert der Browser mit nosniff die Verarbeitung als JSON. Setzen Sie immer den korrekten Content-Type in Ihren Responses.
3 Schritt 3 von 3

Header verifizieren

Prüfen Sie den X-Content-Type-Options-Header und die Content-Types Ihrer Dateien. Der Wolf-Agents Web Security Check prüft beide Aspekte — den nosniff-Header und die korrekte Zuordnung von Content-Types.

Terminal Verifizieren
# X-Content-Type-Options prüfen
curl -sI https://ihre-domain.de | grep -i x-content-type-options

# Erwartete Ausgabe:
x-content-type-options: nosniff

# Content-Type einer JavaScript-Datei prüfen
curl -sI https://ihre-domain.de/_next/static/chunks/main.js | grep -i content-type

# Erwartete Ausgabe:
content-type: application/javascript; charset=utf-8

Häufige Fehler

Falscher Content-Type in API Routes

API Routes, die JSON zurückgeben, aber keinen Content-Type: application/json setzen, funktionieren mit nosniff nicht korrekt. NextResponse.json() setzt den Header automatisch.

Vercel CDN cached ohne Header

Wenn Responses vor der vercel.json-Änderung gecached wurden, fehlt der Header in gecachten Versionen. Ein neues Deployment invalidiert den Cache und wendet den Header an.

Nur nosniff ist gültig

X-Content-Type-Options akzeptiert ausschließlich den Wert nosniff. Andere Werte wie none oder sniff werden vom Browser ignoriert — der Header hat dann keine Wirkung.

Compliance-Relevanz

X-Content-Type-Options ist eine grundlegende Sicherheitsmaßnahme. OWASP empfiehlt den Header als Standard-Konfiguration. NIS2 und PCI DSS fordern angemessene technische Maßnahmen — MIME-Sniffing-Schutz gehört zu den Basics. Der Wolf-Agents Web Security Check prüft den Header automatisch und bewertet ihn mit bis zu 10 Punkten.

Wie steht Ihre Domain bei X-Content-Type-Options?

Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.