"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "wat-is-csrf", "hProperties": { "id": "wat-is-csrf" } }, "depth": 2, "value": "Wat is CSRF?" }, { "data": { "id": "hoe-werkt-csrf", "hProperties": { "id": "hoe-werkt-csrf" } }, "depth": 2, "value": "Hoe werkt CSRF" }, { "data": { "id": "zelfde-oorsprongbeleid-van-de-browser", "hProperties": { "id": "zelfde-oorsprongbeleid-van-de-browser" } }, "depth": 3, "value": "Zelfde-oorsprongbeleid van de browser" }, { "data": { "id": "automatisch-cookies-verzenden-mechanisme", "hProperties": { "id": "automatisch-cookies-verzenden-mechanisme" } }, "depth": 3, "value": "Automatisch cookies verzenden mechanisme" }, { "data": { "id": "csrf-aanval-stappen", "hProperties": { "id": "csrf-aanval-stappen" } }, "depth": 3, "value": "CSRF-aanval stappen" }, { "data": { "id": "voorbeeld-van-een-csrf-aanval", "hProperties": { "id": "voorbeeld-van-een-csrf-aanval" } }, "depth": 2, "value": "Voorbeeld van een CSRF-aanval" }, { "data": { "id": "veelgebruikte-methoden-om-csrf-aanvallen-te-voorkomen", "hProperties": { "id": "veelgebruikte-methoden-om-csrf-aanvallen-te-voorkomen" } }, "depth": 2, "value": "Veelgebruikte methoden om CSRF-aanvallen te voorkomen" }, { "data": { "id": "gebruik-van-csrf-tokens", "hProperties": { "id": "gebruik-van-csrf-tokens" } }, "depth": 3, "value": "Gebruik van CSRF-tokens" }, { "data": { "id": "controle-van-referer-header", "hProperties": { "id": "controle-van-referer-header" } }, "depth": 3, "value": "Controle van Referer-header" }, { "data": { "id": "gebruik-van-de-samesite-cookie-attribuut", "hProperties": { "id": "gebruik-van-de-samesite-cookie-attribuut" } }, "depth": 3, "value": "Gebruik van de SameSite-cookie-attribuut" }, { "data": { "id": "gebruik-van-aangepaste-verzoekheaders", "hProperties": { "id": "gebruik-van-aangepaste-verzoekheaders" } }, "depth": 3, "value": "Gebruik van aangepaste verzoekheaders" }, { "data": { "id": "dubbele-cookie-verificatie", "hProperties": { "id": "dubbele-cookie-verificatie" } }, "depth": 3, "value": "Dubbele cookie verificatie" }, { "data": { "id": "gebruik-van-herauthenticatie-voor-gevoelige-handelingen", "hProperties": { "id": "gebruik-van-herauthenticatie-voor-gevoelige-handelingen" } }, "depth": 3, "value": "Gebruik van herauthenticatie voor gevoelige handelingen" }, { "data": { "id": "samenvatting", "hProperties": { "id": "samenvatting" } }, "depth": 2, "value": "Samenvatting" }]; const readingTime = { "minutes": 6, "words": 1831, "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: "Bij het werken aan webontwikkeling, vooral met cookies, horen we vaak zinnen zoals \"deze instelling helpt CSRF te voorkomen\". Veel mensen hebben echter alleen een vaag idee van wat \"CSRF\" echt betekent." }), "\n", _jsx(_components.p, { children: "Vandaag duiken we diep in CSRF (Cross-Site Request Forgery), een veelvoorkomende beveiligingsfout op het web. Dit zal ons helpen om CSRF-gerelateerde problemen effectiever aan te pakken." }), "\n", _jsxs(_components.h2, { id: "wat-is-csrf", children: ["Wat is CSRF?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wat-is-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF (Cross-Site Request Forgery) is een type webaanval waarbij aanvallers geauthenticeerde gebruikers misleiden om onbedoelde acties uit te voeren. In eenvoudige termen is het \"hackers die zich voordoen als gebruikers om ongeoorloofde acties uit te voeren\"." }), "\n", _jsxs(_components.h2, { id: "hoe-werkt-csrf", children: ["Hoe werkt CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#hoe-werkt-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Om CSRF te begrijpen, moeten we enkele belangrijke concepten begrijpen:" }), "\n", _jsxs(_components.h3, { id: "zelfde-oorsprongbeleid-van-de-browser", children: ["Zelfde-oorsprongbeleid van de browser", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#zelfde-oorsprongbeleid-van-de-browser", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Het zelfde-oorsprongbeleid is een beveiligingsfunctie in browsers die beperkt hoe een document of script van de ene oorsprong kan interageren met bronnen van een andere oorsprong." }), "\n", _jsxs(_components.p, { children: ["Een oorsprong bestaat uit een protocol (zoals HTTP of HTTPS), domeinnaam en poortnummer. Bijvoorbeeld, ", _jsx(_components.code, { children: "https://example.com:443" }), " is één oorsprong, terwijl ", _jsx(_components.code, { children: "https://demo.com:80" }), " een andere is."] }), "\n", _jsx(_components.p, { children: "Het zelfde-oorsprongbeleid beperkt de toegang tot gegevens tussen pagina's van verschillende oorsprongen, wat betekent:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "JavaScript van de ene oorsprong kan de DOM van een andere oorsprong niet lezen" }), "\n", _jsx(_components.li, { children: "JavaScript van de ene oorsprong kan de Cookie, IndexedDB of lokaal opgeslagen gegevens van een andere oorsprong niet lezen" }), "\n", _jsx(_components.li, { children: "JavaScript van de ene oorsprong kan geen AJAX-verzoeken naar een andere oorsprong sturen (tenzij CORS wordt gebruikt)" }), "\n"] }), "\n", _jsx(_components.p, { children: "Echter, om de openheid en interoperabiliteit van het web te behouden (zoals het laden van bronnen van CDNs of het verzenden van verzoeken naar derde-partij API's voor logging), beperkt het zelfde-oorsprongbeleid geen cross-origin netwerkverzoeken:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Pagina's kunnen GET- of POST-verzoeken naar elke oorsprong sturen (zoals het laden van afbeeldingen of het indienen van formulieren)" }), "\n", _jsxs(_components.li, { children: ["Bronnen van elke oorsprong kunnen worden opgenomen (zoals ", _jsx(_components.code, { children: "\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["Wanneer de gebruiker op de ", _jsx(_components.code, { children: "https://evil.com" }), " link klikt zonder uit te loggen van zijn bankrekening, omdat hij al ingelogd is op ", _jsx(_components.code, { children: "bank.com" }), ", heeft de browser een geldige ", _jsx(_components.code, { children: "session_id" }), " cookie."] }), "\n", _jsxs(_components.p, { children: ["Nadat de kwaadaardige pagina is geladen, dient deze automatisch het verborgen formulier in, waardoor een overboekingsverzoek naar ", _jsx(_components.code, { children: "https://bank.com/transfer" }), " wordt verzonden."] }), "\n", _jsxs(_components.p, { children: ["De browser van de gebruiker voegt de ", _jsx(_components.code, { children: "bank.com" }), " cookie automatisch toe aan dit verzoek. De server van ", _jsx(_components.code, { children: "bank.com" }), " ontvangt het verzoek, verifieert dat de cookie geldig is, en voert vervolgens deze ongeoorloofde overboekingshandeling uit."] }), "\n", _jsxs(_components.h2, { id: "veelgebruikte-methoden-om-csrf-aanvallen-te-voorkomen", children: ["Veelgebruikte methoden om CSRF-aanvallen te voorkomen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#veelgebruikte-methoden-om-csrf-aanvallen-te-voorkomen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Hier zijn verschillende veelgebruikte CSRF-verdedigingsmethoden. We leggen gedetailleerd het principe van elke methode uit en hoe deze effectief CSRF-aanvallen voorkomt:" }), "\n", _jsxs(_components.h3, { id: "gebruik-van-csrf-tokens", children: ["Gebruik van CSRF-tokens", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gebruik-van-csrf-tokens", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF-tokens zijn een van de meest voorkomende en effectieve methoden om CSRF-aanvallen te verdedigen. Hier is hoe het werkt:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "De server genereert een unieke, onvoorspelbare token voor elke sessie." }), "\n", _jsx(_components.li, { children: "Deze token wordt ingebed in alle formulieren voor gevoelige handelingen." }), "\n", _jsx(_components.li, { children: "Wanneer de gebruiker een formulier indient, verifieert de server de geldigheid van de token." }), "\n"] }), "\n", _jsx(_components.p, { children: "Omdat de CSRF-token een unieke waarde is die aan de sessie van de gebruiker is gebonden, en de aanvaller deze waarde niet kan kennen of raden (aangezien het anders is voor elke sessie), zelfs als de aanvaller de gebruiker misleidt in het verzenden van een verzoek, wordt het verzoek door de server afgewezen vanwege het ontbreken van een geldige CSRF-token." }), "\n", _jsx(_components.p, { children: "Implementatievoorbeeld:" }), "\n", _jsx(_components.p, { children: "Aan de serverzijde (met Node.js en 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// Genereer CSRF-token\nfunction generateCSRFToken() {\n return crypto.randomBytes(16).toString('hex');\n}\n\n// CSRF-beschermingsmiddleware\napp.use((req, res, next) => {\n if (req.method === 'GET') {\n // Genereer een nieuwe CSRF-token voor elk GET-verzoek\n req.session.csrfToken = generateCSRFToken();\n } else if (['POST', 'PUT', 'DELETE'].includes(req.method)) {\n // Controleer CSRF-token\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-tokenvalidatie mislukt' });\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: "// Verzoek verzenden met CSRF-token\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: "controle-van-referer-header", children: ["Controle van ", _jsx(_components.code, { children: "Referer" }), "-header", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#controle-van-referer-header", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["De ", _jsx(_components.code, { children: "Referer" }), "-header bevat de URL van de pagina die het verzoek heeft geïnitieerd. Door de ", _jsx(_components.code, { children: "Referer" }), "-header te controleren, kan de server bepalen of het verzoek van een legitieme bron komt."] }), "\n", _jsxs(_components.p, { children: ["Omdat CSRF-aanvallen meestal van verschillende domeinen komen, zal de 'Referer'-header de domeinnaam van de aanvaller weergeven. Door te controleren of de ", _jsx(_components.code, { children: "Referer" }), " de verwachte waarde is, kunnen verzoeken van onbekende bronnen worden geblokkeerd."] }), "\n", _jsx(_components.p, { children: "Het is echter vermeldenswaard dat deze methode niet volledig betrouwbaar is, aangezien sommige browsers de Referer-header mogelijk niet verzenden, en gebruikers de Referer-header kunnen uitschakelen via browserinstellingen of plugins." }), "\n", _jsx(_components.p, { children: "Implementatievoorbeeld:" }), "\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: 'Ongeldige referer' });\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "gebruik-van-de-samesite-cookie-attribuut", children: ["Gebruik van de ", _jsx(_components.code, { children: "SameSite" }), "-cookie-attribuut", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gebruik-van-de-samesite-cookie-attribuut", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), " is een cookie-attribuut dat wordt gebruikt om te regelen of cookies worden verzonden met cross-site verzoeken. Het heeft drie mogelijke waarden:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Strict" }), ": Cookies worden alleen verzonden in zelfde-site verzoeken."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Lax" }), ": Cookies worden verzonden in zelfde-site verzoeken en top-level navigatie."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "None" }), ": Cookies worden verzonden in alle cross-site verzoeken (moet worden gebruikt met het ", _jsx(_components.code, { children: "Secure" }), " attribuut)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Wanneer ", _jsx(_components.code, { children: "SameSite" }), " is ingesteld op ", _jsx(_components.code, { children: "Strict" }), ", kan het volledig voorkomen dat websites van derden cookies verzenden, wat effectief CSRF-aanvallen voorkomt.\nAls ", _jsx(_components.code, { children: "SameSite" }), " is ingesteld op ", _jsx(_components.code, { children: "Lax" }), ", beschermt het gevoelige handelingen terwijl het enkele veelvoorkomende cross-site gebruikssituaties toestaat (zoals een website vanuit externe links betreden)."] }), "\n", _jsx(_components.p, { children: "Implementatievoorbeeld:" }), "\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: "gebruik-van-aangepaste-verzoekheaders", children: ["Gebruik van aangepaste verzoekheaders", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gebruik-van-aangepaste-verzoekheaders", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Voor AJAX-verzoeken kunnen aangepaste verzoekheaders worden toegevoegd. Vanwege de beperkingen van het zelfde-oorsprongbeleid kunnen aanvallers geen aangepaste headers instellen in cross-origin verzoeken. De server kan controleren op de aanwezigheid van deze aangepaste header om de legitimiteit van het verzoek te verifiëren." }), "\n", _jsx(_components.p, { children: "Implementatievoorbeeld:" }), "\n", _jsx(_components.p, { children: "Aan de voorkant:" }), "\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: "Aan de serverzijde:" }), "\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 // Verwerk AJAX-verzoek\n } else {\n // Verwerk niet-AJAX-verzoek\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "dubbele-cookie-verificatie", children: ["Dubbele cookie verificatie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#dubbele-cookie-verificatie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Dubbele cookie verificatie is een effectieve CSRF-verdedigingstechniek. Het kernprincipe is dat de server een willekeurige token genereert, deze instelt als zowel een cookie als deze in de pagina inbedt (meestal als een verborgen formulierveld). Wanneer de browser een verzoek verzendt, voegt deze automatisch de cookie toe, terwijl de JavaScript van de pagina de token verzendt als een verzoekparameter. Vervolgens verifieert de server of de token in de cookie overeenkomt met de token in de verzoekparameters." }), "\n", _jsx(_components.p, { children: "Hoewel aanvallers de cookie van de doelwebsite kunnen opnemen in cross-site verzoeken, kunnen ze de waarde van de cookie niet lezen of wijzigen, noch kunnen ze toegang krijgen tot of de tokenwaarde in de pagina wijzigen. Door te vereisen dat het verzoek tokens bevat uit zowel de cookie als de parameters, wordt ervoor gezorgd dat het verzoek afkomstig is van een bron met toestemming om de cookie te lezen, waardoor effectief wordt verdedigd tegen CSRF-aanvallen." }), "\n", _jsxs(_components.h3, { id: "gebruik-van-herauthenticatie-voor-gevoelige-handelingen", children: ["Gebruik van herauthenticatie voor gevoelige handelingen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#gebruik-van-herauthenticatie-voor-gevoelige-handelingen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Voor bijzonder gevoelige handelingen (zoals het wijzigen van wachtwoorden of het uitvoeren van grote overboekingen) kan van gebruikers worden verlangd dat ze zich opnieuw authentiseren.\nDit biedt gebruikers een extra beveiligingscontrolepunt. Zelfs als een gebruiker met succes een CSRF-aanval uitvoert, kunnen ze de stap voor herauthenticatie niet passeren." }), "\n", _jsx(_components.p, { children: "Implementatievoorstellen:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Voordat gevoelige handelingen worden uitgevoerd, naar een aparte authenticatiepagina omleiden." }), "\n", _jsx(_components.li, { children: "Op deze pagina van de gebruiker vragen om zijn wachtwoord of andere identiteitsverificatie-informatie in te voeren." }), "\n", _jsx(_components.li, { children: "Na het succesvol passes van de verificatie een eenmalige token genereren en deze token in latere gevoelige handelingen gebruiken." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "samenvatting", children: ["Samenvatting", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#samenvatting", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Door deze diepgaande discussie hopen we dat je nu een meer uitgebreide begrip hebt van CSRF-aanvallen.\nWe hebben niet alleen geleerd hoe CSRF werkt, maar ook verschillende effectieve verdedigingsmaatregelen verkend. Al deze methoden kunnen de veiligheid van webapplicaties effectief verbeteren." }), "\n", _jsx(_components.p, { children: "We hopen dat deze kennis je zal helpen CSRF-gerelateerde problemen beter aan te pakken in je dagelijkse ontwikkeling en veiliger webapplicaties te bouwen." }), "\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."); }