"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "vad-är-csrf", "hProperties": { "id": "vad-är-csrf" } }, "depth": 2, "value": "Vad är CSRF?" }, { "data": { "id": "hur-csrf-fungerar", "hProperties": { "id": "hur-csrf-fungerar" } }, "depth": 2, "value": "Hur CSRF fungerar" }, { "data": { "id": "webbläsarens-samma-origin-policy", "hProperties": { "id": "webbläsarens-samma-origin-policy" } }, "depth": 3, "value": "Webbläsarens samma-origin-policy" }, { "data": { "id": "automatisk-cookie-sändningsmekanism", "hProperties": { "id": "automatisk-cookie-sändningsmekanism" } }, "depth": 3, "value": "Automatisk cookie-sändningsmekanism" }, { "data": { "id": "csrf-attackssteg", "hProperties": { "id": "csrf-attackssteg" } }, "depth": 3, "value": "CSRF-attackssteg" }, { "data": { "id": "exempel-på-csrf-attack", "hProperties": { "id": "exempel-på-csrf-attack" } }, "depth": 2, "value": "Exempel på CSRF-attack" }, { "data": { "id": "vanliga-metoder-för-att-förhindra-csrf-attacker", "hProperties": { "id": "vanliga-metoder-för-att-förhindra-csrf-attacker" } }, "depth": 2, "value": "Vanliga metoder för att förhindra CSRF-attacker" }, { "data": { "id": "använda-csrf-tokens", "hProperties": { "id": "använda-csrf-tokens" } }, "depth": 3, "value": "Använda CSRF-tokens" }, { "data": { "id": "kontrollera-referer-headern", "hProperties": { "id": "kontrollera-referer-headern" } }, "depth": 3, "value": "Kontrollera Referer-headern" }, { "data": { "id": "använda-samesite-cookie-attribut", "hProperties": { "id": "använda-samesite-cookie-attribut" } }, "depth": 3, "value": "Använda SameSite cookie-attribut" }, { "data": { "id": "använda-skräddarsydda-förfrågningsrubriker", "hProperties": { "id": "använda-skräddarsydda-förfrågningsrubriker" } }, "depth": 3, "value": "Använda skräddarsydda förfrågningsrubriker" }, { "data": { "id": "dubbel-cookie-verifikation", "hProperties": { "id": "dubbel-cookie-verifikation" } }, "depth": 3, "value": "Dubbel cookie-verifikation" }, { "data": { "id": "använda-återsäkerhet-för-känsliga-operationer", "hProperties": { "id": "använda-återsäkerhet-för-känsliga-operationer" } }, "depth": 3, "value": "Använda återsäkerhet för känsliga operationer" }, { "data": { "id": "sammanfattning", "hProperties": { "id": "sammanfattning" } }, "depth": 2, "value": "Sammanfattning" }]; const readingTime = { "minutes": 6, "words": 1653, "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: "När vi arbetar med webbutveckling, särskilt med cookies, hör vi ofta fraser som \"denna inställning hjälper till att förebygga CSRF\". Men många människor har bara en vag uppfattning om vad \"CSRF\" verkligen betyder." }), "\n", _jsx(_components.p, { children: "Idag kommer vi att göra en djupdykning i CSRF (Cross-Site Request Forgery), en vanlig säkerhetsbrist på webben. Detta kommer att hjälpa oss att hantera CSRF-relaterade problem mer effektivt." }), "\n", _jsxs(_components.h2, { id: "vad-är-csrf", children: ["Vad är CSRF?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vad-är-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF (Cross-Site Request Forgery) är en typ av webbaserad attack där angripare lurar autentiserade användare att utföra oavsiktliga handlingar. Enkelt uttryckt är det \"hackare som låtsas vara användare för att genomföra obehöriga handlingar\"." }), "\n", _jsxs(_components.h2, { id: "hur-csrf-fungerar", children: ["Hur CSRF fungerar", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#hur-csrf-fungerar", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "För att förstå CSRF behöver vi greppa några nyckelbegrepp:" }), "\n", _jsxs(_components.h3, { id: "webbläsarens-samma-origin-policy", children: ["Webbläsarens samma-origin-policy", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#webbläsarens-samma-origin-policy", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Samma-origin-policy är en säkerhetsfunktion i webbläsare som begränsar hur ett dokument eller skript från en origin kan interagera med resurser från en annan origin." }), "\n", _jsxs(_components.p, { children: ["En origin består av ett protokoll (som HTTP eller HTTPS), domännamn och portnummer. Till exempel är ", _jsx(_components.code, { children: "https://example.com:443" }), " en origin, medan ", _jsx(_components.code, { children: "https://demo.com:80" }), " är en annan."] }), "\n", _jsx(_components.p, { children: "Samma-origin-policy begränsar dataåtkomst mellan sidor från olika origin, vilket innebär:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "JavaScript från en origin kan inte läsa DOM från en annan origin" }), "\n", _jsx(_components.li, { children: "JavaScript från en origin kan inte läsa Cookie, IndexedDB eller localStorage från en annan origin" }), "\n", _jsx(_components.li, { children: "JavaScript från en origin kan inte skicka AJAX-förfrågningar till en annan origin (såvida de inte använder CORS)" }), "\n"] }), "\n", _jsx(_components.p, { children: "Men för att upprätthålla webbens öppenhet och interoperabilitet (som att ladda resurser från CDN:er eller skicka förfrågningar till tredjeparts-API:er för loggning), begränsar inte samma-origin-policy nätverksförfrågningar över origins:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Sidor kan skicka GET- eller POST-förfrågningar till vilken som helst origin (som att ladda bilder eller skicka formulär)" }), "\n", _jsxs(_components.li, { children: ["Resurser från vilken som helst origin kan inkluderas (som ", _jsx(_components.code, { children: "\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["När användaren klickar på länken ", _jsx(_components.code, { children: "https://evil.com" }), " utan att logga ut från sitt bankkonto, eftersom de redan är inloggade på ", _jsx(_components.code, { children: "bank.com" }), ", har webbläsaren en giltig ", _jsx(_components.code, { children: "session_id" }), " cookie."] }), "\n", _jsxs(_components.p, { children: ["Efter att den skadliga sidan har laddats skickar den automatiskt det dolda formuläret och skickar en överföringsförfrågan till ", _jsx(_components.code, { children: "https://bank.com/transfer" }), "."] }), "\n", _jsxs(_components.p, { children: ["Användarens webbläsare bifogar automatiskt ", _jsx(_components.code, { children: "" }), " cookien till denna förfrågan. ", _jsx(_components.code, { children: "" }), " servern mottar förfrågan, verifierar att cookien är giltig och utför sedan denna obehöriga överföringsoperation."] }), "\n", _jsxs(_components.h2, { id: "vanliga-metoder-för-att-förhindra-csrf-attacker", children: ["Vanliga metoder för att förhindra CSRF-attacker", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vanliga-metoder-för-att-förhindra-csrf-attacker", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Här är flera vanliga CSRF-försvarsmetoder. Vi kommer att förklara i detalj principen för varje metod och hur den effektivt förhindrar CSRF-attacker:" }), "\n", _jsxs(_components.h3, { id: "använda-csrf-tokens", children: ["Använda CSRF-tokens", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#använda-csrf-tokens", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF-tokens är en av de vanligaste och mest effektiva metoderna för att försvara sig mot CSRF-attacker. Så här fungerar det:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Servern genererar en unik, oförutsägbar token för varje session." }), "\n", _jsx(_components.li, { children: "Denna token är inbäddad i alla formulär för känsliga operationer." }), "\n", _jsx(_components.li, { children: "När användaren skickar ett formulär verifierar servern tokenens giltighet." }), "\n"] }), "\n", _jsx(_components.p, { children: "Eftersom CSRF-token är ett unikt värde bundet till användarens session, och angriparen inte kan känna till eller gissa detta värde (eftersom det är olika för varje session), även om angriparen lurar användaren att skicka en förfrågan, kommer förfrågan att avvisas av servern på grund av avsaknaden av en giltig CSRF-token." }), "\n", _jsx(_components.p, { children: "Implementeringsexempel:" }), "\n", _jsx(_components.p, { children: "På serversidan (med Node.js och 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// Generera CSRF-token\nfunction generateCSRFToken() {\n return crypto.randomBytes(16).toString('hex');\n}\n\n// CSRF-skyddsmedel\napp.use((req, res, next) => {\n if (req.method === 'GET') {\n // Generera ny CSRF-token för varje GET-förfrågan\n req.session.csrfToken = generateCSRFToken();\n } else if (['POST', 'PUT', 'DELETE'].includes(req.method)) {\n // Kontrollera 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-tokenvalidering misslyckades' });\n }\n }\n next();\n});\n" }) }), "\n", _jsx(_components.p, { children: "I frontend JavaScript:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "// Skicka förfrågan med 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: "kontrollera-referer-headern", children: ["Kontrollera ", _jsx(_components.code, { children: "Referer" }), "-headern", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kontrollera-referer-headern", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Referer" }), "-headern innehåller URL:en för sidan som initierade förfrågan. Genom att kontrollera ", _jsx(_components.code, { children: "Referer" }), "-headern kan servern avgöra om förfrågan kommer från en legitim källa."] }), "\n", _jsxs(_components.p, { children: ["Eftersom CSRF-attacker vanligtvis kommer från olika domäner, kommer ", _jsx(_components.code, { children: "Referer" }), "-headern att visa angriparens domännamn. Genom att verifiera om ", _jsx(_components.code, { children: "Referer" }), " är det förväntade värdet kan förfrågningar från okända källor blockeras."] }), "\n", _jsx(_components.p, { children: "Det är dock värt att notera att denna metod inte är helt tillförlitlig, eftersom vissa webbläsare kanske inte skickar Referer-headern och användare kan inaktivera Referer-headern genom webbläsarinställningar eller pluginer." }), "\n", _jsx(_components.p, { children: "Implementeringsexempel:" }), "\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: 'Ogiltig referens' });\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "använda-samesite-cookie-attribut", children: ["Använda ", _jsx(_components.code, { children: "SameSite" }), " cookie-attribut", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#använda-samesite-cookie-attribut", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), " är ett cookie-attribut som används för att kontrollera om cookies skickas med cross-site-förfrågningar. Det har tre möjliga värden:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Strict" }), ": Cookies skickas bara i same-site-förfrågningar."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Lax" }), ": Cookies skickas i same-site-förfrågningar och toppnivånavigering."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "None" }), ": Cookies skickas i alla cross-site-förfrågningar (måste användas med ", _jsx(_components.code, { children: "Secure" }), "-attributet)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["När ", _jsx(_components.code, { children: "SameSite" }), " är inställt på ", _jsx(_components.code, { children: "Strict" }), " kan det helt förhindra att tredjepartswebbplatser skickar cookies och därmed effektivt förhindra CSRF-attacker.\nOm ", _jsx(_components.code, { children: "SameSite" }), " är inställt på ", _jsx(_components.code, { children: "Lax" }), " skyddar det känsliga operationer medan det tillåter vissa vanliga cross-site-use-cases (som att gå in på en webbplats från externa länkar)."] }), "\n", _jsx(_components.p, { children: "Implementeringsexempel:" }), "\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: "använda-skräddarsydda-förfrågningsrubriker", children: ["Använda skräddarsydda förfrågningsrubriker", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#använda-skräddarsydda-förfrågningsrubriker", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "För AJAX-förfrågningar kan skräddarsydda förfrågningsrubriker läggas till. På grund av begränsningarna i samma-origin-policy kan angripare inte ställa in skräddarsydda rubriker i cross-origin-förfrågningar. Servern kan kontrollera om denna skräddarsydda rubrik finns för att verifiera förfrågans legitimitet." }), "\n", _jsx(_components.p, { children: "Implementeringsexempel:" }), "\n", _jsx(_components.p, { children: "På frontend:" }), "\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: "På serversidan:" }), "\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 // Hantera AJAX-förfrågan\n } else {\n // Hantera icke-AJAX-förfrågan\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "dubbel-cookie-verifikation", children: ["Dubbel cookie-verifikation", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#dubbel-cookie-verifikation", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Dubbel cookie-verifikation är en effektiv CSRF-försvarsteknik. Dess kärnprincip är att servern genererar en slumpmässig token, sätter den som både en cookie och bäddar in den på sidan (vanligtvis som ett dolt formulärfält). När webbläsaren skickar en förfrågan inkluderas cookien automatiskt, medan sidans JavaScript skickar token som en förfrågningsparameter. Servern verifierar sedan om token i cookien matchar token i förfrågningsparametrarna." }), "\n", _jsx(_components.p, { children: "Även om angripare kan inkludera målsidans cookie i cross-site-förfrågningar kan de inte läsa eller ändra cookie-värdet, inte heller kan de komma åt eller ändra token-värdet på sidan. Genom att kräva att förfrågan inkluderar tokenvärden från både cookien och parametrarna säkerställer det att förfrågan kommer från en källa med behörighet att läsa cookien, vilket effektivt försvarar mot CSRF-attacker." }), "\n", _jsxs(_components.h3, { id: "använda-återsäkerhet-för-känsliga-operationer", children: ["Använda återsäkerhet för känsliga operationer", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#använda-återsäkerhet-för-känsliga-operationer", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "För särskilt känsliga operationer (som att byta lösenord eller göra stora överföringar) kan användare krävas att vara återsäkrade.\nDetta ger användare en ytterligare säkerhetskontrollpunkt. Även om en användare framgångsrikt initierar en CSRF-attack kan de inte passera återsäkerhetssteget." }), "\n", _jsx(_components.p, { children: "Implementeringsförslag:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Innan känsliga operationer utförs, omdirigera till en separat autentiseringssida." }), "\n", _jsx(_components.li, { children: "På denna sida, kräva att användaren anger sitt lösenord eller annan identitetsverifieringsinformation." }), "\n", _jsx(_components.li, { children: "Efter att verifieringen passerar generera en engångstoken och använd denna token i efterföljande känsliga operationer." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "sammanfattning", children: ["Sammanfattning", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sammanfattning", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Genom denna djupgående diskussion hoppas vi att du nu har en mer omfattande förståelse av CSRF-attacker.\nVi har inte bara lärt oss om hur CSRF fungerar utan också utforskat olika effektiva försvarsmetoder. Alla dessa metoder kan effektivt förbättra säkerheten för webbapplikationer." }), "\n", _jsx(_components.p, { children: "Hoppas denna kunskap kommer att hjälpa dig att bättre hantera CSRF-relaterade problem i din dagliga utveckling och bygga säkrare webbapplikationer." }), "\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."); }