{"id":5661,"date":"2026-10-14T15:18:07","date_gmt":"2026-10-14T13:18:07","guid":{"rendered":"https:\/\/wwwschutz.de\/blog\/?p=5661"},"modified":"2026-10-09T15:43:10","modified_gmt":"2026-10-09T13:43:10","slug":"security-header-einfach-erklaert-csp-und-hsts-verstaendlich-und-praxisnah","status":"publish","type":"post","link":"https:\/\/wwwschutz.de\/blog\/security-header-einfach-erklaert-csp-und-hsts-verstaendlich-und-praxisnah\/","title":{"rendered":"Security Header einfach erkl\u00e4rt: CSP und HSTS verst\u00e4ndlich und praxisnah"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Eine Website kann technisch einwandfrei funktionieren, gut aussehen und trotzdem angreifbar sein. Viele Sicherheitsl\u00fccken im Web entstehen nicht durch exotische Hackertricks, sondern dadurch, dass Browser nicht genau wissen, was sie tun d\u00fcrfen und was nicht. Genau hier setzen Security Header an: kleine Zusatzinformationen, die Ihr Server mit jeder Antwort an den Browser schickt und die dessen Verhalten gezielt absichern.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In diesem Artikel erfahren Sie, was Security-Header sind, wie die beiden wichtigsten Vertreter <strong>HSTS<\/strong> und <strong>CSP<\/strong> funktionieren und wie Sie beide Schritt f\u00fcr Schritt und ohne b\u00f6se \u00dcberraschungen einf\u00fchren. Dazu gibt es fertige Konfigurationsbeispiele f\u00fcr Nginx und Apache sowie eine Checkliste zum Abhaken.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Das Wichtigste in K\u00fcrze<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Security-Header<\/strong> sind HTTP-Antwortzeilen, die dem Browser Sicherheitsregeln f\u00fcr Ihre Seite mitgeben.<\/li>\n\n\n\n<li><strong>HSTS<\/strong> zwingt den Browser dazu, Ihre Seite ausschlie\u00dflich verschl\u00fcsselt per HTTPS aufzurufen.<\/li>\n\n\n\n<li><strong>CSP<\/strong> legt fest, welche Inhalte (Skripte, Bilder, Schriften, Frames) die Seite \u00fcberhaupt laden darf, und ist damit ein starker Schutz gegen Cross-Site-Scripting.<\/li>\n\n\n\n<li>Beide Header lassen sich mit wenigen Zeilen Serverkonfiguration einrichten, sollten aber <strong>schrittweise<\/strong> eingef\u00fchrt werden.<\/li>\n\n\n\n<li>Mit kostenlosen Online-Tests pr\u00fcfen Sie in Sekunden, ob Ihre Konfiguration greift.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Was sind Security Header \u00fcberhaupt?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn Ihr Browser eine Webseite aufruft, schickt der Server nicht nur den eigentlichen Inhalt (HTML, Bilder, Skripte), sondern vorab auch sogenannte <strong>HTTP-Header<\/strong>. Das sind Textzeilen mit Metainformationen, zum Beispiel \u00fcber den Inhaltstyp, die Dateigr\u00f6\u00dfe oder die Zwischenspeicherung.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Teil dieser Header dient ausschlie\u00dflich der Sicherheit. Sie sind sozusagen die Hausordnung f\u00fcr den Browser:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Darf diese Seite in einem fremden Rahmen (Frame) eingebettet werden?<\/li>\n\n\n\n<li>Von welchen Servern d\u00fcrfen Skripte nachgeladen werden?<\/li>\n\n\n\n<li>Muss die Verbindung immer verschl\u00fcsselt sein?<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Der Browser h\u00e4lt sich an diese Regeln und blockiert alles, was dagegen verst\u00f6\u00dft. Der gro\u00dfe Vorteil: Sie m\u00fcssen daf\u00fcr <strong>keinen Programmcode \u00e4ndern<\/strong>. Die Header werden zentral in der Konfiguration des Webservers (oder eines vorgeschalteten Dienstes) gesetzt und gelten sofort f\u00fcr die gesamte Seite.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-1-header-weg-server-browser-1024x576.png\" alt=\"Ablauf: Browser fragt an, Server antwortet mit Headern und Inhalt, Browser setzt die Regeln durch\" class=\"wp-image-5663\" srcset=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-1-header-weg-server-browser-1024x576.png 1024w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-1-header-weg-server-browser-300x169.png 300w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-1-header-weg-server-browser-768x432.png 768w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-1-header-weg-server-browser-1536x864.png 1536w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-1-header-weg-server-browser-2048x1152.png 2048w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-1-header-weg-server-browser-640x360.png 640w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Der Server schickt die Security-Header mit jeder Antwort mit, der Browser setzt die enthaltenen Regeln anschlie\u00dfend durch<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Beispiel, wie so eine Antwort aussehen kann:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>HTTP\/2 200\ncontent-type: text\/html; charset=UTF-8\nstrict-transport-security: max-age=31536000; includeSubDomains\ncontent-security-policy: default-src 'self'\nx-content-type-options: nosniff\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Die letzten drei Zeilen sind Security-Header. F\u00fcr den Besucher sind sie unsichtbar, f\u00fcr den Browser aber verbindlich.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HSTS: Immer verschl\u00fcsselt, ohne Ausnahme<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Das Problem, das HSTS l\u00f6st<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Auch wenn Ihre Seite ein g\u00fcltiges HTTPS-Zertifikat besitzt, bleibt eine Schwachstelle: Viele Besucher tippen nur <code>it-logic.de<\/code> in die Adresszeile oder folgen einem alten Link mit <code>http:\/\/<\/code>. Der Browser fragt dann zun\u00e4chst <strong>unverschl\u00fcsselt<\/strong> an, und erst die Antwort des Servers leitet auf HTTPS um.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In diesem kurzen Moment kann ein Angreifer, etwa in einem \u00f6ffentlichen WLAN, die Verbindung abfangen und manipulieren. Man spricht von einem sogenannten <strong>Downgrade-Angriff<\/strong> oder <strong>SSL-Stripping<\/strong>. Der Besucher bemerkt davon oft nichts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Die L\u00f6sung: Strict-Transport-Security<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Mit dem Header <code>Strict-Transport-Security<\/code> (kurz <strong>HSTS<\/strong>) teilt der Server dem Browser mit: \u201eF\u00fcr diese Domain gilt ab sofort ausschlie\u00dflich HTTPS. Merke dir das f\u00fcr eine bestimmte Zeit.\u201c<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Der Browser speichert diese Information und stellt k\u00fcnftig selbstst\u00e4ndig jede <code>http:\/\/<\/code>-Anfrage auf <code>https:\/\/<\/code> um, noch bevor \u00fcberhaupt ein unverschl\u00fcsseltes Paket das Ger\u00e4t verl\u00e4sst.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein typischer Header sieht so aus:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Strict-Transport-Security: max-age=31536000; includeSubDomains\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-2-hsts-ohne-und-mit-schutz-1024x576.png\" alt=\"Vergleich: Verbindung ohne HSTS mit Angreifer im WLAN und mit HSTS direkt \u00fcber HTTPS\" class=\"wp-image-5665\" srcset=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-2-hsts-ohne-und-mit-schutz-1024x576.png 1024w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-2-hsts-ohne-und-mit-schutz-300x169.png 300w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-2-hsts-ohne-und-mit-schutz-768x432.png 768w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-2-hsts-ohne-und-mit-schutz-1536x864.png 1536w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-2-hsts-ohne-und-mit-schutz-2048x1152.png 2048w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-2-hsts-ohne-und-mit-schutz-640x360.png 640w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Ohne HSTS kann die erste, unverschl\u00fcsselte Anfrage abgefangen werden. Mit HSTS stellt der Browser selbstst\u00e4ndig auf HTTPS um.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Die Bestandteile im Detail<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>max-age<\/strong> gibt in Sekunden an, wie lange sich der Browser die Regel merken soll. 31536000 Sekunden entsprechen einem Jahr. Bei jedem Seitenaufruf wird die Frist erneuert.<\/li>\n\n\n\n<li><strong>includeSubDomains<\/strong> dehnt die Regel auf alle Subdomains aus, etwa <code>shop.beispiel.de<\/code> oder <code>mail.beispiel.de<\/code>.<\/li>\n\n\n\n<li><strong>preload<\/strong> signalisiert, dass Sie die Domain in die HSTS-Preload-Liste der Browserhersteller aufnehmen lassen m\u00f6chten. Dann kennen Browser die Regel schon vor dem allerersten Besuch.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Wichtig zu wissen<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HSTS wird vom Browser <strong>nur \u00fcber HTTPS<\/strong> akzeptiert. \u00dcber eine unverschl\u00fcsselte Verbindung gesendet, wird der Header ignoriert.<\/li>\n\n\n\n<li>Beim <strong>allerersten Besuch<\/strong> einer Domain kennt der Browser die Regel noch nicht. Dieses Restrisiko schlie\u00dft nur die Preload-Liste.<\/li>\n\n\n\n<li>Die Preload-Aufnahme setzt unter anderem voraus: ein g\u00fcltiges Zertifikat, eine Weiterleitung von HTTP auf HTTPS, <code>includeSubDomains<\/code>, <code>preload<\/code> und eine <code>max-age<\/code> von mindestens einem Jahr. Ein Austrag aus der Liste dauert Monate. Gehen Sie diesen Schritt also nur dann, wenn wirklich <strong>alle<\/strong> Subdomains dauerhaft HTTPS-f\u00e4hig sind.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">So f\u00fchren Sie HSTS sicher ein<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ein zu aggressiver HSTS-Start ist einer der h\u00e4ufigsten Fehler. Wenn Sie <code>includeSubDomains<\/code> setzen und eine vergessene Subdomain nur per HTTP erreichbar ist, wird sie f\u00fcr Besucher pl\u00f6tzlich unerreichbar. Gehen Sie deshalb stufenweise vor:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Stellen Sie sicher, dass die gesamte Seite inklusive aller Ressourcen \u00fcber HTTPS funktioniert und das Zertifikat automatisch erneuert wird.<\/li>\n\n\n\n<li>Richten Sie eine dauerhafte Weiterleitung (301) von HTTP auf HTTPS ein.<\/li>\n\n\n\n<li>Starten Sie mit einer kurzen Laufzeit, zum Beispiel <code>max-age=300<\/code> (f\u00fcnf Minuten), und pr\u00fcfen Sie, ob alles funktioniert.<\/li>\n\n\n\n<li>Erh\u00f6hen Sie schrittweise auf einen Tag, eine Woche, einen Monat und schlie\u00dflich ein Jahr.<\/li>\n\n\n\n<li>Erg\u00e4nzen Sie <code>includeSubDomains<\/code> erst, wenn Sie jede Subdomain gepr\u00fcft haben.<\/li>\n\n\n\n<li>\u00dcberlegen Sie <code>preload<\/code> ganz zuletzt und nur, wenn Sie die Folgen verstanden haben.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">CSP: Die Inhaltsrichtlinie f\u00fcr Ihre Seite<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Das Problem, das CSP l\u00f6st<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Die h\u00e4ufigste Angriffsart auf Webseiten ist <strong>Cross-Site-Scripting (XSS)<\/strong>. Dabei schleust ein Angreifer eigenen JavaScript-Code in Ihre Seite ein, etwa \u00fcber ein Kommentarfeld, ein Suchfeld oder eine verwundbare Erweiterung. Der Browser kann nicht unterscheiden, ob ein Skript von Ihnen stammt oder von einem Angreifer, und f\u00fchrt beides aus.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Folgen reichen vom Diebstahl von Sitzungsdaten \u00fcber untergeschobene Formulare bis zum Mitschneiden von Eingaben.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Die L\u00f6sung: Content-Security-Policy<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Mit der <strong>Content Security Policy (CSP)<\/strong> erstellen Sie eine Positivliste: Sie legen fest, <strong>woher<\/strong> der Browser Inhalte laden und welche Aktionen er ausf\u00fchren darf. Alles, was nicht auf der Liste steht, wird blockiert. Selbst wenn ein Angreifer Code einschleusen kann, verweigert der Browser dessen Ausf\u00fchrung.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein einfaches Beispiel:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Content-Security-Policy: default-src 'self'; img-src 'self' https:\/\/cdn.beispiel.de; script-src 'self'\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u00dcbersetzt hei\u00dft das: Standardm\u00e4\u00dfig darf alles nur von der eigenen Domain kommen. Bilder sind zus\u00e4tzlich vom CDN <code>cdn.beispiel.de<\/code> erlaubt, Skripte ausschlie\u00dflich von der eigenen Domain.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-3-xss-ohne-und-mit-csp-1024x576.png\" alt=\"Vergleich: eingeschleustes Fremdskript wird ohne CSP ausgef\u00fchrt und mit CSP blockiert\" class=\"wp-image-5667\" srcset=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-3-xss-ohne-und-mit-csp-1024x576.png 1024w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-3-xss-ohne-und-mit-csp-300x169.png 300w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-3-xss-ohne-und-mit-csp-768x432.png 768w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-3-xss-ohne-und-mit-csp-1536x864.png 1536w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-3-xss-ohne-und-mit-csp-2048x1152.png 2048w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-3-xss-ohne-und-mit-csp-640x360.png 640w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Ohne CSP f\u00fchrt der Browser ein eingeschleustes Fremdskript aus. Mit CSP wird es blockiert, weil die Quelle nicht auf der Positivliste steht.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Die wichtigsten Direktiven<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Eine CSP besteht aus einzelnen Regeln, den <strong>Direktiven<\/strong>, getrennt durch Semikolons:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>default-src<\/strong>: die Grundregel f\u00fcr alle Inhaltstypen, f\u00fcr die keine eigene Direktive gesetzt ist.<\/li>\n\n\n\n<li><strong>script-src<\/strong>: erlaubte Quellen f\u00fcr JavaScript. Die wichtigste Direktive f\u00fcr den XSS-Schutz.<\/li>\n\n\n\n<li><strong>style-src<\/strong>: erlaubte Quellen f\u00fcr CSS.<\/li>\n\n\n\n<li><strong>img-src<\/strong>: erlaubte Quellen f\u00fcr Bilder.<\/li>\n\n\n\n<li><strong>font-src<\/strong>: erlaubte Quellen f\u00fcr Schriftarten.<\/li>\n\n\n\n<li><strong>connect-src<\/strong>: erlaubte Ziele f\u00fcr Anfragen per JavaScript (zum Beispiel <code>fetch<\/code> oder <code>XMLHttpRequest<\/code>).<\/li>\n\n\n\n<li><strong>frame-src<\/strong>: Quellen, die als eingebettete Frames erscheinen d\u00fcrfen, etwa ein YouTube-Video oder eine Karte.<\/li>\n\n\n\n<li><strong>frame-ancestors<\/strong>: bestimmt, wer <strong>Ihre<\/strong> Seite einbetten darf. Das ist der moderne Ersatz f\u00fcr den \u00e4lteren Header <code>X-Frame-Options<\/code> und sch\u00fctzt vor Clickjacking.<\/li>\n\n\n\n<li><strong>form-action<\/strong>: erlaubte Ziele f\u00fcr Formulare.<\/li>\n\n\n\n<li><strong>base-uri<\/strong>: schr\u00e4nkt das <code>&lt;base><\/code>-Element ein, \u00fcber das Angreifer sonst relative Links umbiegen k\u00f6nnten.<\/li>\n\n\n\n<li><strong>object-src<\/strong>: Plug-in-Inhalte. Hier ist <code>'none'<\/code> fast immer die richtige Wahl.<\/li>\n\n\n\n<li><strong>upgrade-insecure-requests<\/strong>: weist den Browser an, unsichere Ressourcen automatisch \u00fcber HTTPS anzufordern.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Gut zu wissen: <code>frame-ancestors<\/code>, <code>base-uri<\/code> und <code>form-action<\/code> erben <strong>nicht<\/strong> von <code>default-src<\/code>. Sie m\u00fcssen bei Bedarf immer ausdr\u00fccklich gesetzt werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Die wichtigsten Quellangaben<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>'self'<\/code>: die eigene Domain (gleiches Protokoll, gleicher Host, gleicher Port).<\/li>\n\n\n\n<li><code>'none'<\/code>: gar keine Quelle erlaubt.<\/li>\n\n\n\n<li><code>https:\/\/cdn.beispiel.de<\/code>: eine bestimmte Domain.<\/li>\n\n\n\n<li><code>https:<\/code>: jede beliebige HTTPS-Quelle (sehr gro\u00dfz\u00fcgig, nur im Notfall verwenden).<\/li>\n\n\n\n<li><code>data:<\/code>: Inhalte, die direkt in die Seite eingebettet sind, etwa kleine Bilder.<\/li>\n\n\n\n<li><code>'unsafe-inline'<\/code>: erlaubt Inline-Skripte oder Inline-Styles. Bei <code>script-src<\/code> hebelt das den XSS-Schutz weitgehend aus und sollte vermieden werden.<\/li>\n\n\n\n<li><code>'unsafe-eval'<\/code>: erlaubt Code-Ausf\u00fchrung aus Zeichenketten (<code>eval<\/code>). Ebenfalls riskant.<\/li>\n\n\n\n<li><code>'nonce-\u2026'<\/code> und <code>'sha256-\u2026'<\/code>: erlauben gezielt einzelne Inline-Skripte (siehe unten).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Inline-Skripte sicher erlauben: Nonce und Hash<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Viele Seiten enthalten kleine Skripte direkt im HTML. Statt pauschal <code>'unsafe-inline'<\/code> zu erlauben, gibt es zwei saubere Wege:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Nonce:<\/strong> Der Server erzeugt bei jeder Anfrage eine zuf\u00e4llige, einmalig g\u00fcltige Zeichenfolge, tr\u00e4gt sie in den Header und in das erlaubte Skript ein:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Content-Security-Policy: script-src 'nonce-r4nd0mW3rt'\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script nonce=\"r4nd0mW3rt\"&gt;\n  console.log(\"Dieses Skript ist ausdr\u00fccklich erlaubt\");\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Angreifer kennt den Wert nicht und kann dadurch keine eigenen Skripte ausf\u00fchren lassen. Wichtig: Der Wert muss pro Seitenaufruf neu und nicht erratbar sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Hash:<\/strong> Sie berechnen den SHA-256-Hash eines unver\u00e4nderlichen Skripts und tragen ihn in den Header ein. Der Browser vergleicht den Hash und f\u00fchrt das Skript nur bei \u00dcbereinstimmung aus. Das eignet sich f\u00fcr statische Seiten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Die goldene Regel: erst beobachten, dann blockieren<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Eine CSP, die zu streng startet, kann Ihre Seite lahmlegen: Schriften fehlen, das Kontaktformular tut nichts mehr, eingebettete Karten bleiben leer. Daf\u00fcr gibt es den <strong>Report-Only-Modus<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Content-Security-Policy-Report-Only: default-src 'self'; report-to csp-endpoint\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In diesem Modus blockiert der Browser <strong>nichts<\/strong>, meldet aber jeden Versto\u00df in der Entwicklerkonsole und optional an einen von Ihnen angegebenen Meldepunkt. So sehen Sie in Ruhe, was Ihre Richtlinie betreffen w\u00fcrde, bevor sie scharf geschaltet wird.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-4-csp-einfuehrung-kreislauf-1024x576.png\" alt=\"Kreislauf der CSP-Einf\u00fchrung in f\u00fcnf Schritten von der Bestandsaufnahme bis zur Pflege\" class=\"wp-image-5669\" srcset=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-4-csp-einfuehrung-kreislauf-1024x576.png 1024w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-4-csp-einfuehrung-kreislauf-300x169.png 300w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-4-csp-einfuehrung-kreislauf-768x432.png 768w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-4-csp-einfuehrung-kreislauf-1536x864.png 1536w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-4-csp-einfuehrung-kreislauf-2048x1152.png 2048w, https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-4-csp-einfuehrung-kreislauf-640x360.png 640w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Die CSP-Einf\u00fchrung in f\u00fcnf Schritten. Erst im Report-Only-Modus beobachten, dann scharf schalten und nach jeder \u00c4nderung erneut pr\u00fcfen.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Schritt f\u00fcr Schritt zur eigenen CSP<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Bestandsaufnahme:<\/strong> \u00d6ffnen Sie Ihre Seite im Browser mit den Entwicklertools (Reiter \u201eNetzwerk\u201c) und notieren Sie, von welchen Domains Skripte, Styles, Bilder, Schriften und Frames geladen werden.<\/li>\n\n\n\n<li><strong>Report-Only starten:<\/strong> Setzen Sie eine erste Richtlinie als <code>Content-Security-Policy-Report-Only<\/code>.<\/li>\n\n\n\n<li><strong>Konsole auswerten:<\/strong> Jede Meldung zeigt, welche Quelle fehlt. Entscheiden Sie bewusst, ob diese Quelle wirklich erlaubt sein soll.<\/li>\n\n\n\n<li><strong>Inline-Code aufr\u00e4umen:<\/strong> Verschieben Sie Skripte und Styles wenn m\u00f6glich in eigene Dateien oder nutzen Sie Nonces.<\/li>\n\n\n\n<li><strong>Scharf schalten:<\/strong> Wenn die Konsole sauber bleibt, benennen Sie den Header in <code>Content-Security-Policy<\/code> um.<\/li>\n\n\n\n<li><strong>Dauerhaft pflegen:<\/strong> Pr\u00fcfen Sie die Richtlinie nach jeder \u00c4nderung an Plug-ins, Themes, Trackern oder eingebetteten Diensten.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Eine solide Ausgangsbasis f\u00fcr eine statische Seite k\u00f6nnte so aussehen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'; upgrade-insecure-requests\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Besonderheiten bei WordPress<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress macht eine strenge CSP anspruchsvoll, weil Themes und Plug-ins h\u00e4ufig Inline-Skripte und Inline-Styles erzeugen. Praxistipps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Starten Sie unbedingt im Report-Only-Modus und testen Sie sowohl das Frontend als auch den Administrationsbereich.<\/li>\n\n\n\n<li>Der Admin-Bereich und der Block-Editor ben\u00f6tigen oft gro\u00dfz\u00fcgigere Regeln als die \u00f6ffentliche Seite. Setzen Sie die CSP daher gegebenenfalls nur f\u00fcr das Frontend.<\/li>\n\n\n\n<li>Externe Dienste wie Google Fonts, YouTube, Karten oder Statistik-Tools m\u00fcssen einzeln freigegeben werden. Aus Datenschutzsicht lohnt es sich ohnehin, Schriften lokal einzubinden.<\/li>\n\n\n\n<li>Jedes neue Plug-in kann die Richtlinie wieder brechen. Planen Sie nach Updates einen kurzen Funktionstest ein.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Weitere n\u00fctzliche Security Header im \u00dcberblick<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSP und HSTS sind die Schwergewichte, aber ein paar weitere Header sind mit minimalem Aufwand gesetzt und bringen echten Mehrwert:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>X-Content-Type-Options: nosniff<\/strong> verhindert, dass der Browser Dateitypen \u201eerr\u00e4t\u201c und dadurch harmlos wirkende Dateien als Skripte ausf\u00fchrt.<\/li>\n\n\n\n<li><strong>Referrer-Policy: strict-origin-when-cross-origin<\/strong> begrenzt, wie viel von der besuchten Adresse an externe Seiten weitergegeben wird. Gut f\u00fcr den Datenschutz.<\/li>\n\n\n\n<li><strong>Permissions-Policy<\/strong> schaltet Browserfunktionen wie Kamera, Mikrofon oder Standort f\u00fcr Ihre Seite ab, falls sie nicht ben\u00f6tigt werden. Beispiel: <code>camera=(), microphone=(), geolocation=()<\/code>.<\/li>\n\n\n\n<li><strong>X-Frame-Options: SAMEORIGIN<\/strong> sch\u00fctzt vor Clickjacking. Moderne Browser nutzen daf\u00fcr <code>frame-ancestors<\/code> in der CSP, der \u00e4ltere Header schadet aber als Erg\u00e4nzung nicht.<\/li>\n\n\n\n<li><strong>Cross-Origin-Opener-Policy<\/strong> und verwandte Header trennen Ihre Seite von fremden Fenstern ab. Das ist besonders f\u00fcr anspruchsvolle Anwendungen interessant.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Der fr\u00fchere Header <code>X-XSS-Protection<\/code> gilt als veraltet. Moderne Browser ignorieren ihn oder haben den zugeh\u00f6rigen Filter entfernt. Sie k\u00f6nnen ihn weglassen und stattdessen auf eine gute CSP setzen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Konfigurationsbeispiele<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Nginx<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tragen Sie die Header im <code>server<\/code>-Block Ihrer Seite ein:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># Security-Header f\u00fcr die gesamte Seite\nadd_header Strict-Transport-Security \"max-age=31536000; includeSubDomains\" always;\nadd_header X-Content-Type-Options \"nosniff\" always;\nadd_header Referrer-Policy \"strict-origin-when-cross-origin\" always;\nadd_header Permissions-Policy \"camera=(), microphone=(), geolocation=()\" always;\nadd_header Content-Security-Policy \"default-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self'\" always;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das Schl\u00fcsselwort <code>always<\/code> sorgt daf\u00fcr, dass die Header auch bei Fehlerseiten (zum Beispiel 404) gesendet werden. Beachten Sie au\u00dferdem: In Nginx werden <code>add_header<\/code>-Anweisungen aus einer h\u00f6heren Ebene <strong>nicht<\/strong> \u00fcbernommen, sobald auf einer tieferen Ebene (etwa in einem <code>location<\/code>-Block) eigene <code>add_header<\/code>-Zeilen stehen. Wiederholen Sie die Header dort bei Bedarf.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Apache<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Aktivieren Sie das Modul <code>mod_headers<\/code> und erg\u00e4nzen Sie in der Konfiguration oder in der <code>.htaccess<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># Security-Header f\u00fcr die gesamte Seite\nHeader always set Strict-Transport-Security \"max-age=31536000; includeSubDomains\"\nHeader always set X-Content-Type-Options \"nosniff\"\nHeader always set Referrer-Policy \"strict-origin-when-cross-origin\"\nHeader always set Permissions-Policy \"camera=(), microphone=(), geolocation=()\"\nHeader always set Content-Security-Policy \"default-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self'\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Hinter einem Proxy oder CDN<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Setzen Sie die Header m\u00f6glichst an <strong>einer<\/strong> Stelle. Wenn sowohl der Ursprungsserver als auch ein vorgeschalteter Dienst Header erg\u00e4nzen, entstehen Dubletten oder widerspr\u00fcchliche Werte. Bei doppelten CSP-Headern gilt zudem: Der Browser wendet <strong>alle<\/strong> Richtlinien an, und die jeweils strengere setzt sich durch.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">So pr\u00fcfen Sie Ihre Konfiguration<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nach der Einrichtung sollten Sie das Ergebnis immer kontrollieren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Kommandozeile:<\/strong> Mit <code>curl -I https:\/\/ihre-domain.de<\/code> sehen Sie alle Antwort-Header auf einen Blick.<\/li>\n\n\n\n<li><strong>Entwicklertools des Browsers:<\/strong> Im Reiter \u201eNetzwerk\u201c finden Sie die Header der Antwort, in der \u201eKonsole\u201c die Meldungen zu CSP-Verst\u00f6\u00dfen.<\/li>\n\n\n\n<li><strong>Online-Tests:<\/strong> Dienste wie <em>securityheaders.com<\/em> oder das <em>Mozilla Observatory<\/em> bewerten Ihre Header automatisch und geben konkrete Verbesserungsvorschl\u00e4ge. F\u00fcr HSTS-Preload gibt es zudem eine offizielle Pr\u00fcfseite unter <em>hstspreload.org<\/em>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">H\u00e4ufige Fehler und wie Sie sie vermeiden<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>HSTS zu fr\u00fch mit langer Laufzeit:<\/strong> Beginnen Sie mit kurzen Zeiten und steigern Sie sich. Ein Fehler l\u00e4sst sich sonst \u00fcber Monate nicht zur\u00fccknehmen.<\/li>\n\n\n\n<li><strong><code>'unsafe-inline'<\/code> bei script-src:<\/strong> Das f\u00fchlt sich bequem an, entwertet den XSS-Schutz der CSP aber stark. Nutzen Sie stattdessen Nonces oder Hashes.<\/li>\n\n\n\n<li><strong>Zu gro\u00dfz\u00fcgige Platzhalter:<\/strong> Eine Angabe wie <code>https:<\/code> oder <code>*<\/code> erlaubt nahezu alles und sch\u00fctzt kaum noch.<\/li>\n\n\n\n<li><strong>CSP ungetestet scharf geschaltet:<\/strong> Immer zuerst im Report-Only-Modus beobachten.<\/li>\n\n\n\n<li><strong>Header nur auf der Startseite:<\/strong> Stellen Sie sicher, dass die Regeln f\u00fcr alle Pfade, Fehlerseiten und Subdomains gelten.<\/li>\n\n\n\n<li><strong>Vergessene Anpassung nach \u00c4nderungen:<\/strong> Neue Plug-ins, Tracker oder eingebettete Dienste ben\u00f6tigen oft neue Freigaben in der CSP.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Checkliste zum Abhaken<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Die gesamte Seite ist \u00fcber HTTPS erreichbar, das Zertifikat erneuert sich automatisch.<\/li>\n\n\n\n<li>HTTP wird dauerhaft auf HTTPS umgeleitet.<\/li>\n\n\n\n<li>HSTS ist gesetzt und wurde schrittweise auf mindestens ein Jahr erh\u00f6ht.<\/li>\n\n\n\n<li><code>includeSubDomains<\/code> wird nur verwendet, wenn alle Subdomains HTTPS unterst\u00fctzen.<\/li>\n\n\n\n<li>Eine CSP wurde zuerst im Report-Only-Modus getestet und anschlie\u00dfend aktiviert.<\/li>\n\n\n\n<li>F\u00fcr Skripte wird kein pauschales <code>'unsafe-inline'<\/code> verwendet.<\/li>\n\n\n\n<li><code>object-src 'none'<\/code>, <code>base-uri<\/code> und <code>frame-ancestors<\/code> sind gesetzt.<\/li>\n\n\n\n<li><code>X-Content-Type-Options<\/code>, <code>Referrer-Policy<\/code> und <code>Permissions-Policy<\/code> sind erg\u00e4nzt.<\/li>\n\n\n\n<li>Das Ergebnis wurde mit curl und einem Online-Test \u00fcberpr\u00fcft.<\/li>\n\n\n\n<li>Nach jeder gr\u00f6\u00dferen \u00c4nderung an der Seite wird die Konfiguration erneut getestet.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">H\u00e4ufige Fragen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ersetzen Security-Header andere Sicherheitsma\u00dfnahmen?<\/strong> Nein. Sie sind eine zus\u00e4tzliche Schutzschicht. Aktuelle Software, sichere Passw\u00f6rter, saubere Eingabepr\u00fcfung und regelm\u00e4\u00dfige Updates bleiben unverzichtbar. Security-Header begrenzen den Schaden, falls doch einmal etwas durchrutscht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Verlangsamen Security-Header meine Seite?<\/strong> Nein. Die Header sind nur wenige Bytes gro\u00df und haben praktisch keinen Einfluss auf die Ladezeit. Eine saubere CSP kann sogar helfen, unn\u00f6tige Drittanbieter-Ressourcen aufzudecken.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Brauche ich HSTS, wenn ich bereits auf HTTPS umleite?<\/strong> Ja, es lohnt sich. Die Weiterleitung sch\u00fctzt nur, wenn die erste unverschl\u00fcsselte Anfrage nicht abgefangen wird. HSTS schlie\u00dft genau diese L\u00fccke f\u00fcr wiederkehrende Besucher.<\/p>\n\n\n\n<style>\n\/* Web-Security-Check CTA, alle Regeln sind auf .itl-cta begrenzt *\/\n.itl-cta{--itl-ink:#0f1b3d;--itl-text:#3b4a6b;--itl-muted:#6b7a9c;--itl-line:#dbe5f6;--itl-blue:#2f5bff;--itl-blue-dark:#1f45d6;--itl-soft:#f4f8ff;--itl-ok:#0f8a5a;--itl-ok-bg:#e6f8f1;--itl-warn:#9a5b00;--itl-warn-bg:#fff3dc;--itl-bad:#c2262e;--itl-bad-bg:#fdecee;display:block;clear:both;width:100%;max-width:100%;margin:2.5em 0;padding:0;box-sizing:border-box;container-type:inline-size;isolation:isolate;font-family:\"Segoe UI\",system-ui,-apple-system,\"Helvetica Neue\",Arial,sans-serif;font-size:16px;line-height:1.5;font-weight:400;text-align:left;color:var(--itl-text);letter-spacing:normal;text-transform:none}\n.itl-cta *,.itl-cta *::before,.itl-cta *::after{box-sizing:border-box}\n.itl-cta .itl-cta__card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:34px 24px 26px;overflow:hidden;background:#fff linear-gradient(160deg,#ffffff 55%,#eef4ff 100%);border:1px solid var(--itl-line);border-radius:22px;box-shadow:0 18px 40px rgba(31,58,138,.10)}\n.itl-cta .itl-cta__card::before{content:\"\";position:absolute;left:0;top:0;right:0;height:6px;background:linear-gradient(90deg,#2f5bff,#12c2c9)}\n.itl-cta .itl-cta__eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 12px;padding:0;font-size:13px;line-height:1.2;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--itl-blue)}\n.itl-cta .itl-cta__eyebrow::before{content:\"\";width:34px;height:4px;border-radius:2px;background:linear-gradient(90deg,#2f5bff,#12c2c9)}\n.itl-cta .itl-cta__title{margin:0 0 12px;padding:0;font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.02em;text-transform:none;color:var(--itl-ink)}\n.itl-cta .itl-cta__title span{color:var(--itl-blue)}\n.itl-cta .itl-cta__lead{margin:0 0 18px;padding:0;font-size:17px;line-height:1.55;color:var(--itl-text)}\n.itl-cta .itl-cta__list{display:grid;gap:9px;margin:0 0 24px !important;padding:0 !important;list-style:none !important}\n.itl-cta .itl-cta__list li{display:flex;align-items:flex-start;gap:11px;margin:0 !important;padding:0 !important;list-style:none !important;font-size:16px;line-height:1.4;font-weight:600;color:var(--itl-ink)}\n.itl-cta .itl-cta__list li::before,.itl-cta .itl-cta__list li::marker{content:none}\n.itl-cta .itl-cta__tick{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:linear-gradient(135deg,#12c2c9,#19b87a)}\n.itl-cta .itl-cta__tick svg{display:block;width:12px;height:12px}\n.itl-cta .itl-cta__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}\n.itl-cta a.itl-cta__btn,.itl-cta a.itl-cta__btn:link,.itl-cta a.itl-cta__btn:visited{display:inline-flex;align-items:center;justify-content:center;gap:12px;max-width:100%;margin:0;padding:16px 28px;border:0 !important;border-radius:14px;background:linear-gradient(135deg,#3563ff,#1f45d6);box-shadow:0 12px 24px rgba(47,91,255,.32) !important;color:#fff !important;font-size:18px;line-height:1.2;font-weight:700;letter-spacing:0;text-align:center;text-decoration:none !important;text-transform:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}\n.itl-cta a.itl-cta__btn:hover,.itl-cta a.itl-cta__btn:focus{background:linear-gradient(135deg,#2f5bff,#1a3bbf);box-shadow:0 16px 30px rgba(47,91,255,.40) !important;color:#fff !important;text-decoration:none !important;transform:translateY(-2px)}\n.itl-cta a.itl-cta__btn:focus-visible{outline:3px solid #0f1b3d;outline-offset:3px}\n.itl-cta a.itl-cta__btn:active{transform:translateY(0)}\n.itl-cta .itl-cta__btn svg{flex:none;display:block;width:20px;height:20px;transition:transform .18s ease}\n.itl-cta a.itl-cta__btn:hover svg,.itl-cta a.itl-cta__btn:focus svg{transform:translateX(4px)}\n.itl-cta .itl-cta__note{display:flex;flex-wrap:wrap;gap:2px 16px;margin:0;padding:0;font-size:14px;line-height:1.45;font-weight:600;color:var(--itl-muted)}\n.itl-cta .itl-cta__note span{color:inherit;white-space:nowrap}\n.itl-cta .itl-cta__note span::before{content:\"\";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#12c2c9;vertical-align:middle}\n.itl-cta .itl-cta__report{position:relative;padding:18px;background:var(--itl-soft);border:1px solid var(--itl-line);border-radius:18px;box-shadow:0 12px 26px rgba(31,58,138,.08)}\n.itl-cta .itl-cta__rhead{display:flex;align-items:center;gap:16px;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--itl-line)}\n.itl-cta .itl-cta__ring{flex:none;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:conic-gradient(#19b87a 0 82%,#dbe5f6 82% 100%)}\n.itl-cta .itl-cta__ring span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;font-size:22px;line-height:1;font-weight:800;color:var(--itl-ink)}\n.itl-cta .itl-cta__rtitle{display:block;margin:0 0 2px;font-size:11px;line-height:1.2;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--itl-muted)}\n.itl-cta .itl-cta__rname{display:block;font-size:18px;line-height:1.25;font-weight:800;color:var(--itl-ink)}\n.itl-cta .itl-cta__rows{display:grid;gap:9px}\n.itl-cta .itl-cta__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#fff;border:1px solid var(--itl-line);border-radius:12px;font-size:14px;line-height:1.3;font-weight:600;color:var(--itl-ink)}\n.itl-cta .itl-cta__row code{display:block;margin:0;padding:0;line-height:1.3;background:none;border:0;font-family:\"SFMono-Regular\",Consolas,\"Liberation Mono\",Menlo,monospace;font-size:13px;font-weight:600;color:var(--itl-ink)}\n.itl-cta .itl-cta__chip{flex:none;padding:3px 10px;border-radius:999px;font-size:12px;line-height:1.3;font-weight:800}\n.itl-cta .itl-cta__chip--ok{background:var(--itl-ok-bg);color:var(--itl-ok)}\n.itl-cta .itl-cta__chip--warn{background:var(--itl-warn-bg);color:var(--itl-warn)}\n.itl-cta .itl-cta__chip--bad{background:var(--itl-bad-bg);color:var(--itl-bad)}\n.itl-cta .itl-cta__tag{position:absolute;right:14px;top:-12px;padding:4px 12px;border-radius:999px;background:#0f1b3d;font-size:12px;line-height:1.3;font-weight:700;color:#fff}\n@container (min-width:640px){\n.itl-cta .itl-cta__card{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:36px;padding:40px 40px 36px}\n.itl-cta .itl-cta__title{font-size:34px}\n}\n@container (max-width:420px){\n.itl-cta .itl-cta__card{padding:30px 18px 22px;border-radius:18px}\n.itl-cta .itl-cta__title{font-size:26px}\n.itl-cta a.itl-cta__btn{width:100%}\n.itl-cta .itl-cta__report{padding:14px}\n}\n@media (prefers-reduced-motion:reduce){\n.itl-cta a.itl-cta__btn,.itl-cta .itl-cta__btn svg{transition:none}\n.itl-cta a.itl-cta__btn:hover,.itl-cta a.itl-cta__btn:focus{transform:none}\n}\n<\/style>\n<aside class=\"itl-cta\" aria-label=\"Web-Security-Check\">\n<div class=\"itl-cta__card\">\n<div class=\"itl-cta__main\">\n<span class=\"itl-cta__eyebrow\">Web-Security-Check<\/span>\n<p class=\"itl-cta__title\">Wie sicher ist Ihre <span>Website<\/span> wirklich?<\/p>\n<p class=\"itl-cta__lead\">Lassen Sie Ihre Seite automatisch pr\u00fcfen und erhalten Sie einen verst\u00e4ndlichen Bericht mit konkreten Handlungsempfehlungen, auch ohne IT-Wissen.<\/p>\n<ul class=\"itl-cta__list\">\n<li><span class=\"itl-cta__tick\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 8.5l3.2 3.2L13 4.8\"\/><\/svg><\/span>Security-Header wie CSP und HSTS<\/li>\n<li><span class=\"itl-cta__tick\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 8.5l3.2 3.2L13 4.8\"\/><\/svg><\/span>SSL\/TLS, SPF, DKIM und DMARC<\/li>\n<li><span class=\"itl-cta__tick\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 8.5l3.2 3.2L13 4.8\"\/><\/svg><\/span>CMS, Plugins und bekannte Schwachstellen<\/li>\n<li><span class=\"itl-cta__tick\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 8.5l3.2 3.2L13 4.8\"\/><\/svg><\/span>Barrierefreiheit nach WCAG<\/li>\n<\/ul>\n<div class=\"itl-cta__actions\">\n<a class=\"itl-cta__btn\" href=\"https:\/\/wwwschutz.de\/security-checks.html\">Website jetzt pr\u00fcfen<svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 10h12M11 5l5 5-5 5\"\/><\/svg><\/a>\n<p class=\"itl-cta__note\"><span>Ergebnis in ca. 15 Minuten<\/span><span>Einmalig ab 64 \u20ac zzgl. MwSt.<\/span><span>Kein Abo<\/span><\/p>\n<\/div>\n<\/div>\n<div class=\"itl-cta__report\" aria-hidden=\"true\">\n<span class=\"itl-cta__tag\">Beispielbericht<\/span>\n<div class=\"itl-cta__rhead\">\n<div class=\"itl-cta__ring\"><span>82<\/span><\/div>\n<div><span class=\"itl-cta__rtitle\">Sicherheitswert<\/span><span class=\"itl-cta__rname\">beispiel.de<\/span><\/div>\n<\/div>\n<div class=\"itl-cta__rows\">\n<div class=\"itl-cta__row\"><code>HSTS-Header<\/code><span class=\"itl-cta__chip itl-cta__chip--ok\">OK<\/span><\/div>\n<div class=\"itl-cta__row\"><code>CSP-Header<\/code><span class=\"itl-cta__chip itl-cta__chip--warn\">Pr\u00fcfen<\/span><\/div>\n<div class=\"itl-cta__row\"><code>SSL\/TLS-Zertifikat<\/code><span class=\"itl-cta__chip itl-cta__chip--ok\">OK<\/span><\/div>\n<div class=\"itl-cta__row\"><code>Altes Plugin<\/code><span class=\"itl-cta__chip itl-cta__chip--bad\">Kritisch<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/aside>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Kann eine falsche CSP meine Seite kaputt machen?<\/strong> Ja, deshalb der Weg \u00fcber Report-Only. So erkennen Sie Probleme, ohne dass Besucher etwas davon merken.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Muss ich das alles selbst konfigurieren?<\/strong> Nicht zwingend. Viele Hoster und CDN-Anbieter bieten Einstellungen f\u00fcr Security-Header an. Pr\u00fcfen Sie aber immer, was tats\u00e4chlich beim Besucher ankommt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Security-Header geh\u00f6ren zu den wirkungsvollsten Sicherheitsma\u00dfnahmen im Verh\u00e4ltnis zum Aufwand. <strong>HSTS<\/strong> stellt sicher, dass Verbindungen zu Ihrer Seite konsequent verschl\u00fcsselt bleiben, und <strong>CSP<\/strong> nimmt Angreifern die M\u00f6glichkeit, eingeschleusten Code auszuf\u00fchren. Beide verlangen etwas Sorgfalt bei der Einf\u00fchrung, belohnen Sie daf\u00fcr aber mit einem deutlich robusteren Auftritt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Beginnen Sie klein: Setzen Sie HSTS mit kurzer Laufzeit, starten Sie die CSP im Report-Only-Modus und steigern Sie die Strenge Schritt f\u00fcr Schritt. Nach einigen Tagen Beobachtung haben Sie eine Konfiguration, die zu Ihrer Seite passt und Besucher wie Betreiber sp\u00fcrbar besser sch\u00fctzt.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Security-Header sind Zusatzinformationen, die Websites an Browser senden, um deren Sicherheit zu gew\u00e4hrleisten. Sie definieren Regeln, die Browser befolgen m\u00fcssen, um z. B. eine verschl\u00fcsselte Verbindung sicherzustellen oder die Ladung von Inhalten aus bestimmten Quellen zu erlauben. Die Einbindung von Security-Headern kann durch Konfiguration auf dem Webserver erfolgen und sch\u00fctzt die Website vor Angriffen.<\/p>\n","protected":false},"author":4,"featured_media":5662,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5661","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","entry"],"blocks":"<!-- wp:paragraph -->\n<p><em>Eine Website kann technisch einwandfrei funktionieren, gut aussehen und trotzdem angreifbar sein. Viele Sicherheitsl\u00fccken im Web entstehen nicht durch exotische Hackertricks, sondern dadurch, dass Browser nicht genau wissen, was sie tun d\u00fcrfen und was nicht. Genau hier setzen Security Header an: kleine Zusatzinformationen, die Ihr Server mit jeder Antwort an den Browser schickt und die dessen Verhalten gezielt absichern.<\/em><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In diesem Artikel erfahren Sie, was Security-Header sind, wie die beiden wichtigsten Vertreter <strong>HSTS<\/strong> und <strong>CSP<\/strong> funktionieren und wie Sie beide Schritt f\u00fcr Schritt und ohne b\u00f6se \u00dcberraschungen einf\u00fchren. Dazu gibt es fertige Konfigurationsbeispiele f\u00fcr Nginx und Apache sowie eine Checkliste zum Abhaken.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Das Wichtigste in K\u00fcrze<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li><strong>Security-Header<\/strong> sind HTTP-Antwortzeilen, die dem Browser Sicherheitsregeln f\u00fcr Ihre Seite mitgeben.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>HSTS<\/strong> zwingt den Browser dazu, Ihre Seite ausschlie\u00dflich verschl\u00fcsselt per HTTPS aufzurufen.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>CSP<\/strong> legt fest, welche Inhalte (Skripte, Bilder, Schriften, Frames) die Seite \u00fcberhaupt laden darf, und ist damit ein starker Schutz gegen Cross-Site-Scripting.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Beide Header lassen sich mit wenigen Zeilen Serverkonfiguration einrichten, sollten aber <strong>schrittweise<\/strong> eingef\u00fchrt werden.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Mit kostenlosen Online-Tests pr\u00fcfen Sie in Sekunden, ob Ihre Konfiguration greift.<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Was sind Security Header \u00fcberhaupt?<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Wenn Ihr Browser eine Webseite aufruft, schickt der Server nicht nur den eigentlichen Inhalt (HTML, Bilder, Skripte), sondern vorab auch sogenannte <strong>HTTP-Header<\/strong>. Das sind Textzeilen mit Metainformationen, zum Beispiel \u00fcber den Inhaltstyp, die Dateigr\u00f6\u00dfe oder die Zwischenspeicherung.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Ein Teil dieser Header dient ausschlie\u00dflich der Sicherheit. Sie sind sozusagen die Hausordnung f\u00fcr den Browser:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li>Darf diese Seite in einem fremden Rahmen (Frame) eingebettet werden?<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Von welchen Servern d\u00fcrfen Skripte nachgeladen werden?<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Muss die Verbindung immer verschl\u00fcsselt sein?<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Der Browser h\u00e4lt sich an diese Regeln und blockiert alles, was dagegen verst\u00f6\u00dft. Der gro\u00dfe Vorteil: Sie m\u00fcssen daf\u00fcr <strong>keinen Programmcode \u00e4ndern<\/strong>. Die Header werden zentral in der Konfiguration des Webservers (oder eines vorgeschalteten Dienstes) gesetzt und gelten sofort f\u00fcr die gesamte Seite.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":5663,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-1-header-weg-server-browser-1024x576.png\" alt=\"Ablauf: Browser fragt an, Server antwortet mit Headern und Inhalt, Browser setzt die Regeln durch\" class=\"wp-image-5663\"\/><figcaption class=\"wp-element-caption\">Der Server schickt die Security-Header mit jeder Antwort mit, der Browser setzt die enthaltenen Regeln anschlie\u00dfend durch<\/figcaption><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Ein Beispiel, wie so eine Antwort aussehen kann:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>HTTP\/2 200\ncontent-type: text\/html; charset=UTF-8\nstrict-transport-security: max-age=31536000; includeSubDomains\ncontent-security-policy: default-src 'self'\nx-content-type-options: nosniff\n<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>Die letzten drei Zeilen sind Security-Header. F\u00fcr den Besucher sind sie unsichtbar, f\u00fcr den Browser aber verbindlich.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">HSTS: Immer verschl\u00fcsselt, ohne Ausnahme<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Das Problem, das HSTS l\u00f6st<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Auch wenn Ihre Seite ein g\u00fcltiges HTTPS-Zertifikat besitzt, bleibt eine Schwachstelle: Viele Besucher tippen nur <code>it-logic.de<\/code> in die Adresszeile oder folgen einem alten Link mit <code>http:\/\/<\/code>. Der Browser fragt dann zun\u00e4chst <strong>unverschl\u00fcsselt<\/strong> an, und erst die Antwort des Servers leitet auf HTTPS um.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In diesem kurzen Moment kann ein Angreifer, etwa in einem \u00f6ffentlichen WLAN, die Verbindung abfangen und manipulieren. Man spricht von einem sogenannten <strong>Downgrade-Angriff<\/strong> oder <strong>SSL-Stripping<\/strong>. Der Besucher bemerkt davon oft nichts.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Die L\u00f6sung: Strict-Transport-Security<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Mit dem Header <code>Strict-Transport-Security<\/code> (kurz <strong>HSTS<\/strong>) teilt der Server dem Browser mit: \u201eF\u00fcr diese Domain gilt ab sofort ausschlie\u00dflich HTTPS. Merke dir das f\u00fcr eine bestimmte Zeit.\u201c<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Der Browser speichert diese Information und stellt k\u00fcnftig selbstst\u00e4ndig jede <code>http:\/\/<\/code>-Anfrage auf <code>https:\/\/<\/code> um, noch bevor \u00fcberhaupt ein unverschl\u00fcsseltes Paket das Ger\u00e4t verl\u00e4sst.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Ein typischer Header sieht so aus:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>Strict-Transport-Security: max-age=31536000; includeSubDomains\n<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:image {\"id\":5665,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-2-hsts-ohne-und-mit-schutz-1024x576.png\" alt=\"Vergleich: Verbindung ohne HSTS mit Angreifer im WLAN und mit HSTS direkt \u00fcber HTTPS\" class=\"wp-image-5665\"\/><figcaption class=\"wp-element-caption\">Ohne HSTS kann die erste, unverschl\u00fcsselte Anfrage abgefangen werden. Mit HSTS stellt der Browser selbstst\u00e4ndig auf HTTPS um.<\/figcaption><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Die Bestandteile im Detail<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li><strong>max-age<\/strong> gibt in Sekunden an, wie lange sich der Browser die Regel merken soll. 31536000 Sekunden entsprechen einem Jahr. Bei jedem Seitenaufruf wird die Frist erneuert.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>includeSubDomains<\/strong> dehnt die Regel auf alle Subdomains aus, etwa <code>shop.beispiel.de<\/code> oder <code>mail.beispiel.de<\/code>.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>preload<\/strong> signalisiert, dass Sie die Domain in die HSTS-Preload-Liste der Browserhersteller aufnehmen lassen m\u00f6chten. Dann kennen Browser die Regel schon vor dem allerersten Besuch.<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Wichtig zu wissen<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li>HSTS wird vom Browser <strong>nur \u00fcber HTTPS<\/strong> akzeptiert. \u00dcber eine unverschl\u00fcsselte Verbindung gesendet, wird der Header ignoriert.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Beim <strong>allerersten Besuch<\/strong> einer Domain kennt der Browser die Regel noch nicht. Dieses Restrisiko schlie\u00dft nur die Preload-Liste.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Die Preload-Aufnahme setzt unter anderem voraus: ein g\u00fcltiges Zertifikat, eine Weiterleitung von HTTP auf HTTPS, <code>includeSubDomains<\/code>, <code>preload<\/code> und eine <code>max-age<\/code> von mindestens einem Jahr. Ein Austrag aus der Liste dauert Monate. Gehen Sie diesen Schritt also nur dann, wenn wirklich <strong>alle<\/strong> Subdomains dauerhaft HTTPS-f\u00e4hig sind.<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">So f\u00fchren Sie HSTS sicher ein<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Ein zu aggressiver HSTS-Start ist einer der h\u00e4ufigsten Fehler. Wenn Sie <code>includeSubDomains<\/code> setzen und eine vergessene Subdomain nur per HTTP erreichbar ist, wird sie f\u00fcr Besucher pl\u00f6tzlich unerreichbar. Gehen Sie deshalb stufenweise vor:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol class=\"wp-block-list\"><!-- wp:list-item -->\n<li>Stellen Sie sicher, dass die gesamte Seite inklusive aller Ressourcen \u00fcber HTTPS funktioniert und das Zertifikat automatisch erneuert wird.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Richten Sie eine dauerhafte Weiterleitung (301) von HTTP auf HTTPS ein.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Starten Sie mit einer kurzen Laufzeit, zum Beispiel <code>max-age=300<\/code> (f\u00fcnf Minuten), und pr\u00fcfen Sie, ob alles funktioniert.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Erh\u00f6hen Sie schrittweise auf einen Tag, eine Woche, einen Monat und schlie\u00dflich ein Jahr.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Erg\u00e4nzen Sie <code>includeSubDomains<\/code> erst, wenn Sie jede Subdomain gepr\u00fcft haben.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>\u00dcberlegen Sie <code>preload<\/code> ganz zuletzt und nur, wenn Sie die Folgen verstanden haben.<\/li>\n<!-- \/wp:list-item --><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">CSP: Die Inhaltsrichtlinie f\u00fcr Ihre Seite<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Das Problem, das CSP l\u00f6st<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Die h\u00e4ufigste Angriffsart auf Webseiten ist <strong>Cross-Site-Scripting (XSS)<\/strong>. Dabei schleust ein Angreifer eigenen JavaScript-Code in Ihre Seite ein, etwa \u00fcber ein Kommentarfeld, ein Suchfeld oder eine verwundbare Erweiterung. Der Browser kann nicht unterscheiden, ob ein Skript von Ihnen stammt oder von einem Angreifer, und f\u00fchrt beides aus.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Die Folgen reichen vom Diebstahl von Sitzungsdaten \u00fcber untergeschobene Formulare bis zum Mitschneiden von Eingaben.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Die L\u00f6sung: Content-Security-Policy<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Mit der <strong>Content Security Policy (CSP)<\/strong> erstellen Sie eine Positivliste: Sie legen fest, <strong>woher<\/strong> der Browser Inhalte laden und welche Aktionen er ausf\u00fchren darf. Alles, was nicht auf der Liste steht, wird blockiert. Selbst wenn ein Angreifer Code einschleusen kann, verweigert der Browser dessen Ausf\u00fchrung.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Ein einfaches Beispiel:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>Content-Security-Policy: default-src 'self'; img-src 'self' https:\/\/cdn.beispiel.de; script-src 'self'\n<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>\u00dcbersetzt hei\u00dft das: Standardm\u00e4\u00dfig darf alles nur von der eigenen Domain kommen. Bilder sind zus\u00e4tzlich vom CDN <code>cdn.beispiel.de<\/code> erlaubt, Skripte ausschlie\u00dflich von der eigenen Domain.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":5667,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-3-xss-ohne-und-mit-csp-1024x576.png\" alt=\"Vergleich: eingeschleustes Fremdskript wird ohne CSP ausgef\u00fchrt und mit CSP blockiert\" class=\"wp-image-5667\"\/><figcaption class=\"wp-element-caption\">Ohne CSP f\u00fchrt der Browser ein eingeschleustes Fremdskript aus. Mit CSP wird es blockiert, weil die Quelle nicht auf der Positivliste steht.<\/figcaption><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Die wichtigsten Direktiven<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Eine CSP besteht aus einzelnen Regeln, den <strong>Direktiven<\/strong>, getrennt durch Semikolons:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li><strong>default-src<\/strong>: die Grundregel f\u00fcr alle Inhaltstypen, f\u00fcr die keine eigene Direktive gesetzt ist.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>script-src<\/strong>: erlaubte Quellen f\u00fcr JavaScript. Die wichtigste Direktive f\u00fcr den XSS-Schutz.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>style-src<\/strong>: erlaubte Quellen f\u00fcr CSS.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>img-src<\/strong>: erlaubte Quellen f\u00fcr Bilder.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>font-src<\/strong>: erlaubte Quellen f\u00fcr Schriftarten.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>connect-src<\/strong>: erlaubte Ziele f\u00fcr Anfragen per JavaScript (zum Beispiel <code>fetch<\/code> oder <code>XMLHttpRequest<\/code>).<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>frame-src<\/strong>: Quellen, die als eingebettete Frames erscheinen d\u00fcrfen, etwa ein YouTube-Video oder eine Karte.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>frame-ancestors<\/strong>: bestimmt, wer <strong>Ihre<\/strong> Seite einbetten darf. Das ist der moderne Ersatz f\u00fcr den \u00e4lteren Header <code>X-Frame-Options<\/code> und sch\u00fctzt vor Clickjacking.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>form-action<\/strong>: erlaubte Ziele f\u00fcr Formulare.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>base-uri<\/strong>: schr\u00e4nkt das <code>&lt;base><\/code>-Element ein, \u00fcber das Angreifer sonst relative Links umbiegen k\u00f6nnten.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>object-src<\/strong>: Plug-in-Inhalte. Hier ist <code>'none'<\/code> fast immer die richtige Wahl.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>upgrade-insecure-requests<\/strong>: weist den Browser an, unsichere Ressourcen automatisch \u00fcber HTTPS anzufordern.<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Gut zu wissen: <code>frame-ancestors<\/code>, <code>base-uri<\/code> und <code>form-action<\/code> erben <strong>nicht<\/strong> von <code>default-src<\/code>. Sie m\u00fcssen bei Bedarf immer ausdr\u00fccklich gesetzt werden.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Die wichtigsten Quellangaben<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li><code>'self'<\/code>: die eigene Domain (gleiches Protokoll, gleicher Host, gleicher Port).<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>'none'<\/code>: gar keine Quelle erlaubt.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>https:\/\/cdn.beispiel.de<\/code>: eine bestimmte Domain.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>https:<\/code>: jede beliebige HTTPS-Quelle (sehr gro\u00dfz\u00fcgig, nur im Notfall verwenden).<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>data:<\/code>: Inhalte, die direkt in die Seite eingebettet sind, etwa kleine Bilder.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>'unsafe-inline'<\/code>: erlaubt Inline-Skripte oder Inline-Styles. Bei <code>script-src<\/code> hebelt das den XSS-Schutz weitgehend aus und sollte vermieden werden.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>'unsafe-eval'<\/code>: erlaubt Code-Ausf\u00fchrung aus Zeichenketten (<code>eval<\/code>). Ebenfalls riskant.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>'nonce-\u2026'<\/code> und <code>'sha256-\u2026'<\/code>: erlauben gezielt einzelne Inline-Skripte (siehe unten).<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Inline-Skripte sicher erlauben: Nonce und Hash<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Viele Seiten enthalten kleine Skripte direkt im HTML. Statt pauschal <code>'unsafe-inline'<\/code> zu erlauben, gibt es zwei saubere Wege:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Nonce:<\/strong> Der Server erzeugt bei jeder Anfrage eine zuf\u00e4llige, einmalig g\u00fcltige Zeichenfolge, tr\u00e4gt sie in den Header und in das erlaubte Skript ein:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>Content-Security-Policy: script-src 'nonce-r4nd0mW3rt'\n<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>&lt;script nonce=\"r4nd0mW3rt\"&gt;\n  console.log(\"Dieses Skript ist ausdr\u00fccklich erlaubt\");\n&lt;\/script&gt;\n<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>Ein Angreifer kennt den Wert nicht und kann dadurch keine eigenen Skripte ausf\u00fchren lassen. Wichtig: Der Wert muss pro Seitenaufruf neu und nicht erratbar sein.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Hash:<\/strong> Sie berechnen den SHA-256-Hash eines unver\u00e4nderlichen Skripts und tragen ihn in den Header ein. Der Browser vergleicht den Hash und f\u00fchrt das Skript nur bei \u00dcbereinstimmung aus. Das eignet sich f\u00fcr statische Seiten.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Die goldene Regel: erst beobachten, dann blockieren<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Eine CSP, die zu streng startet, kann Ihre Seite lahmlegen: Schriften fehlen, das Kontaktformular tut nichts mehr, eingebettete Karten bleiben leer. Daf\u00fcr gibt es den <strong>Report-Only-Modus<\/strong>:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>Content-Security-Policy-Report-Only: default-src 'self'; report-to csp-endpoint\n<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>In diesem Modus blockiert der Browser <strong>nichts<\/strong>, meldet aber jeden Versto\u00df in der Entwicklerkonsole und optional an einen von Ihnen angegebenen Meldepunkt. So sehen Sie in Ruhe, was Ihre Richtlinie betreffen w\u00fcrde, bevor sie scharf geschaltet wird.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":5669,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https:\/\/wwwschutz.de\/blog\/wp-content\/uploads\/abb-4-csp-einfuehrung-kreislauf-1024x576.png\" alt=\"Kreislauf der CSP-Einf\u00fchrung in f\u00fcnf Schritten von der Bestandsaufnahme bis zur Pflege\" class=\"wp-image-5669\"\/><figcaption class=\"wp-element-caption\">Die CSP-Einf\u00fchrung in f\u00fcnf Schritten. Erst im Report-Only-Modus beobachten, dann scharf schalten und nach jeder \u00c4nderung erneut pr\u00fcfen.<\/figcaption><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Schritt f\u00fcr Schritt zur eigenen CSP<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol class=\"wp-block-list\"><!-- wp:list-item -->\n<li><strong>Bestandsaufnahme:<\/strong> \u00d6ffnen Sie Ihre Seite im Browser mit den Entwicklertools (Reiter \u201eNetzwerk\u201c) und notieren Sie, von welchen Domains Skripte, Styles, Bilder, Schriften und Frames geladen werden.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Report-Only starten:<\/strong> Setzen Sie eine erste Richtlinie als <code>Content-Security-Policy-Report-Only<\/code>.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Konsole auswerten:<\/strong> Jede Meldung zeigt, welche Quelle fehlt. Entscheiden Sie bewusst, ob diese Quelle wirklich erlaubt sein soll.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Inline-Code aufr\u00e4umen:<\/strong> Verschieben Sie Skripte und Styles wenn m\u00f6glich in eigene Dateien oder nutzen Sie Nonces.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Scharf schalten:<\/strong> Wenn die Konsole sauber bleibt, benennen Sie den Header in <code>Content-Security-Policy<\/code> um.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Dauerhaft pflegen:<\/strong> Pr\u00fcfen Sie die Richtlinie nach jeder \u00c4nderung an Plug-ins, Themes, Trackern oder eingebetteten Diensten.<\/li>\n<!-- \/wp:list-item --><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Eine solide Ausgangsbasis f\u00fcr eine statische Seite k\u00f6nnte so aussehen:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'; upgrade-insecure-requests\n<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Besonderheiten bei WordPress<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>WordPress macht eine strenge CSP anspruchsvoll, weil Themes und Plug-ins h\u00e4ufig Inline-Skripte und Inline-Styles erzeugen. Praxistipps:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li>Starten Sie unbedingt im Report-Only-Modus und testen Sie sowohl das Frontend als auch den Administrationsbereich.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Der Admin-Bereich und der Block-Editor ben\u00f6tigen oft gro\u00dfz\u00fcgigere Regeln als die \u00f6ffentliche Seite. Setzen Sie die CSP daher gegebenenfalls nur f\u00fcr das Frontend.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Externe Dienste wie Google Fonts, YouTube, Karten oder Statistik-Tools m\u00fcssen einzeln freigegeben werden. Aus Datenschutzsicht lohnt es sich ohnehin, Schriften lokal einzubinden.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Jedes neue Plug-in kann die Richtlinie wieder brechen. Planen Sie nach Updates einen kurzen Funktionstest ein.<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Weitere n\u00fctzliche Security Header im \u00dcberblick<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>CSP und HSTS sind die Schwergewichte, aber ein paar weitere Header sind mit minimalem Aufwand gesetzt und bringen echten Mehrwert:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li><strong>X-Content-Type-Options: nosniff<\/strong> verhindert, dass der Browser Dateitypen \u201eerr\u00e4t\u201c und dadurch harmlos wirkende Dateien als Skripte ausf\u00fchrt.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Referrer-Policy: strict-origin-when-cross-origin<\/strong> begrenzt, wie viel von der besuchten Adresse an externe Seiten weitergegeben wird. Gut f\u00fcr den Datenschutz.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Permissions-Policy<\/strong> schaltet Browserfunktionen wie Kamera, Mikrofon oder Standort f\u00fcr Ihre Seite ab, falls sie nicht ben\u00f6tigt werden. Beispiel: <code>camera=(), microphone=(), geolocation=()<\/code>.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>X-Frame-Options: SAMEORIGIN<\/strong> sch\u00fctzt vor Clickjacking. Moderne Browser nutzen daf\u00fcr <code>frame-ancestors<\/code> in der CSP, der \u00e4ltere Header schadet aber als Erg\u00e4nzung nicht.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Cross-Origin-Opener-Policy<\/strong> und verwandte Header trennen Ihre Seite von fremden Fenstern ab. Das ist besonders f\u00fcr anspruchsvolle Anwendungen interessant.<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Der fr\u00fchere Header <code>X-XSS-Protection<\/code> gilt als veraltet. Moderne Browser ignorieren ihn oder haben den zugeh\u00f6rigen Filter entfernt. Sie k\u00f6nnen ihn weglassen und stattdessen auf eine gute CSP setzen.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Konfigurationsbeispiele<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Nginx<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Tragen Sie die Header im <code>server<\/code>-Block Ihrer Seite ein:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code># Security-Header f\u00fcr die gesamte Seite\nadd_header Strict-Transport-Security \"max-age=31536000; includeSubDomains\" always;\nadd_header X-Content-Type-Options \"nosniff\" always;\nadd_header Referrer-Policy \"strict-origin-when-cross-origin\" always;\nadd_header Permissions-Policy \"camera=(), microphone=(), geolocation=()\" always;\nadd_header Content-Security-Policy \"default-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self'\" always;\n<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:paragraph -->\n<p>Das Schl\u00fcsselwort <code>always<\/code> sorgt daf\u00fcr, dass die Header auch bei Fehlerseiten (zum Beispiel 404) gesendet werden. Beachten Sie au\u00dferdem: In Nginx werden <code>add_header<\/code>-Anweisungen aus einer h\u00f6heren Ebene <strong>nicht<\/strong> \u00fcbernommen, sobald auf einer tieferen Ebene (etwa in einem <code>location<\/code>-Block) eigene <code>add_header<\/code>-Zeilen stehen. Wiederholen Sie die Header dort bei Bedarf.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Apache<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Aktivieren Sie das Modul <code>mod_headers<\/code> und erg\u00e4nzen Sie in der Konfiguration oder in der <code>.htaccess<\/code>:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code># Security-Header f\u00fcr die gesamte Seite\nHeader always set Strict-Transport-Security \"max-age=31536000; includeSubDomains\"\nHeader always set X-Content-Type-Options \"nosniff\"\nHeader always set Referrer-Policy \"strict-origin-when-cross-origin\"\nHeader always set Permissions-Policy \"camera=(), microphone=(), geolocation=()\"\nHeader always set Content-Security-Policy \"default-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self'\"\n<\/code><\/pre>\n<!-- \/wp:code -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3 class=\"wp-block-heading\">Hinter einem Proxy oder CDN<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Setzen Sie die Header m\u00f6glichst an <strong>einer<\/strong> Stelle. Wenn sowohl der Ursprungsserver als auch ein vorgeschalteter Dienst Header erg\u00e4nzen, entstehen Dubletten oder widerspr\u00fcchliche Werte. Bei doppelten CSP-Headern gilt zudem: Der Browser wendet <strong>alle<\/strong> Richtlinien an, und die jeweils strengere setzt sich durch.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">So pr\u00fcfen Sie Ihre Konfiguration<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Nach der Einrichtung sollten Sie das Ergebnis immer kontrollieren:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li><strong>Kommandozeile:<\/strong> Mit <code>curl -I https:\/\/ihre-domain.de<\/code> sehen Sie alle Antwort-Header auf einen Blick.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Entwicklertools des Browsers:<\/strong> Im Reiter \u201eNetzwerk\u201c finden Sie die Header der Antwort, in der \u201eKonsole\u201c die Meldungen zu CSP-Verst\u00f6\u00dfen.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Online-Tests:<\/strong> Dienste wie <em>securityheaders.com<\/em> oder das <em>Mozilla Observatory<\/em> bewerten Ihre Header automatisch und geben konkrete Verbesserungsvorschl\u00e4ge. F\u00fcr HSTS-Preload gibt es zudem eine offizielle Pr\u00fcfseite unter <em>hstspreload.org<\/em>.<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">H\u00e4ufige Fehler und wie Sie sie vermeiden<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li><strong>HSTS zu fr\u00fch mit langer Laufzeit:<\/strong> Beginnen Sie mit kurzen Zeiten und steigern Sie sich. Ein Fehler l\u00e4sst sich sonst \u00fcber Monate nicht zur\u00fccknehmen.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong><code>'unsafe-inline'<\/code> bei script-src:<\/strong> Das f\u00fchlt sich bequem an, entwertet den XSS-Schutz der CSP aber stark. Nutzen Sie stattdessen Nonces oder Hashes.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Zu gro\u00dfz\u00fcgige Platzhalter:<\/strong> Eine Angabe wie <code>https:<\/code> oder <code>*<\/code> erlaubt nahezu alles und sch\u00fctzt kaum noch.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>CSP ungetestet scharf geschaltet:<\/strong> Immer zuerst im Report-Only-Modus beobachten.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Header nur auf der Startseite:<\/strong> Stellen Sie sicher, dass die Regeln f\u00fcr alle Pfade, Fehlerseiten und Subdomains gelten.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>Vergessene Anpassung nach \u00c4nderungen:<\/strong> Neue Plug-ins, Tracker oder eingebettete Dienste ben\u00f6tigen oft neue Freigaben in der CSP.<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Checkliste zum Abhaken<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:list -->\n<ul class=\"wp-block-list\"><!-- wp:list-item -->\n<li>Die gesamte Seite ist \u00fcber HTTPS erreichbar, das Zertifikat erneuert sich automatisch.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>HTTP wird dauerhaft auf HTTPS umgeleitet.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>HSTS ist gesetzt und wurde schrittweise auf mindestens ein Jahr erh\u00f6ht.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>includeSubDomains<\/code> wird nur verwendet, wenn alle Subdomains HTTPS unterst\u00fctzen.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Eine CSP wurde zuerst im Report-Only-Modus getestet und anschlie\u00dfend aktiviert.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>F\u00fcr Skripte wird kein pauschales <code>'unsafe-inline'<\/code> verwendet.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>object-src 'none'<\/code>, <code>base-uri<\/code> und <code>frame-ancestors<\/code> sind gesetzt.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>X-Content-Type-Options<\/code>, <code>Referrer-Policy<\/code> und <code>Permissions-Policy<\/code> sind erg\u00e4nzt.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Das Ergebnis wurde mit curl und einem Online-Test \u00fcberpr\u00fcft.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Nach jeder gr\u00f6\u00dferen \u00c4nderung an der Seite wird die Konfiguration erneut getestet.<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">H\u00e4ufige Fragen<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p><strong>Ersetzen Security-Header andere Sicherheitsma\u00dfnahmen?<\/strong> Nein. Sie sind eine zus\u00e4tzliche Schutzschicht. Aktuelle Software, sichere Passw\u00f6rter, saubere Eingabepr\u00fcfung und regelm\u00e4\u00dfige Updates bleiben unverzichtbar. Security-Header begrenzen den Schaden, falls doch einmal etwas durchrutscht.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Verlangsamen Security-Header meine Seite?<\/strong> Nein. Die Header sind nur wenige Bytes gro\u00df und haben praktisch keinen Einfluss auf die Ladezeit. Eine saubere CSP kann sogar helfen, unn\u00f6tige Drittanbieter-Ressourcen aufzudecken.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Brauche ich HSTS, wenn ich bereits auf HTTPS umleite?<\/strong> Ja, es lohnt sich. Die Weiterleitung sch\u00fctzt nur, wenn die erste unverschl\u00fcsselte Anfrage nicht abgefangen wird. HSTS schlie\u00dft genau diese L\u00fccke f\u00fcr wiederkehrende Besucher.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:html -->\n<style>\n\/* Web-Security-Check CTA, alle Regeln sind auf .itl-cta begrenzt *\/\n.itl-cta{--itl-ink:#0f1b3d;--itl-text:#3b4a6b;--itl-muted:#6b7a9c;--itl-line:#dbe5f6;--itl-blue:#2f5bff;--itl-blue-dark:#1f45d6;--itl-soft:#f4f8ff;--itl-ok:#0f8a5a;--itl-ok-bg:#e6f8f1;--itl-warn:#9a5b00;--itl-warn-bg:#fff3dc;--itl-bad:#c2262e;--itl-bad-bg:#fdecee;display:block;clear:both;width:100%;max-width:100%;margin:2.5em 0;padding:0;box-sizing:border-box;container-type:inline-size;isolation:isolate;font-family:\"Segoe UI\",system-ui,-apple-system,\"Helvetica Neue\",Arial,sans-serif;font-size:16px;line-height:1.5;font-weight:400;text-align:left;color:var(--itl-text);letter-spacing:normal;text-transform:none}\n.itl-cta *,.itl-cta *::before,.itl-cta *::after{box-sizing:border-box}\n.itl-cta .itl-cta__card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:34px 24px 26px;overflow:hidden;background:#fff linear-gradient(160deg,#ffffff 55%,#eef4ff 100%);border:1px solid var(--itl-line);border-radius:22px;box-shadow:0 18px 40px rgba(31,58,138,.10)}\n.itl-cta .itl-cta__card::before{content:\"\";position:absolute;left:0;top:0;right:0;height:6px;background:linear-gradient(90deg,#2f5bff,#12c2c9)}\n.itl-cta .itl-cta__eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 12px;padding:0;font-size:13px;line-height:1.2;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--itl-blue)}\n.itl-cta .itl-cta__eyebrow::before{content:\"\";width:34px;height:4px;border-radius:2px;background:linear-gradient(90deg,#2f5bff,#12c2c9)}\n.itl-cta .itl-cta__title{margin:0 0 12px;padding:0;font-size:30px;line-height:1.15;font-weight:800;letter-spacing:-.02em;text-transform:none;color:var(--itl-ink)}\n.itl-cta .itl-cta__title span{color:var(--itl-blue)}\n.itl-cta .itl-cta__lead{margin:0 0 18px;padding:0;font-size:17px;line-height:1.55;color:var(--itl-text)}\n.itl-cta .itl-cta__list{display:grid;gap:9px;margin:0 0 24px !important;padding:0 !important;list-style:none !important}\n.itl-cta .itl-cta__list li{display:flex;align-items:flex-start;gap:11px;margin:0 !important;padding:0 !important;list-style:none !important;font-size:16px;line-height:1.4;font-weight:600;color:var(--itl-ink)}\n.itl-cta .itl-cta__list li::before,.itl-cta .itl-cta__list li::marker{content:none}\n.itl-cta .itl-cta__tick{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:linear-gradient(135deg,#12c2c9,#19b87a)}\n.itl-cta .itl-cta__tick svg{display:block;width:12px;height:12px}\n.itl-cta .itl-cta__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}\n.itl-cta a.itl-cta__btn,.itl-cta a.itl-cta__btn:link,.itl-cta a.itl-cta__btn:visited{display:inline-flex;align-items:center;justify-content:center;gap:12px;max-width:100%;margin:0;padding:16px 28px;border:0 !important;border-radius:14px;background:linear-gradient(135deg,#3563ff,#1f45d6);box-shadow:0 12px 24px rgba(47,91,255,.32) !important;color:#fff !important;font-size:18px;line-height:1.2;font-weight:700;letter-spacing:0;text-align:center;text-decoration:none !important;text-transform:none;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}\n.itl-cta a.itl-cta__btn:hover,.itl-cta a.itl-cta__btn:focus{background:linear-gradient(135deg,#2f5bff,#1a3bbf);box-shadow:0 16px 30px rgba(47,91,255,.40) !important;color:#fff !important;text-decoration:none !important;transform:translateY(-2px)}\n.itl-cta a.itl-cta__btn:focus-visible{outline:3px solid #0f1b3d;outline-offset:3px}\n.itl-cta a.itl-cta__btn:active{transform:translateY(0)}\n.itl-cta .itl-cta__btn svg{flex:none;display:block;width:20px;height:20px;transition:transform .18s ease}\n.itl-cta a.itl-cta__btn:hover svg,.itl-cta a.itl-cta__btn:focus svg{transform:translateX(4px)}\n.itl-cta .itl-cta__note{display:flex;flex-wrap:wrap;gap:2px 16px;margin:0;padding:0;font-size:14px;line-height:1.45;font-weight:600;color:var(--itl-muted)}\n.itl-cta .itl-cta__note span{color:inherit;white-space:nowrap}\n.itl-cta .itl-cta__note span::before{content:\"\";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#12c2c9;vertical-align:middle}\n.itl-cta .itl-cta__report{position:relative;padding:18px;background:var(--itl-soft);border:1px solid var(--itl-line);border-radius:18px;box-shadow:0 12px 26px rgba(31,58,138,.08)}\n.itl-cta .itl-cta__rhead{display:flex;align-items:center;gap:16px;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--itl-line)}\n.itl-cta .itl-cta__ring{flex:none;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:conic-gradient(#19b87a 0 82%,#dbe5f6 82% 100%)}\n.itl-cta .itl-cta__ring span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;font-size:22px;line-height:1;font-weight:800;color:var(--itl-ink)}\n.itl-cta .itl-cta__rtitle{display:block;margin:0 0 2px;font-size:11px;line-height:1.2;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--itl-muted)}\n.itl-cta .itl-cta__rname{display:block;font-size:18px;line-height:1.25;font-weight:800;color:var(--itl-ink)}\n.itl-cta .itl-cta__rows{display:grid;gap:9px}\n.itl-cta .itl-cta__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#fff;border:1px solid var(--itl-line);border-radius:12px;font-size:14px;line-height:1.3;font-weight:600;color:var(--itl-ink)}\n.itl-cta .itl-cta__row code{display:block;margin:0;padding:0;line-height:1.3;background:none;border:0;font-family:\"SFMono-Regular\",Consolas,\"Liberation Mono\",Menlo,monospace;font-size:13px;font-weight:600;color:var(--itl-ink)}\n.itl-cta .itl-cta__chip{flex:none;padding:3px 10px;border-radius:999px;font-size:12px;line-height:1.3;font-weight:800}\n.itl-cta .itl-cta__chip--ok{background:var(--itl-ok-bg);color:var(--itl-ok)}\n.itl-cta .itl-cta__chip--warn{background:var(--itl-warn-bg);color:var(--itl-warn)}\n.itl-cta .itl-cta__chip--bad{background:var(--itl-bad-bg);color:var(--itl-bad)}\n.itl-cta .itl-cta__tag{position:absolute;right:14px;top:-12px;padding:4px 12px;border-radius:999px;background:#0f1b3d;font-size:12px;line-height:1.3;font-weight:700;color:#fff}\n@container (min-width:640px){\n.itl-cta .itl-cta__card{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:36px;padding:40px 40px 36px}\n.itl-cta .itl-cta__title{font-size:34px}\n}\n@container (max-width:420px){\n.itl-cta .itl-cta__card{padding:30px 18px 22px;border-radius:18px}\n.itl-cta .itl-cta__title{font-size:26px}\n.itl-cta a.itl-cta__btn{width:100%}\n.itl-cta .itl-cta__report{padding:14px}\n}\n@media (prefers-reduced-motion:reduce){\n.itl-cta a.itl-cta__btn,.itl-cta .itl-cta__btn svg{transition:none}\n.itl-cta a.itl-cta__btn:hover,.itl-cta a.itl-cta__btn:focus{transform:none}\n}\n<\/style>\n<aside class=\"itl-cta\" aria-label=\"Web-Security-Check\">\n<div class=\"itl-cta__card\">\n<div class=\"itl-cta__main\">\n<span class=\"itl-cta__eyebrow\">Web-Security-Check<\/span>\n<p class=\"itl-cta__title\">Wie sicher ist Ihre <span>Website<\/span> wirklich?<\/p>\n<p class=\"itl-cta__lead\">Lassen Sie Ihre Seite automatisch pr\u00fcfen und erhalten Sie einen verst\u00e4ndlichen Bericht mit konkreten Handlungsempfehlungen, auch ohne IT-Wissen.<\/p>\n<ul class=\"itl-cta__list\">\n<li><span class=\"itl-cta__tick\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 8.5l3.2 3.2L13 4.8\"\/><\/svg><\/span>Security-Header wie CSP und HSTS<\/li>\n<li><span class=\"itl-cta__tick\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 8.5l3.2 3.2L13 4.8\"\/><\/svg><\/span>SSL\/TLS, SPF, DKIM und DMARC<\/li>\n<li><span class=\"itl-cta__tick\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 8.5l3.2 3.2L13 4.8\"\/><\/svg><\/span>CMS, Plugins und bekannte Schwachstellen<\/li>\n<li><span class=\"itl-cta__tick\" aria-hidden=\"true\"><svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 8.5l3.2 3.2L13 4.8\"\/><\/svg><\/span>Barrierefreiheit nach WCAG<\/li>\n<\/ul>\n<div class=\"itl-cta__actions\">\n<a class=\"itl-cta__btn\" href=\"https:\/\/wwwschutz.de\/security-checks.html\">Website jetzt pr\u00fcfen<svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 10h12M11 5l5 5-5 5\"\/><\/svg><\/a>\n<p class=\"itl-cta__note\"><span>Ergebnis in ca. 15 Minuten<\/span><span>Einmalig ab 64 \u20ac zzgl. MwSt.<\/span><span>Kein Abo<\/span><\/p>\n<\/div>\n<\/div>\n<div class=\"itl-cta__report\" aria-hidden=\"true\">\n<span class=\"itl-cta__tag\">Beispielbericht<\/span>\n<div class=\"itl-cta__rhead\">\n<div class=\"itl-cta__ring\"><span>82<\/span><\/div>\n<div><span class=\"itl-cta__rtitle\">Sicherheitswert<\/span><span class=\"itl-cta__rname\">beispiel.de<\/span><\/div>\n<\/div>\n<div class=\"itl-cta__rows\">\n<div class=\"itl-cta__row\"><code>HSTS-Header<\/code><span class=\"itl-cta__chip itl-cta__chip--ok\">OK<\/span><\/div>\n<div class=\"itl-cta__row\"><code>CSP-Header<\/code><span class=\"itl-cta__chip itl-cta__chip--warn\">Pr\u00fcfen<\/span><\/div>\n<div class=\"itl-cta__row\"><code>SSL\/TLS-Zertifikat<\/code><span class=\"itl-cta__chip itl-cta__chip--ok\">OK<\/span><\/div>\n<div class=\"itl-cta__row\"><code>Altes Plugin<\/code><span class=\"itl-cta__chip itl-cta__chip--bad\">Kritisch<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/aside>\n<!-- \/wp:html -->\n\n<!-- wp:paragraph -->\n<p><strong>Kann eine falsche CSP meine Seite kaputt machen?<\/strong> Ja, deshalb der Weg \u00fcber Report-Only. So erkennen Sie Probleme, ohne dass Besucher etwas davon merken.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Muss ich das alles selbst konfigurieren?<\/strong> Nicht zwingend. Viele Hoster und CDN-Anbieter bieten Einstellungen f\u00fcr Security-Header an. Pr\u00fcfen Sie aber immer, was tats\u00e4chlich beim Besucher ankommt.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Security-Header geh\u00f6ren zu den wirkungsvollsten Sicherheitsma\u00dfnahmen im Verh\u00e4ltnis zum Aufwand. <strong>HSTS<\/strong> stellt sicher, dass Verbindungen zu Ihrer Seite konsequent verschl\u00fcsselt bleiben, und <strong>CSP<\/strong> nimmt Angreifern die M\u00f6glichkeit, eingeschleusten Code auszuf\u00fchren. Beide verlangen etwas Sorgfalt bei der Einf\u00fchrung, belohnen Sie daf\u00fcr aber mit einem deutlich robusteren Auftritt.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Beginnen Sie klein: Setzen Sie HSTS mit kurzer Laufzeit, starten Sie die CSP im Report-Only-Modus und steigern Sie die Strenge Schritt f\u00fcr Schritt. Nach einigen Tagen Beobachtung haben Sie eine Konfiguration, die zu Ihrer Seite passt und Besucher wie Betreiber sp\u00fcrbar besser sch\u00fctzt.<\/p>\n<!-- \/wp:paragraph -->","_links":{"self":[{"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/posts\/5661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/comments?post=5661"}],"version-history":[{"count":9,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/posts\/5661\/revisions"}],"predecessor-version":[{"id":5676,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/posts\/5661\/revisions\/5676"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/media\/5662"}],"wp:attachment":[{"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/media?parent=5661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/categories?post=5661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wwwschutz.de\/blog\/wp-json\/wp\/v2\/tags?post=5661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}