"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "co-to-jest-csrf", "hProperties": { "id": "co-to-jest-csrf" } }, "depth": 2, "value": "Co to jest CSRF?" }, { "data": { "id": "jak-działa-csrf", "hProperties": { "id": "jak-działa-csrf" } }, "depth": 2, "value": "Jak działa CSRF" }, { "data": { "id": "polityka-tej-samej-domeny-przeglądarki", "hProperties": { "id": "polityka-tej-samej-domeny-przeglądarki" } }, "depth": 3, "value": "Polityka tej samej domeny przeglądarki" }, { "data": { "id": "mechanizm-automatycznego-wysyłania-ciasteczek", "hProperties": { "id": "mechanizm-automatycznego-wysyłania-ciasteczek" } }, "depth": 3, "value": "Mechanizm automatycznego wysyłania ciasteczek" }, { "data": { "id": "kroki-ataku-csrf", "hProperties": { "id": "kroki-ataku-csrf" } }, "depth": 3, "value": "Kroki ataku CSRF" }, { "data": { "id": "przykład-ataku-csrf", "hProperties": { "id": "przykład-ataku-csrf" } }, "depth": 2, "value": "Przykład ataku CSRF" }, { "data": { "id": "wspólne-metody-zapobiegania-atakom-csrf", "hProperties": { "id": "wspólne-metody-zapobiegania-atakom-csrf" } }, "depth": 2, "value": "Wspólne metody zapobiegania atakom CSRF" }, { "data": { "id": "korzystanie-z-tokenów-csrf", "hProperties": { "id": "korzystanie-z-tokenów-csrf" } }, "depth": 3, "value": "Korzystanie z tokenów CSRF" }, { "data": { "id": "sprawdzanie-nagłówka-referer", "hProperties": { "id": "sprawdzanie-nagłówka-referer" } }, "depth": 3, "value": "Sprawdzanie nagłówka Referer" }, { "data": { "id": "korzystanie-z-atrybutu-cookie-samesite", "hProperties": { "id": "korzystanie-z-atrybutu-cookie-samesite" } }, "depth": 3, "value": "Korzystanie z atrybutu cookie SameSite" }, { "data": { "id": "korzystanie-z-niestandardowych-nagłówków-żądań", "hProperties": { "id": "korzystanie-z-niestandardowych-nagłówków-żądań" } }, "depth": 3, "value": "Korzystanie z niestandardowych nagłówków żądań" }, { "data": { "id": "podwójna-weryfikacja-ciasteczek", "hProperties": { "id": "podwójna-weryfikacja-ciasteczek" } }, "depth": 3, "value": "Podwójna weryfikacja ciasteczek" }, { "data": { "id": "korzystanie-z-ponownego-uwierzytelnienia-dla-wrażliwych-operacji", "hProperties": { "id": "korzystanie-z-ponownego-uwierzytelnienia-dla-wrażliwych-operacji" } }, "depth": 3, "value": "Korzystanie z ponownego uwierzytelnienia dla wrażliwych operacji" }, { "data": { "id": "podsumowanie", "hProperties": { "id": "podsumowanie" } }, "depth": 2, "value": "Podsumowanie" }]; const readingTime = { "minutes": 5, "words": 1598, "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: "Podczas pracy nad tworzeniem stron internetowych, zwłaszcza z ciasteczkami, często słyszymy takie frazy jak „to ustawienie pomaga zapobiegać CSRF”. Jednak wiele osób ma tylko mgliste pojęcie, co naprawdę oznacza „CSRF”." }), "\n", _jsx(_components.p, { children: "Dzisiaj zagłębimy się w CSRF (Cross-Site Request Forgery), powszechną lukę w zabezpieczeniach sieciowych. To pomoże nam skuteczniej radzić sobie z problemami związanymi z CSRF." }), "\n", _jsxs(_components.h2, { id: "co-to-jest-csrf", children: ["Co to jest CSRF?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#co-to-jest-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF (Cross-Site Request Forgery) to rodzaj ataku sieciowego, w którym atakujący oszukują uwierzytelnionych użytkowników, aby wykonywali niezamierzone działania. W prostych słowach, to „hakerzy udający użytkowników, aby przeprowadzać nieautoryzowane działania”." }), "\n", _jsxs(_components.h2, { id: "jak-działa-csrf", children: ["Jak działa CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#jak-działa-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Aby zrozumieć CSRF, musimy pojąć kilka kluczowych pojęć:" }), "\n", _jsxs(_components.h3, { id: "polityka-tej-samej-domeny-przeglądarki", children: ["Polityka tej samej domeny przeglądarki", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#polityka-tej-samej-domeny-przeglądarki", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Polityka tej samej domeny to funkcja bezpieczeństwa w przeglądarkach, która ogranicza, w jaki sposób dokument lub skrypt z jednego pochodzenia może wchodzić w interakcję z zasobami z innego pochodzenia." }), "\n", _jsxs(_components.p, { children: ["Pochodzenie składa się z protokołu (takiego jak HTTP lub HTTPS), nazwy domeny i numeru portu. Na przykład ", _jsx(_components.code, { children: "https://example.com:443" }), " to jedno pochodzenie, podczas gdy ", _jsx(_components.code, { children: "https://demo.com:80" }), " to inne."] }), "\n", _jsx(_components.p, { children: "Polityka tej samej domeny ogranicza dostęp do danych między stronami z różnych pochodzeń, co oznacza:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "JavaScript z jednego pochodzenia nie może odczytać DOM innego pochodzenia" }), "\n", _jsx(_components.li, { children: "JavaScript z jednego pochodzenia nie może odczytać ciasteczka, IndexedDB ani localStorage innego pochodzenia" }), "\n", _jsx(_components.li, { children: "JavaScript z jednego pochodzenia nie może wysłać żądań AJAX do innego pochodzenia (chyba że używa CORS)" }), "\n"] }), "\n", _jsx(_components.p, { children: "Jednakże, aby utrzymać otwartość i interoperacyjność Internetu (jak ładowanie zasobów z CDNs lub wysyłanie żądań do zewnętrznych API do logowania), polityka tej samej domeny nie ogranicza żądań sieciowych między różnymi pochodzeniami:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Strony mogą wysyłać żądania GET lub POST do dowolnego pochodzenia (jak ładowanie obrazów czy wysyłanie formularzy)" }), "\n", _jsxs(_components.li, { children: ["Zasoby z dowolnego pochodzenia mogą być dołączane (jak ", _jsx(_components.code, { children: "\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["Gdy użytkownik kliknie link ", _jsx(_components.code, { children: "https://evil.com" }), " bez wylogowania się ze swojego konta bankowego, ponieważ jest już zalogowany do ", _jsx(_components.code, { children: "bank.com" }), ", przeglądarka ma ważne ciasteczko ", _jsx(_components.code, { children: "session_id" }), "."] }), "\n", _jsxs(_components.p, { children: ["Po załadowaniu złośliwej strony automatycznie wysyła ona ukryty formularz, wysyłając żądanie o przelew do ", _jsx(_components.code, { children: "https://bank.com/transfer" }), "."] }), "\n", _jsxs(_components.p, { children: ["Przeglądarka użytkownika automatycznie dołącza ciasteczko ", _jsx(_components.code, { children: "bank.com" }), " do tego żądania. Serwer ", _jsx(_components.code, { children: "bank.com" }), " odbiera żądanie, weryfikuje, że ciasteczko jest ważne, a następnie wykonuje tę nieautoryzowaną operację przelewu."] }), "\n", _jsxs(_components.h2, { id: "wspólne-metody-zapobiegania-atakom-csrf", children: ["Wspólne metody zapobiegania atakom CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wspólne-metody-zapobiegania-atakom-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Oto kilka powszechnie używanych metod obrony przed CSRF. Wyjaśnimy szczegółowo zasadę każdej metody i jak skutecznie zapobiega ona atakom CSRF:" }), "\n", _jsxs(_components.h3, { id: "korzystanie-z-tokenów-csrf", children: ["Korzystanie z tokenów CSRF", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#korzystanie-z-tokenów-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Tokeny CSRF są jednym z najczęściej stosowanych i skutecznych sposobów obrony przed atakami CSRF. Oto jak to działa:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Serwer generuje unikalny, nieprzewidywalny token dla każdej sesji." }), "\n", _jsx(_components.li, { children: "Ten token jest osadzany we wszystkich formularzach dla wrażliwych operacji." }), "\n", _jsx(_components.li, { children: "Gdy użytkownik przesyła formularz, serwer weryfikuje ważność tokenu." }), "\n"] }), "\n", _jsx(_components.p, { children: "Ponieważ token CSRF jest unikalną wartością związaną z sesją użytkownika, a atakujący nie może znać ani zgadnąć tej wartości (ponieważ jest inna dla każdej sesji), nawet jeśli atakujący oszuka użytkownika, aby wysłał żądanie, serwer odrzuci je z powodu braku ważnego tokenu CSRF." }), "\n", _jsx(_components.p, { children: "Przykład wdrożenia:" }), "\n", _jsx(_components.p, { children: "Na stronie serwera (używając Node.js i 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// Generowanie tokenu CSRF\nfunction generateCSRFToken() {\n return crypto.randomBytes(16).toString('hex');\n}\n\n// Middleware ochrony CSRF\napp.use((req, res, next) => {\n if (req.method === 'GET') {\n // Generowanie nowego tokenu CSRF dla każdego żądania GET\n req.session.csrfToken = generateCSRFToken();\n } else if (['POST', 'PUT', 'DELETE'].includes(req.method)) {\n // Sprawdzenie tokenu CSRF\n const submittedToken = req.body._csrf || req.headers['x-csrf-token'];\n if (submittedToken !== req.session.csrfToken) {\n return res.status(403).json({ error: 'Niepowodzenie weryfikacji tokenu CSRF' });\n }\n }\n next();\n});\n" }) }), "\n", _jsx(_components.p, { children: "W JavaScript na frontendzie:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "// Wysyłanie żądania z tokenem CSRF\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: "sprawdzanie-nagłówka-referer", children: ["Sprawdzanie nagłówka ", _jsx(_components.code, { children: "Referer" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sprawdzanie-nagłówka-referer", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Nagłówek ", _jsx(_components.code, { children: "Referer" }), " zawiera URL strony, która zainicjowała żądanie. Poprzez sprawdzenie nagłówka ", _jsx(_components.code, { children: "Referer" }), ", serwer może określić, czy żądanie pochodzi z legalnego źródła."] }), "\n", _jsxs(_components.p, { children: ["Ponieważ ataki CSRF zwykle pochodzą z różnych domen, nagłówek ", _jsx(_components.code, { children: "Referer" }), " pokaże domenę atakującego. Poprzez weryfikację, czy ", _jsx(_components.code, { children: "Referer" }), " jest oczekiwaną wartością, można zablokować żądania z nieznanych źródeł."] }), "\n", _jsx(_components.p, { children: "Warto jednak zaznaczyć, że ta metoda nie jest całkowicie niezawodna, ponieważ niektóre przeglądarki mogą nie wysyłać nagłówka Referer, a użytkownicy mogą wyłączyć ten nagłówek przez ustawienia przeglądarki lub wtyczki." }), "\n", _jsx(_components.p, { children: "Przykład wdrożenia:" }), "\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: 'Nieprawidłowy referer' });\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "korzystanie-z-atrybutu-cookie-samesite", children: ["Korzystanie z atrybutu cookie ", _jsx(_components.code, { children: "SameSite" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#korzystanie-z-atrybutu-cookie-samesite", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), " to atrybut ciasteczka używany do kontrolowania, czy ciasteczka są wysyłane z żądaniami między różnymi stronami. Ma trzy możliwe wartości:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Strict" }), ": Ciasteczka są wysyłane tylko w żądaniach z tej samej strony."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Lax" }), ": Ciasteczka są wysyłane w żądaniach z tej samej strony i nawigacji na najwyższym poziomie."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "None" }), ": Ciasteczka są wysyłane we wszystkich żądaniach między różnymi stronami (musi być używane z atrybutem ", _jsx(_components.code, { children: "Secure" }), ")."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Gdy ", _jsx(_components.code, { children: "SameSite" }), " jest ustawione na ", _jsx(_components.code, { children: "Strict" }), ", może całkowicie zapobiec wysyłaniu ciasteczek przez strony trzecie, co skutecznie zapobiega atakom CSRF. Jeśli ", _jsx(_components.code, { children: "SameSite" }), " jest ustawione na ", _jsx(_components.code, { children: "Lax" }), ", chroni operacje wrażliwe, jednocześnie pozwalając na niektóre typowe przypadki użycia między różnymi stronami (jak wejście na stronę z zewnętrznych linków)."] }), "\n", _jsx(_components.p, { children: "Przykład wdrożenia:" }), "\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: "korzystanie-z-niestandardowych-nagłówków-żądań", children: ["Korzystanie z niestandardowych nagłówków żądań", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#korzystanie-z-niestandardowych-nagłówków-żądań", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Dla żądań AJAX mogą być dodane niestandardowe nagłówki żądań. Ze względu na ograniczenia polityki tej samej domeny, atakujący nie mogą ustawiać niestandardowych nagłówków w żądaniach między różnymi stronami. Serwer może sprawdzić obecność tego niestandardowego nagłówka, aby zweryfikować legalność żądania." }), "\n", _jsx(_components.p, { children: "Przykład wdrożenia:" }), "\n", _jsx(_components.p, { children: "Na froncie:" }), "\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: "Na stronie serwera:" }), "\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 // Obsługa żądania AJAX\n } else {\n // Obsługa żądania nie-AJAX\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "podwójna-weryfikacja-ciasteczek", children: ["Podwójna weryfikacja ciasteczek", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#podwójna-weryfikacja-ciasteczek", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Podwójna weryfikacja ciasteczek jest skuteczną techniką obrony przed CSRF. Jej główną zasadą jest to, że serwer generuje losowy token, ustawia go zarówno jako ciasteczko, jak i osadza na stronie (zazwyczaj jako ukryte pole formularza). Gdy przeglądarka wysyła żądanie, automatycznie dołącza ciasteczko, podczas gdy JavaScript z strony wysyła token jako parametr żądania. Serwer weryfikuje, czy token w ciasteczku pasuje do tokenu w parametrach żądania." }), "\n", _jsx(_components.p, { children: "Chociaż atakujący mogą dołączać ciasteczko strony docelowej w żądaniach między różnymi stronami, nie mogą odczytywać ani modyfikować wartości ciasteczka, ani uzyskać dostępu do wartości tokenu na stronie. Wymagając, aby żądanie zawierało tokeny zarówno w ciasteczku, jak i parametrach, zapewnia, że żądanie pochodzi z źródła, które ma uprawnienia do odczytu ciasteczka, co skutecznie broni przed atakami CSRF." }), "\n", _jsxs(_components.h3, { id: "korzystanie-z-ponownego-uwierzytelnienia-dla-wrażliwych-operacji", children: ["Korzystanie z ponownego uwierzytelnienia dla wrażliwych operacji", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#korzystanie-z-ponownego-uwierzytelnienia-dla-wrażliwych-operacji", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Dla szczególnie wrażliwych operacji (jak zmiana haseł czy wykonywanie dużych przelewów) można wymagać ponownego uwierzytelnienia użytkowników.\nTo zapewnia użytkownikom dodatkowy krok zabezpieczający. Nawet jeśli użytkownik z powodzeniem zainicjuje atak CSRF, nie może przejść kroku ponownego uwierzytelnienia." }), "\n", _jsx(_components.p, { children: "Sugestie implementacyjne:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Przed wykonaniem wrażliwych operacji przekierować na osobną stronę uwierzytelnienia." }), "\n", _jsx(_components.li, { children: "Na tej stronie wymagać od użytkownika wprowadzenia hasła lub innych informacji potwierdzających tożsamość." }), "\n", _jsx(_components.li, { children: "Po pomyślnym potwierdzeniu, generować jednorazowy token i używać tego tokenu w kolejnych wrażliwych operacjach." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "podsumowanie", children: ["Podsumowanie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#podsumowanie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Dzięki tej dogłębnej dyskusji mamy nadzieję, że teraz masz bardziej wszechstronne zrozumienie ataków CSRF.\nNie tylko dowiedzieliśmy się, jak działa CSRF, ale także poznaliśmy różne skuteczne środki obrony. Wszystkie te metody mogą skutecznie zwiększyć bezpieczeństwo aplikacji internetowych." }), "\n", _jsx(_components.p, { children: "Mamy nadzieję, że ta wiedza pomoże ci lepiej radzić sobie z problemami związanymi z CSRF w codziennym rozwoju i budować bardziej bezpieczne aplikacje internetowe." }), "\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."); }