"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "what-is-csrf", "hProperties": { "id": "what-is-csrf" } }, "depth": 2, "value": "What is CSRF?" }, { "data": { "id": "how-csrf-works", "hProperties": { "id": "how-csrf-works" } }, "depth": 2, "value": "How CSRF works" }, { "data": { "id": "browsers-same-origin-policy", "hProperties": { "id": "browsers-same-origin-policy" } }, "depth": 3, "value": "Browser's Same-Origin policy" }, { "data": { "id": "automatic-cookie-sending-mechanism", "hProperties": { "id": "automatic-cookie-sending-mechanism" } }, "depth": 3, "value": "Automatic cookie sending mechanism" }, { "data": { "id": "csrf-attack-steps", "hProperties": { "id": "csrf-attack-steps" } }, "depth": 3, "value": "CSRF attack steps" }, { "data": { "id": "csrf-attack-example", "hProperties": { "id": "csrf-attack-example" } }, "depth": 2, "value": "CSRF attack example" }, { "data": { "id": "common-methods-to-prevent-csrf-attacks", "hProperties": { "id": "common-methods-to-prevent-csrf-attacks" } }, "depth": 2, "value": "Common methods to prevent CSRF attacks" }, { "data": { "id": "using-csrf-tokens", "hProperties": { "id": "using-csrf-tokens" } }, "depth": 3, "value": "Using CSRF tokens" }, { "data": { "id": "checking-referer-header", "hProperties": { "id": "checking-referer-header" } }, "depth": 3, "value": "Checking Referer header" }, { "data": { "id": "using-samesite-cookie-attribute", "hProperties": { "id": "using-samesite-cookie-attribute" } }, "depth": 3, "value": "Using SameSite cookie attribute" }, { "data": { "id": "using-custom-request-headers", "hProperties": { "id": "using-custom-request-headers" } }, "depth": 3, "value": "Using custom request headers" }, { "data": { "id": "double-cookie-verification", "hProperties": { "id": "double-cookie-verification" } }, "depth": 3, "value": "Double cookie verification" }, { "data": { "id": "using-re-authentication-for-sensitive-operations", "hProperties": { "id": "using-re-authentication-for-sensitive-operations" } }, "depth": 3, "value": "Using re-authentication for sensitive operations" }, { "data": { "id": "summary", "hProperties": { "id": "summary" } }, "depth": 2, "value": "Summary" }]; const readingTime = { "minutes": 6, "words": 1778, "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: "When working on web development, especially with cookies, we often hear phrases like \"this setting helps prevent CSRF\". However, many people only have a vague idea of what \"CSRF\" really means." }), "\n", _jsx(_components.p, { children: "Today, we'll take a deep dive into CSRF (Cross-Site Request Forgery), a common web security flaw. This will help us handle CSRF-related issues more effectively." }), "\n", _jsxs(_components.h2, { id: "what-is-csrf", children: ["What is CSRF?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#what-is-csrf", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF (Cross-Site Request Forgery) is a type of web attack where attackers trick authenticated users into performing unintended actions. In simple terms, it's \"hackers pretending to be users to carry out unauthorized actions\"." }), "\n", _jsxs(_components.h2, { id: "how-csrf-works", children: ["How CSRF works", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#how-csrf-works", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "To understand CSRF, we need to grasp a few key concepts:" }), "\n", _jsxs(_components.h3, { id: "browsers-same-origin-policy", children: ["Browser's Same-Origin policy", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#browsers-same-origin-policy", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "The same-origin policy is a security feature in browsers that limits how a document or script from one origin can interact with resources from another origin." }), "\n", _jsxs(_components.p, { children: ["An origin consists of a protocol (like HTTP or HTTPS), domain name, and port number. For example, ", _jsx(_components.code, { children: "https://example.com:443" }), " is one origin, while ", _jsx(_components.code, { children: "https://demo.com:80" }), " is another."] }), "\n", _jsx(_components.p, { children: "The same-origin policy restricts data access between pages from different origins, meaning:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "JavaScript from one origin can't read the DOM of another origin" }), "\n", _jsx(_components.li, { children: "JavaScript from one origin can't read the Cookie, IndexedDB, or localStorage of another origin" }), "\n", _jsx(_components.li, { children: "JavaScript from one origin can't send AJAX requests to another origin (unless using CORS)" }), "\n"] }), "\n", _jsx(_components.p, { children: "However, to maintain the openness and interoperability of the Web (like loading resources from CDNs or sending requests to third-party APIs for logging), the same-origin policy doesn't restrict cross-origin network requests:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Pages can send GET or POST requests to any origin (like loading images or submitting forms)" }), "\n", _jsxs(_components.li, { children: ["Resources from any origin can be included (like ", _jsx(_components.code, { children: "\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["When the user clicks the ", _jsx(_components.code, { children: "https://evil.com" }), " link without logging out of their bank account, because they're already logged into ", _jsx(_components.code, { children: "bank.com" }), ", the browser has a valid ", _jsx(_components.code, { children: "session_id" }), " cookie."] }), "\n", _jsxs(_components.p, { children: ["After the evil page loads, it automatically submits the hidden form, sending a transfer request to ", _jsx(_components.code, { children: "https://bank.com/transfer" }), "."] }), "\n", _jsxs(_components.p, { children: ["The user's browser automatically attaches the ", _jsx(_components.code, { children: "bank.com" }), " cookie to this request. The ", _jsx(_components.code, { children: "bank.com" }), " server receives the request, verifies the cookie is valid, and then executes this unauthorized transfer operation."] }), "\n", _jsxs(_components.h2, { id: "common-methods-to-prevent-csrf-attacks", children: ["Common methods to prevent CSRF attacks", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#common-methods-to-prevent-csrf-attacks", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Here are several commonly used CSRF defense methods. We'll explain in detail the principle of each method and how it effectively prevents CSRF attacks:" }), "\n", _jsxs(_components.h3, { id: "using-csrf-tokens", children: ["Using CSRF tokens", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#using-csrf-tokens", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF tokens are one of the most common and effective methods to defend against CSRF attacks. Here's how it works:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "The server generates a unique, unpredictable token for each session." }), "\n", _jsx(_components.li, { children: "This token is embedded in all forms for sensitive operations." }), "\n", _jsx(_components.li, { children: "When the user submits a form, the server verifies the validity of the token." }), "\n"] }), "\n", _jsx(_components.p, { children: "Because the CSRF token is a unique value bound to the user's session, and the attacker can't know or guess this value (as it's different for each session), even if the attacker tricks the user into sending a request, the request will be rejected by the server due to the lack of a valid CSRF token." }), "\n", _jsx(_components.p, { children: "Implementation example:" }), "\n", _jsx(_components.p, { children: "On the server side (using Node.js and 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// Generate CSRF token\nfunction generateCSRFToken() {\n return crypto.randomBytes(16).toString('hex');\n}\n\n// CSRF protection middleware\napp.use((req, res, next) => {\n if (req.method === 'GET') {\n // Generate new CSRF token for each GET request\n req.session.csrfToken = generateCSRFToken();\n } else if (['POST', 'PUT', 'DELETE'].includes(req.method)) {\n // Check 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 token validation failed' });\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: "// Send request with 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: "checking-referer-header", children: ["Checking ", _jsx(_components.code, { children: "Referer" }), " header", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#checking-referer-header", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "Referer" }), " header contains the URL of the page that initiated the request. By checking the ", _jsx(_components.code, { children: "Referer" }), " header, the server can determine if the request comes from a legitimate source."] }), "\n", _jsxs(_components.p, { children: ["Since CSRF attacks usually come from different domains, the ", _jsx(_components.code, { children: "Referer" }), " header will show the attacker's domain name. By verifying whether the ", _jsx(_components.code, { children: "Referer" }), " is the expected value, requests from unknown sources can be blocked."] }), "\n", _jsx(_components.p, { children: "However, it's worth noting that this method is not entirely reliable, as some browsers might not send the Referer header, and users can disable the Referer header through browser settings or plugins." }), "\n", _jsx(_components.p, { children: "Implementation example:" }), "\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: 'Invalid referer' });\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "using-samesite-cookie-attribute", children: ["Using ", _jsx(_components.code, { children: "SameSite" }), " cookie attribute", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#using-samesite-cookie-attribute", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), " is a cookie attribute used to control whether cookies are sent with cross-site requests. It has three possible values:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Strict" }), ": Cookies are only sent in same-site requests."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Lax" }), ": Cookies are sent in same-site requests and top-level navigation."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "None" }), ": Cookies are sent in all cross-site requests (must be used with the ", _jsx(_components.code, { children: "Secure" }), " attribute)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["When ", _jsx(_components.code, { children: "SameSite" }), " is set to ", _jsx(_components.code, { children: "Strict" }), ", it can completely prevent third-party websites from sending cookies, thus effectively preventing CSRF attacks.\nIf ", _jsx(_components.code, { children: "SameSite" }), " is set to ", _jsx(_components.code, { children: "Lax" }), ", it protects sensitive operations while allowing some common cross-site use cases (like entering a website from external links)."] }), "\n", _jsx(_components.p, { children: "Implementation example:" }), "\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: "using-custom-request-headers", children: ["Using custom request headers", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#using-custom-request-headers", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "For AJAX requests, custom request headers can be added. Due to the restrictions of the same-origin policy, attackers cannot set custom headers in cross-origin requests. The server can check for the presence of this custom header to verify the legitimacy of the request." }), "\n", _jsx(_components.p, { children: "Implementation example:" }), "\n", _jsx(_components.p, { children: "On the 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: "On the server side:" }), "\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 // Handle AJAX request\n } else {\n // Handle non-AJAX request\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "double-cookie-verification", children: ["Double cookie verification", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#double-cookie-verification", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Double cookie verification is an effective CSRF defense technique. Its core principle is that the server generates a random token, sets it as both a cookie and embeds it in the page (usually as a hidden form field). When the browser sends a request, it automatically includes the cookie, while the page's JavaScript sends the token as a request parameter. The server then verifies if the token in the cookie matches the token in the request parameters." }), "\n", _jsx(_components.p, { children: "Although attackers can include the target website's cookie in cross-site requests, they cannot read or modify the cookie's value, nor can they access or modify the token value in the page. By requiring the request to include tokens from both the cookie and parameters, it ensures the request comes from a source with permission to read the cookie, thus effectively defending against CSRF attacks." }), "\n", _jsxs(_components.h3, { id: "using-re-authentication-for-sensitive-operations", children: ["Using re-authentication for sensitive operations", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#using-re-authentication-for-sensitive-operations", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "For particularly sensitive operations (like changing passwords or making large transfers), users can be required to re-authenticate.\nThis provides users with an additional security checkpoint. Even if a user successfully initiates a CSRF attack, they cannot pass the re-authentication step." }), "\n", _jsx(_components.p, { children: "Implementation suggestions:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Before performing sensitive operations, redirect to a separate authentication page." }), "\n", _jsx(_components.li, { children: "On this page, require the user to enter their password or other identity verification information." }), "\n", _jsx(_components.li, { children: "After verification passes, generate a one-time token and use this token in subsequent sensitive operations." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "summary", children: ["Summary", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#summary", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Through this in-depth discussion, we hope you now have a more comprehensive understanding of CSRF attacks.\nWe've not only learned about how CSRF works but also explored various effective defense measures. All these methods can effectively enhance the security of web applications." }), "\n", _jsx(_components.p, { children: "Hope this knowledge will help you better handle CSRF-related issues in your daily development and build more secure web applications." }), "\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."); }