"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "mikä-on-csrf", "hProperties": { "id": "mikä-on-csrf" } }, "depth": 2, "value": "Mikä on CSRF?" }, { "data": { "id": "miten-csrf-toimii", "hProperties": { "id": "miten-csrf-toimii" } }, "depth": 2, "value": "Miten CSRF toimii" }, { "data": { "id": "selaimen-samaperäisyyskäytäntö", "hProperties": { "id": "selaimen-samaperäisyyskäytäntö" } }, "depth": 3, "value": "Selaimen samaperäisyyskäytäntö" }, { "data": { "id": "automaattinen-evästeiden-lähetysmekanismi", "hProperties": { "id": "automaattinen-evästeiden-lähetysmekanismi" } }, "depth": 3, "value": "Automaattinen evästeiden lähetysmekanismi" }, { "data": { "id": "csrf-hyökkäyksen-vaiheet", "hProperties": { "id": "csrf-hyökkäyksen-vaiheet" } }, "depth": 3, "value": "CSRF-hyökkäyksen vaiheet" }, { "data": { "id": "csrf-hyökkäysesimerkki", "hProperties": { "id": "csrf-hyökkäysesimerkki" } }, "depth": 2, "value": "CSRF-hyökkäysesimerkki" }, { "data": { "id": "yleiset-menetelmät-csrf-hyökkäysten-estämiseen", "hProperties": { "id": "yleiset-menetelmät-csrf-hyökkäysten-estämiseen" } }, "depth": 2, "value": "Yleiset menetelmät CSRF-hyökkäysten estämiseen" }, { "data": { "id": "käyttämällä-csrf-tokeneita", "hProperties": { "id": "käyttämällä-csrf-tokeneita" } }, "depth": 3, "value": "Käyttämällä CSRF-tokeneita" }, { "data": { "id": "referer-otsikon-tarkistaminen", "hProperties": { "id": "referer-otsikon-tarkistaminen" } }, "depth": 3, "value": "Referer-otsikon tarkistaminen" }, { "data": { "id": "samesite-evästeominaisuuden-käyttö", "hProperties": { "id": "samesite-evästeominaisuuden-käyttö" } }, "depth": 3, "value": "SameSite-evästeominaisuuden käyttö" }, { "data": { "id": "mukautettujen-pyyntöotsikoiden-käyttö", "hProperties": { "id": "mukautettujen-pyyntöotsikoiden-käyttö" } }, "depth": 3, "value": "Mukautettujen pyyntöotsikoiden käyttö" }, { "data": { "id": "kaksoisevästevarmennus", "hProperties": { "id": "kaksoisevästevarmennus" } }, "depth": 3, "value": "Kaksoisevästevarmennus" }, { "data": { "id": "uudelleentodennusta-erityisen-herkille-toimenpiteille", "hProperties": { "id": "uudelleentodennusta-erityisen-herkille-toimenpiteille" } }, "depth": 3, "value": "Uudelleentodennusta erityisen herkille toimenpiteille" }, { "data": { "id": "yhteenveto", "hProperties": { "id": "yhteenveto" } }, "depth": 2, "value": "Yhteenveto" }]; const readingTime = { "minutes": 5, "words": 1354, "text": "5 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: "Kun työskentelemme verkkokehityksen parissa, erityisesti evästeiden kanssa, kuulemme usein lauseita kuten \"tämä asetus auttaa estämään CSRF.\" Kuitenkin monilla ihmisillä on vain epämääräinen käsitys siitä, mitä \"CSRF\" oikeasti tarkoittaa." }), "\n", _jsx(_components.p, { children: "Tänään sukellamme syvemmälle CSRF:ään (Cross-Site Request Forgery), yleiseen verkkoturvallisuusaukkoon. Tämä auttaa meitä käsittelemään CSRF:ään liittyviä ongelmia tehokkaammin." }), "\n", _jsxs(_components.h2, { id: "mikä-on-csrf", children: ["Mikä on CSRF?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mikä-on-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF (Cross-Site Request Forgery) on eräänlainen verkkohyökkäys, jossa hyökkääjät huijaavat todennettuja käyttäjiä suorittamaan tahattomia toimintoja. Yksinkertaisesti sanottuna se on \"hakkereita tekeytymässä käyttäjiksi suorittamaan luvattomia toimintoja\"." }), "\n", _jsxs(_components.h2, { id: "miten-csrf-toimii", children: ["Miten CSRF toimii", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#miten-csrf-toimii", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Voidaksemme ymmärtää CSRF:ää, meidän on käsitettävä muutama avainkäsitys:" }), "\n", _jsxs(_components.h3, { id: "selaimen-samaperäisyyskäytäntö", children: ["Selaimen samaperäisyyskäytäntö", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#selaimen-samaperäisyyskäytäntö", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Samaperäisyyskäytäntö on selainten turvaominaisuus, joka rajoittaa, kuinka dokumentti tai skripti yhdestä alkuperästä voi olla vuorovaikutuksessa toisen alkuperän resurssien kanssa." }), "\n", _jsxs(_components.p, { children: ["Alkuperä koostuu protokollasta (kuten HTTP tai HTTPS), verkkotunnuksen nimestä ja porttinumerosta. Esimerkiksi ", _jsx(_components.code, { children: "https://example.com:443" }), " on yksi alkuperä, kun taas ", _jsx(_components.code, { children: "https://demo.com:80" }), " on toinen."] }), "\n", _jsx(_components.p, { children: "Samaperäisyyskäytäntö rajoittaa tiedon saatavuutta eri alkuperien välillä, mikä tarkoittaa:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "JavaScript yhdestä alkuperästä ei voi lukea toisen alkuperän DOM:a" }), "\n", _jsx(_components.li, { children: "JavaScript yhdestä alkuperästä ei voi lukea toisen alkuperän evästeitä, IndexedDB:tä tai paikallista tallennustilaa" }), "\n", _jsx(_components.li, { children: "JavaScript yhdestä alkuperästä ei voi lähettää AJAX-pyyntöjä toisen alkuperään (ellei käytetä CORS)" }), "\n"] }), "\n", _jsx(_components.p, { children: "Kuitenkin verkkoyhteyksien avoimuuden ja yhteentoimivuuden ylläpitämiseksi (kuten resurssien lataaminen CDN:istä tai pyyntöjen lähettäminen kolmannen osapuolen API:hin lokitusta varten) samaperäisyyskäytäntö ei rajoita alkuperien välisiä verkkopyyntöjä:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Sivut voivat lähettää GET- tai POST-pyyntöjä mihin tahansa alkuperään (kuten kuvien lataaminen tai lomakkeiden lähettäminen)" }), "\n", _jsxs(_components.li, { children: ["Resurssit mistä tahansa alkuperästä voidaan sisällyttää (kuten ", _jsx(_components.code, { children: "\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["Kun käyttäjä klikkaa ", _jsx(_components.code, { children: "https://evil.com" }), "-linkkiä ilman, että on kirjautunut ulos pankkitililtään, koska hän on jo kirjautunut ", _jsx(_components.code, { children: "bank.com" }), ":iin, selaimella on kelvollinen ", _jsx(_components.code, { children: "session_id" }), "-eväste."] }), "\n", _jsxs(_components.p, { children: ["Kun paha sivu latautuu, se lähettää automaattisesti piilotetun lomakkeen, lähettäen siirtopyynnön ", _jsx(_components.code, { children: "https://bank.com/transfer" }), "."] }), "\n", _jsxs(_components.p, { children: ["Käyttäjän selain liittää automaattisesti ", _jsx(_components.code, { children: "bank.com" }), ":in evästeen tähän pyyntöön. ", _jsx(_components.code, { children: "Bank.com" }), "-palvelin vastaanottaa pyynnön, varmentaa evästeen olevan kelvollinen ja suorittaa tämän luvattoman siirtotoimenpiteen."] }), "\n", _jsxs(_components.h2, { id: "yleiset-menetelmät-csrf-hyökkäysten-estämiseen", children: ["Yleiset menetelmät CSRF-hyökkäysten estämiseen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#yleiset-menetelmät-csrf-hyökkäysten-estämiseen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Tässä on joitakin yleisesti käytettyjä CSRF-puolustusmenetelmiä. Selitämme yksityiskohtaisesti kunkin menetelmän periaatteen ja miten se tehokkaasti estää CSRF-hyökkäyksiä:" }), "\n", _jsxs(_components.h3, { id: "käyttämällä-csrf-tokeneita", children: ["Käyttämällä CSRF-tokeneita", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#käyttämällä-csrf-tokeneita", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF-tokenit ovat yksi yleisimmistä ja tehokkaimmista metodeista puolustautua CSRF-hyökkäyksiä vastaan. Toimintamekanismi:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Palvelin luo ainutlaatuisen, arvaamattoman tokenin jokaiselle istunnolle." }), "\n", _jsx(_components.li, { children: "Tämä token upotetaan kaikkiin lomakkeisiin herkkiä toimenpiteitä varten." }), "\n", _jsx(_components.li, { children: "Kun käyttäjä lähettää lomakkeen, palvelin tarkistaa tokenin kelvollisuuden." }), "\n"] }), "\n", _jsx(_components.p, { children: "Koska CSRF-token on yksilöllinen arvo, joka on sidottu käyttäjän istuntoon, ja hyökkääjä ei voi tietää tai arvata tätä arvoa (koska se on erilainen jokaiselle istunnolle), vaikka hyökkääjä huijaisi käyttäjän lähettämään pyynnön, palvelin hylkää pyynnön, koska siinä ei ole kelvollista CSRF-tokenia." }), "\n", _jsx(_components.p, { children: "Toteutusesimerkki:" }), "\n", _jsx(_components.p, { children: "Palvelinpuolella (käyttäen Node.js:ää ja Expressiä):" }), "\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// Luo CSRF-token\nfunction generateCSRFToken() {\n return crypto.randomBytes(16).toString('hex');\n}\n\n// CSRF-suojauksen middleware\napp.use((req, res, next) => {\n if (req.method === 'GET') {\n // Luo uusi CSRF-token jokaiselle GET-pyynnölle\n req.session.csrfToken = generateCSRFToken();\n } else if (['POST', 'PUT', 'DELETE'].includes(req.method)) {\n // Tarkista 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-tokenin vahvistus epäonnistui' });\n }\n }\n next();\n});\n" }) }), "\n", _jsx(_components.p, { children: "Etupään JavaScriptissä:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "// Lähetä pyyntö CSRF-tokenin kanssa\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-otsikon-tarkistaminen", children: [_jsx(_components.code, { children: "Referer" }), "-otsikon tarkistaminen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#referer-otsikon-tarkistaminen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Referer" }), "-otsikko sisältää pyynnön aloitussivun URL-osoitteen. Tarkistamalla ", _jsx(_components.code, { children: "Referer" }), "-otsikon palvelin voi määrittää, tuleeko pyyntö lailliselta lähteeltä."] }), "\n", _jsxs(_components.p, { children: ["Koska CSRF-hyökkäykset tulevat yleensä eri verkkotunnuksista, ", _jsx(_components.code, { children: "Referer" }), "-otsikko näyttää hyökkääjän verkkotunnuksen nimen. Tarkistamalla, onko ", _jsx(_components.code, { children: "Referer" }), " odotettu arvo, voidaan estää tuntemattomista lähteistä tulevat pyynnöt."] }), "\n", _jsx(_components.p, { children: "On kuitenkin huomattava, että tämä menetelmä ei ole täysin luotettava, koska jotkut selaimet saattavat olla lähettämättä Referer-otsikkoa, ja käyttäjät voivat poistaa Referer-otsikon selaimen asetuksilla tai laajennuksilla." }), "\n", _jsx(_components.p, { children: "Toteutusesimerkki:" }), "\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: 'Virheellinen referer' });\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "samesite-evästeominaisuuden-käyttö", children: [_jsx(_components.code, { children: "SameSite" }), "-evästeominaisuuden käyttö", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#samesite-evästeominaisuuden-käyttö", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), " on evästeen ominaisuus, jota käytetään hallitsemaan, lähetetäänkö evästeitä alkuperien välisissä pyynnöissä. Sillä on kolme mahdollista arvoa:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Strict" }), ": Evästeitä lähetetään vain samaperäisissä pyynnöissä."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Lax" }), ": Evästeitä lähetetään samaperäisissä pyynnöissä ja ylimmän tason navigoinnissa."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "None" }), ": Evästeitä lähetetään kaikissa alkuperien välisissä pyynnöissä (on käytettävä Yhdessä ", _jsx(_components.code, { children: "Secure" }), "-ominaisuuden kanssa)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Kun ", _jsx(_components.code, { children: "SameSite" }), " on asetettu ", _jsx(_components.code, { children: "Strict" }), ":ksi, se voi täysin estää kolmannen osapuolen verkkosivustoja lähettämästä evästeitä, jolloin CSRF-hyökkäykset estetään tehokkaasti.\nJos ", _jsx(_components.code, { children: "SameSite" }), " on asetettu ", _jsx(_components.code, { children: "Lax" }), ":ksi, se suojaa herkkiä toimenpiteitä sallien kuitenkin joitakin tavallisia alkuperien välisiä käyttötapauksia (kuten verkkosivulle siirtymisen ulkoisista linkeistä)."] }), "\n", _jsx(_components.p, { children: "Toteutusesimerkki:" }), "\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: "mukautettujen-pyyntöotsikoiden-käyttö", children: ["Mukautettujen pyyntöotsikoiden käyttö", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mukautettujen-pyyntöotsikoiden-käyttö", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "AJAX-pyynnöissä voidaan lisätä mukautettuja pyyntöotsikoita. Samaperäisyyskäytännön rajoitusten vuoksi hyökkääjät eivät voi asettaa mukautettuja otsikoita alkuperien välisissä pyynnöissä. Palvelin voi tarkistaa tämän mukautetun otsikon olemassaolon varmistaakseen pyynnön laillisuuden." }), "\n", _jsx(_components.p, { children: "Toteutusesimerkki:" }), "\n", _jsx(_components.p, { children: "Etupäässä:" }), "\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: "Palvelinpuolella:" }), "\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 // Käsittele AJAX-pyyntö\n } else {\n // Käsittele ei-AJAX-pyyntö\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "kaksoisevästevarmennus", children: ["Kaksoisevästevarmennus", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kaksoisevästevarmennus", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Kaksoisevästevarmennus on tehokas CSRF-puolustustekniikka. Sen keskeinen periaate on, että palvelin luo satunnaisen tokenin, asettaa sen sekä evästeenä että upottaa sen sivulle (yleensä piilotettuna lomakekenttänä). Kun selain lähettää pyynnön, se liittää evästeen automaattisesti, kun taas sivun JavaScript lähettää tokenin pyyntöparametrina. Palvelin sitten vahvistaa, vastaako evästeessä oleva token pyyntöparametrin tokenia." }), "\n", _jsx(_components.p, { children: "Vaikka hyökkääjät voivat sisältää kohdesivuston evästeen alkuperien välisissä pyynnöissä, he eivät voi lukea tai muokata evästeen arvoa eikä päästä käsiksi tai muokata sivun tokenarvoa. Vaadittamalla, että pyyntö sisältää sekä evästeiden että parametrien tokenit, se varmistaa, että pyyntö tulee lähteestä, jolla on lupa lukea eväste, ja näin se puolustaa tehokkaasti CSRF-hyökkäyksiä vastaan." }), "\n", _jsxs(_components.h3, { id: "uudelleentodennusta-erityisen-herkille-toimenpiteille", children: ["Uudelleentodennusta erityisen herkille toimenpiteille", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#uudelleentodennusta-erityisen-herkille-toimenpiteille", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Erityisen herkille toimenpiteille (kuten salasanan vaihtaminen tai suurten siirtojen tekeminen) voidaan vaatia käyttäjän uudelleentodennus." }), "\n", _jsx(_components.p, { children: "Tämä antaa käyttäjille lisävarmistuksen turvallisuuspisteen. Vaikka käyttäjä onnistuisi aloittamaan CSRF-hyökkäyksen, hän ei voi ohittaa uudelleentodennusvaihetta." }), "\n", _jsx(_components.p, { children: "Toteutusehdotukset:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Ennen herkkien toimenpiteiden suorittamista, ohjaa erilliseen todennussivulle." }), "\n", _jsx(_components.li, { children: "Tällä sivulla edellytetään, että käyttäjä syöttää salasanansa tai muuta henkilöllisyyden vahvistustietoa." }), "\n", _jsx(_components.li, { children: "Kun varmistus onnistuu, luo kertakäyttöinen token ja käytä tätä tokenia seuraavissa herkissä toimenpiteissä." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "yhteenveto", children: ["Yhteenveto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#yhteenveto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Tämän syvällisen keskustelun avulla toivomme, että sinulla on nyt perusteellisempi ymmärrys CSRF-hyökkäyksistä.\nEmme ole ainoastaan oppineet, kuinka CSRF toimii, vaan myös tutkineet erilaisia tehokkaita puolustuskeinoja. Kaikki nämä menetelmät voivat tehokkaasti parantaa verkkosovellusten turvallisuutta." }), "\n", _jsx(_components.p, { children: "Toivomme, että tämä tieto auttaa sinua paremmin käsittelemään CSRF:ään liittyviä ongelmia päivittäisessä kehityksessäsi ja rakentamaan turvallisempia verkkosovelluksia." }), "\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."); }