X-Content-Type-Options für Netlify konfigurieren
Schritt-für-Schritt-Anleitung: MIME-Sniffing auf Netlify verhindern — ein einfacher One-Liner mit großer Wirkung gegen Content-Injection-Angriffe.
X-Content-Type-Options auf Netlify
X-Content-Type-Options: nosniff verhindert, dass Browser den MIME-Type einer Ressource erraten (MIME-Sniffing). Ohne diesen Header koennten Browser eine als Text deklarierte Datei als JavaScript interpretieren — ein Einfallstor für XSS-Angriffe. X-Content-Type-Options ist mit 10 von 166 Punkten ein relevanter Faktor im Wolf-Agents Web Security Check.
Auf Netlify ist die Konfiguration denkbar einfach: Ein einziger Header in netlify.toml oder _headers schützt alle Responses. Netlify setzt korrekte Content-Type Header für gaengige Dateitypen automatisch, sodass nosniff keine Kompatibilitätsprobleme verursacht.
Bei benutzerdefinierten Dateitypen (z.B. .wasm, .jsonld) müssen Sie den Content-Type in der netlify.toml explizit setzen, da nosniff den Browser daran hindert, den Typ zu erraten — was bei falschem oder fehlendem Content-Type zu Ladefehlern fuehrt.
nosniff Header per netlify.toml und _headers
Ein einziger Eintrag in der netlify.toml reicht aus. Der Header nosniff ist der einzig gueltige Wert — es gibt keine weiteren Konfigurationsoptionen. Alternativ können Sie eine Edge Function nutzen, um den Header dynamisch zu setzen und gleichzeitig fehlende Content-Types zu ergaenzen.
# netlify.toml — X-Content-Type-Options
[[headers]]
for = "/*"
[headers.values]
X-Content-Type-Options = "nosniff"# _headers — X-Content-Type-Options
/*
X-Content-Type-Options: nosniff// netlify/edge-functions/nosniff.ts
import type { Context } from "https://edge.netlify.com";
export default async (request: Request, context: Context) => {
const response = await context.next();
// nosniff für alle Responses setzen
response.headers.set(
"X-Content-Type-Options",
"nosniff"
);
// Netlify Functions: Content-Type sicherstellen
if (!response.headers.has("Content-Type")) {
response.headers.set(
"Content-Type",
"application/octet-stream"
);
}
return response;
};
export const config = { path: "/*" };MIME-Types für benutzerdefinierte Dateien
Netlify erkennt MIME-Types automatisch anhand der Dateiendung. Bei benutzerdefinierten Dateitypen, die Netlify nicht kennt, müssen Sie den Content-Type explizit in der netlify.toml setzen. Mit nosniff wird der Browser Dateien ohne korrekten Content-Type blockieren.
# netlify.toml — Content-Type für benutzerdefinierte Dateitypen
# WebAssembly
[[headers]]
for = "/*.wasm"
[headers.values]
Content-Type = "application/wasm"
X-Content-Type-Options = "nosniff"
# JSON-LD Dateien
[[headers]]
for = "/*.jsonld"
[headers.values]
Content-Type = "application/ld+json"
X-Content-Type-Options = "nosniff"
# SVG-Dateien (Netlify setzt korrekt image/svg+xml)
[[headers]]
for = "/*.svg"
[headers.values]
X-Content-Type-Options = "nosniff"Content-Type explizit in der Response setzen. Ohne Content-Type und mit nosniff kann der Browser die Response nicht korrekt verarbeiten. Setzen Sie application/json für API-Responses und text/html für HTML-Responses. Header verifizieren
Prüfen Sie den Header nach dem Deploy für verschiedene Ressourcentypen. Der Wolf-Agents Web Security Check testet automatisch, ob nosniff für HTML und Assets gesetzt ist.
# HTML prüfen
curl -sI https://ihre-domain.de/ | grep -i x-content-type
# Erwartete Ausgabe:
# X-Content-Type-Options: nosniff
# JavaScript-Asset prüfen
curl -sI https://ihre-domain.de/assets/main.js | grep -iE "content-type|x-content-type"
# Erwartete Ausgabe:
# Content-Type: application/javascript
# X-Content-Type-Options: nosniff
# CSS-Asset prüfen
curl -sI https://ihre-domain.de/assets/style.css | grep -iE "content-type|x-content-type"
# Netlify Function prüfen
curl -sI https://ihre-domain.de/.netlify/functions/api | grep -iE "content-type|x-content-type"
# Wolf-Agents Web Security Check nutzen:
# https://wolf-agents.com/tools/web-security-checkHäufige Fehler bei X-Content-Type-Options auf Netlify
Falscher Content-Type
Mit nosniff laedst der Browser Ressourcen nicht mehr, wenn der Content-Type falsch ist. Ein JavaScript-File mit text/plain wird blockiert. Prüfen Sie die Content-Types aller Assets nach dem Deploy.
Netlify Functions ohne Content-Type
Netlify Functions müssen den Content-Type explizit im Response-Objekt setzen. Ohne Content-Type kann der Browser die Response mit nosniff nicht korrekt verarbeiten — JSON-Responses werden dann als Download angeboten.
Header nur für HTML gesetzt
Der nosniff-Header sollte für alle Responses gelten — nicht nur für HTML. Das Wildcard-Pattern /* in netlify.toml stellt dies sicher. Pfadspezifische Header ergaenzen den globalen Header.
Deploy Preview mit fehlenden Assets
Wenn Assets auf Deploy Previews mit falschem Content-Type geliefert werden, blockiert nosniff das Laden. Testen Sie Deploy Previews gründlich, bevor Sie in Produktion deployen.
Compliance-Relevanz
X-Content-Type-Options ist eine Basisanforderung für Web-Sicherheit und wird von mehreren Standards empfohlen.
OWASP Secure Headers
Listet nosniff als Pflicht-Header. MIME-Sniffing-Schutz verhindert eine ganze Klasse von Content-Injection-Angriffen und ist eine der einfachsten Sicherheitsmassnahmen.
NIS2
Fordert technische Maßnahmen zur Cybersicherheit. MIME-Sniffing-Schutz ist eine grundlegende Maßnahme gegen bekannte Angriffsvektoren im Web.
PCI DSS
Verlangt den Schutz von Webanwendungen gegen bekannte Angriffe. nosniff verhindert, dass manipulierte Dateien als ausführbarer Code interpretiert werden.
Wolf-Agents Check
Bewertet X-Content-Type-Options mit bis zu 10 Punkten. Geprüft wird, ob nosniff für HTML-Responses und Asset-Responses gesetzt ist.
Wie steht Ihre Domain bei X-Content-Type-Options?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.