"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "was-ist-csrf", "hProperties": { "id": "was-ist-csrf" } }, "depth": 2, "value": "Was ist CSRF?" }, { "data": { "id": "wie-funktioniert-csrf", "hProperties": { "id": "wie-funktioniert-csrf" } }, "depth": 2, "value": "Wie funktioniert CSRF" }, { "data": { "id": "gleicher-ursprung-politik-des-browsers", "hProperties": { "id": "gleicher-ursprung-politik-des-browsers" } }, "depth": 3, "value": "Gleicher-Ursprung-Politik des Browsers" }, { "data": { "id": "automatischer-cookie-sendemechanismus", "hProperties": { "id": "automatischer-cookie-sendemechanismus" } }, "depth": 3, "value": "Automatischer Cookie-Sendemechanismus" }, { "data": { "id": "csrf-angriffsschritte", "hProperties": { "id": "csrf-angriffsschritte" } }, "depth": 3, "value": "CSRF-Angriffsschritte" }, { "data": { "id": "beispiel-eines-csrf-angriffs", "hProperties": { "id": "beispiel-eines-csrf-angriffs" } }, "depth": 2, "value": "Beispiel eines CSRF-Angriffs" }, { "data": { "id": "häufige-methoden-zur-verhinderung-von-csrf-angriffen", "hProperties": { "id": "häufige-methoden-zur-verhinderung-von-csrf-angriffen" } }, "depth": 2, "value": "Häufige Methoden zur Verhinderung von CSRF-Angriffen" }, { "data": { "id": "verwendung-von-csrf-tokens", "hProperties": { "id": "verwendung-von-csrf-tokens" } }, "depth": 3, "value": "Verwendung von CSRF-Tokens" }, { "data": { "id": "referer-header-überprüfen", "hProperties": { "id": "referer-header-überprüfen" } }, "depth": 3, "value": "Referer-Header überprüfen" }, { "data": { "id": "verwenden-des-samesite-cookie-attributs", "hProperties": { "id": "verwenden-des-samesite-cookie-attributs" } }, "depth": 3, "value": "Verwenden des SameSite Cookie-Attributs" }, { "data": { "id": "verwenden-benutzerdefinierter-anforderungsheader", "hProperties": { "id": "verwenden-benutzerdefinierter-anforderungsheader" } }, "depth": 3, "value": "Verwenden benutzerdefinierter Anforderungsheader" }, { "data": { "id": "doppelte-cookie-überprüfung", "hProperties": { "id": "doppelte-cookie-überprüfung" } }, "depth": 3, "value": "Doppelte Cookie-Überprüfung" }, { "data": { "id": "verwendung-erneuter-authentifizierung-für-sensible-operationen", "hProperties": { "id": "verwendung-erneuter-authentifizierung-für-sensible-operationen" } }, "depth": 3, "value": "Verwendung erneuter Authentifizierung für sensible Operationen" }, { "data": { "id": "zusammenfassung", "hProperties": { "id": "zusammenfassung" } }, "depth": 2, "value": "Zusammenfassung" }]; const readingTime = { "minutes": 6, "words": 1732, "text": "6 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Beim Arbeiten in der Webentwicklung, insbesondere mit Cookies, hören wir oft Sätze wie \"diese Einstellung hilft, CSRF zu verhindern\". Viele Menschen haben jedoch nur eine vage Vorstellung davon, was \"CSRF\" wirklich bedeutet." }), "\n", _jsx(_components.p, { children: "Heute werden wir einen tiefen Einblick in CSRF (Cross-Site Request Forgery), einen häufigen Websicherheitsfehler, nehmen. Dies wird uns helfen, CSRF-bezogene Probleme effektiver zu handhaben." }), "\n", _jsxs(_components.h2, { id: "was-ist-csrf", children: ["Was ist CSRF?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#was-ist-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF (Cross-Site Request Forgery) ist eine Art von Webangriff, bei dem Angreifer authentifizierte Benutzer dazu bringen, unbeabsichtigte Aktionen auszuführen. Einfach gesagt: \"Hacker geben sich als Benutzer aus, um unautorisierte Aktionen durchzuführen\"." }), "\n", _jsxs(_components.h2, { id: "wie-funktioniert-csrf", children: ["Wie funktioniert CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wie-funktioniert-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Um CSRF zu verstehen, müssen wir einige Schlüsselkonzepte begreifen:" }), "\n", _jsxs(_components.h3, { id: "gleicher-ursprung-politik-des-browsers", children: ["Gleicher-Ursprung-Politik des Browsers", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gleicher-ursprung-politik-des-browsers", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Die Gleicher-Ursprung-Politik ist ein Sicherheitsmerkmal in Browsern, das einschränkt, wie ein Dokument oder Skript aus einem Ursprung mit Ressourcen aus einem anderen Ursprung interagieren kann." }), "\n", _jsxs(_components.p, { children: ["Ein Ursprung besteht aus einem Protokoll (wie HTTP oder HTTPS), einem Domainnamen und einer Portnummer. Zum Beispiel ist ", _jsx(_components.code, { children: "https://example.com:443" }), " ein Ursprung, während ", _jsx(_components.code, { children: "https://demo.com:80" }), " ein anderer ist."] }), "\n", _jsx(_components.p, { children: "Die Gleicher-Ursprung-Politik beschränkt den Datenzugriff zwischen Seiten von verschiedenen Ursprüngen, was bedeutet:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "JavaScript von einem Ursprung kann das DOM eines anderen Ursprungs nicht lesen" }), "\n", _jsx(_components.li, { children: "JavaScript von einem Ursprung kann die Cookies, IndexedDB oder den localStorage eines anderen Ursprungs nicht lesen" }), "\n", _jsx(_components.li, { children: "JavaScript von einem Ursprung kann keine AJAX-Anfragen an einen anderen Ursprung senden (es sei denn, CORS wird verwendet)" }), "\n"] }), "\n", _jsx(_components.p, { children: "Um jedoch die Offenheit und Interoperabilität des Webs aufrechtzuerhalten (wie das Laden von Ressourcen von CDNs oder das Senden von Anfragen an Drittanbieter-APIs zum Protokollieren), beschränkt die Gleicher-Ursprung-Politik nicht grenzüberschreitende Netzwerkzugriffe:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Seiten können GET- oder POST-Anfragen an jeden Ursprung senden (wie Bilder laden oder Formulare absenden)" }), "\n", _jsxs(_components.li, { children: ["Ressourcen aus jedem Ursprung können eingebunden werden (wie ", _jsx(_components.code, { children: "\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["Wenn der Benutzer den ", _jsx(_components.code, { children: "https://evil.com" }), " Link anklickt, ohne sich aus seinem Bankkonto abzumelden, da er bereits bei ", _jsx(_components.code, { children: "bank.com" }), " eingeloggt ist, hat der Browser ein gültiges ", _jsx(_components.code, { children: "session_id" }), " Cookie."] }), "\n", _jsxs(_components.p, { children: ["Nachdem die bösartige Seite geladen wurde, übermittelt sie das versteckte Formular automatisch und sendet eine Überweisungsanfrage an ", _jsx(_components.code, { children: "https://bank.com/transfer" }), "."] }), "\n", _jsxs(_components.p, { children: ["Der Browser des Benutzers fügt dieser Anfrage automatisch das ", _jsx(_components.code, { children: "bank.com" }), " Cookie hinzu. Der ", _jsx(_components.code, { children: "bank.com" }), " Server erhält die Anfrage, überprüft, ob das Cookie gültig ist, und führt dann diese unautorisierte Überweisungsoperation aus."] }), "\n", _jsxs(_components.h2, { id: "häufige-methoden-zur-verhinderung-von-csrf-angriffen", children: ["Häufige Methoden zur Verhinderung von CSRF-Angriffen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#häufige-methoden-zur-verhinderung-von-csrf-angriffen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Hier sind mehrere häufig verwendete CSRF-Abwehrmethoden. Wir werden das Prinzip jeder Methode im Detail erklären und wie sie CSRF-Angriffe wirksam verhindern:" }), "\n", _jsxs(_components.h3, { id: "verwendung-von-csrf-tokens", children: ["Verwendung von CSRF-Tokens", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verwendung-von-csrf-tokens", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF-Tokens sind eine der gebräuchlichsten und wirksamsten Methoden, um CSRF-Angriffe zu verteidigen. So funktioniert es:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Der Server generiert ein einzigartiges, unvorhersehbares Token für jede Sitzung." }), "\n", _jsx(_components.li, { children: "Dieses Token wird in alle Formulare für sensible Operationen eingebettet." }), "\n", _jsx(_components.li, { children: "Wenn der Benutzer ein Formular übermittelt, überprüft der Server die Gültigkeit des Tokens." }), "\n"] }), "\n", _jsx(_components.p, { children: "Da das CSRF-Token ein einzigartiger Wert ist, der mit der Benutzersitzung verknüpft ist, und der Angreifer diesen Wert nicht kennen oder erraten kann (da er für jede Sitzung unterschiedlich ist), wird die Anfrage, selbst wenn der Angreifer den Benutzer dazu bringt, eine Anfrage zu senden, von dem Server aufgrund des fehlenden gültigen CSRF-Tokens abgelehnt." }), "\n", _jsx(_components.p, { children: "Implementierungsbeispiel:" }), "\n", _jsx(_components.p, { children: "Auf der Serverseite (mit Node.js und Express):" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "const express = require('express');\nconst crypto = require('crypto');\nconst app = express();\n\n// CSRF-Token generieren\nfunction generateCSRFToken() {\n return crypto.randomBytes(16).toString('hex');\n}\n\n// CSRF-Schutz-Middleware\napp.use((req, res, next) => {\n if (req.method === 'GET') {\n // Neuen CSRF-Token für jede GET-Anfrage generieren\n req.session.csrfToken = generateCSRFToken();\n } else if (['POST', 'PUT', 'DELETE'].includes(req.method)) {\n // CSRF-Token überprüfen\n const submittedToken = req.body._csrf || req.headers['x-csrf-token'];\n if (submittedToken !== req.session.csrfToken) {\n return res.status(403).json({ error: 'CSRF-Token-Validierung fehlgeschlagen' });\n }\n }\n next();\n});\n" }) }), "\n", _jsx(_components.p, { children: "In Frontend JavaScript:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "// Anfrage mit CSRF-Token senden\nasync function sendRequestWithCSRFToken(url, method, data) {\n const csrfToken = document.querySelector('meta[name=\"csrf-token\"]').getAttribute('content');\n const response = await fetch(url, {\n method: method,\n headers: {\n 'Content-Type': 'application/json',\n 'X-CSRF-Token': csrfToken\n },\n body: JSON.stringify(data)\n });\n return response.json();\n}\n" }) }), "\n", _jsxs(_components.h3, { id: "referer-header-überprüfen", children: [_jsx(_components.code, { children: "Referer" }), "-Header überprüfen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#referer-header-überprüfen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Der ", _jsx(_components.code, { children: "Referer" }), "-Header enthält die URL der Seite, die die Anfrage initiiert hat. Indem der ", _jsx(_components.code, { children: "Referer" }), "-Header überprüft wird, kann der Server feststellen, ob die Anfrage aus einer legitimen Quelle stammt."] }), "\n", _jsxs(_components.p, { children: ["Da CSRF-Angriffe normalerweise von verschiedenen Domains kommen, wird der ", _jsx(_components.code, { children: "Referer" }), "-Header den Domainnamen des Angreifers anzeigen. Indem überprüft wird, ob der ", _jsx(_components.code, { children: "Referer" }), " der erwartete Wert ist, können Anfragen aus unbekannten Quellen blockiert werden."] }), "\n", _jsx(_components.p, { children: "Es ist jedoch zu beachten, dass diese Methode nicht vollständig zuverlässig ist, da einige Browser den Referer-Header möglicherweise nicht senden und Benutzer den Referer-Header über die Browser-Einstellungen oder Plugins deaktivieren können." }), "\n", _jsx(_components.p, { children: "Implementierungsbeispiel:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "function checkReferer(req) {\n const referer = req.get('Referer');\n return referer && referer.startsWith('https://yourwebsite.com');\n}\n\napp.use((req, res, next) => {\n if (['POST', 'PUT', 'DELETE'].includes(req.method) && !checkReferer(req)) {\n return res.status(403).json({ error: 'Ungültiger Referer' });\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "verwenden-des-samesite-cookie-attributs", children: ["Verwenden des ", _jsx(_components.code, { children: "SameSite" }), " Cookie-Attributs", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verwenden-des-samesite-cookie-attributs", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), " ist ein Cookie-Attribut, das verwendet wird, um zu steuern, ob Cookies mit plattformübergreifenden Anfragen gesendet werden. Es gibt drei mögliche Werte:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Strict" }), ": Cookies werden nur bei gleichseitigen Anfragen gesendet."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Lax" }), ": Cookies werden bei gleichseitigen Anfragen und in der obersten Navigationsebene gesendet."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "None" }), ": Cookies werden in allen plattformübergreifenden Anfragen gesendet (müssen mit dem ", _jsx(_components.code, { children: "Secure" }), "-Attribut verwendet werden)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Wenn ", _jsx(_components.code, { children: "SameSite" }), " auf ", _jsx(_components.code, { children: "Strict" }), " gesetzt ist, kann es vollständig verhindern, dass Drittanbieter-Websites Cookies senden, und so effektiv CSRF-Angriffe verhindern.\nWenn ", _jsx(_components.code, { children: "SameSite" }), " auf ", _jsx(_components.code, { children: "Lax" }), " gesetzt ist, schützt es sensible Operationen, während einige gemeinsame Cross-Site-Anwendungen (wie das Betreten einer Webseite von externen Links) erlaubt werden."] }), "\n", _jsx(_components.p, { children: "Implementierungsbeispiel:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "res.cookie('session_id', 'abc123', {\n httpOnly: true,\n secure: true,\n sameSite: 'strict'\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "verwenden-benutzerdefinierter-anforderungsheader", children: ["Verwenden benutzerdefinierter Anforderungsheader", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verwenden-benutzerdefinierter-anforderungsheader", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Für AJAX-Anfragen können benutzerdefinierte Anforderungsheader hinzugefügt werden. Aufgrund der Einschränkungen der Gleicher-Ursprung-Politik können Angreifer keine benutzerdefinierten Header in plattformübergreifenden Anfragen setzen. Der Server kann das Vorhandensein dieses benutzerdefinierten Headers überprüfen, um die Legitimität der Anfrage zu überprüfen." }), "\n", _jsx(_components.p, { children: "Implementierungsbeispiel:" }), "\n", _jsx(_components.p, { children: "Auf der Frontend-Seite:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "fetch('/api/data', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'X-Requested-With': 'XMLHttpRequest'\n },\n body: JSON.stringify(data)\n});\n" }) }), "\n", _jsx(_components.p, { children: "Auf der Serverseite:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "app.use((req, res, next) => {\n if (req.xhr || req.headers['x-requested-with'] === 'XMLHttpRequest') {\n // AJAX-Anfrage verarbeiten\n } else {\n // Nicht-AJAX-Anfrage verarbeiten\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "doppelte-cookie-überprüfung", children: ["Doppelte Cookie-Überprüfung", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#doppelte-cookie-überprüfung", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Die doppelte Cookie-Überprüfung ist eine effektive CSRF-Abwehrtechnik. Ihr Kernprinzip besteht darin, dass der Server ein zufälliges Token generiert, es sowohl als Cookie setzt als auch es in die Seite einbettet (normalerweise als verstecktes Formularfeld). Wenn der Browser eine Anfrage sendet, fügt er automatisch das Cookie hinzu, während das JavaScript der Seite das Token als Anforderungsparameter sendet. Der Server überprüft dann, ob das Token im Cookie mit dem Token in den Anfrageparametern übereinstimmt." }), "\n", _jsx(_components.p, { children: "Obwohl Angreifer das Cookie der Zielwebsite in plattformübergreifenden Anfragen einfügen können, können sie den Cookie-Wert weder lesen noch ändern, noch können sie auf den Token-Wert auf der Seite zugreifen oder ihn ändern. Indem gefordert wird, dass die Anfrage sowohl Tokens vom Cookie als auch aus den Parametern enthält, wird sichergestellt, dass die Anfrage von einer Quelle stammt, die die Berechtigung hat, das Cookie zu lesen, und somit CSRF-Angriffe wirksam abwehrt." }), "\n", _jsxs(_components.h3, { id: "verwendung-erneuter-authentifizierung-für-sensible-operationen", children: ["Verwendung erneuter Authentifizierung für sensible Operationen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verwendung-erneuter-authentifizierung-für-sensible-operationen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Für besonders sensible Operationen (wie das Ändern von Passwörtern oder das Tätigen großer Überweisungen) können Benutzer aufgefordert werden, sich erneut zu authentifizieren.\nDies bietet den Benutzern einen zusätzlichen Sicherheitsüberprüfungspunkt. Selbst wenn ein Benutzer erfolgreich einen CSRF-Angriff initiiert, kann er den Authentifizierungsschritt nicht passieren." }), "\n", _jsx(_components.p, { children: "Implementierungsvorschläge:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Vor der Durchführung sensibler Operationen auf eine separate Authentifizierungsseite umleiten." }), "\n", _jsx(_components.li, { children: "Auf dieser Seite den Benutzer auffordern, ihr Passwort oder andere Identitätsüberprüfungsinformationen einzugeben." }), "\n", _jsx(_components.li, { children: "Nach erfolgreicher Überprüfung einen Einmaltoken generieren und dieses Token in nachfolgenden sensiblen Operationen verwenden." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "zusammenfassung", children: ["Zusammenfassung", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#zusammenfassung", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Durch diese eingehende Diskussion hoffen wir, dass du nun ein umfassenderes Verständnis von CSRF-Angriffen hast.\nWir haben nicht nur gelernt, wie CSRF funktioniert, sondern auch verschiedene wirksame Abwehrmaßnahmen erkundet. All diese Methoden können die Sicherheit von Webanwendungen effektiv erhöhen." }), "\n", _jsx(_components.p, { children: "Wir hoffen, dass dieses Wissen dir hilft, CSRF-bezogene Probleme in deiner täglichen Entwicklung besser zu lösen und sicherere Webanwendungen zu erstellen." }), "\n", _jsx(LogtoCloudButton, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }