"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "csrf란-무엇인가", "hProperties": { "id": "csrf란-무엇인가" } }, "depth": 2, "value": "CSRF란 무엇인가?" }, { "data": { "id": "csrf는-어떻게-작동하나", "hProperties": { "id": "csrf는-어떻게-작동하나" } }, "depth": 2, "value": "CSRF는 어떻게 작동하나" }, { "data": { "id": "브라우저의-동일-출처-정책", "hProperties": { "id": "브라우저의-동일-출처-정책" } }, "depth": 3, "value": "브라우저의 동일 출처 정책" }, { "data": { "id": "쿠키-자동-전송-메커니즘", "hProperties": { "id": "쿠키-자동-전송-메커니즘" } }, "depth": 3, "value": "쿠키 자동 전송 메커니즘" }, { "data": { "id": "csrf-공격-단계", "hProperties": { "id": "csrf-공격-단계" } }, "depth": 3, "value": "CSRF 공격 단계" }, { "data": { "id": "csrf-공격-예시", "hProperties": { "id": "csrf-공격-예시" } }, "depth": 2, "value": "CSRF 공격 예시" }, { "data": { "id": "csrf-공격을-방지하는-일반적인-방법", "hProperties": { "id": "csrf-공격을-방지하는-일반적인-방법" } }, "depth": 2, "value": "CSRF 공격을 방지하는 일반적인 방법" }, { "data": { "id": "csrf-토큰-사용", "hProperties": { "id": "csrf-토큰-사용" } }, "depth": 3, "value": "CSRF 토큰 사용" }, { "data": { "id": "referer-헤더-검사", "hProperties": { "id": "referer-헤더-검사" } }, "depth": 3, "value": "Referer 헤더 검사" }, { "data": { "id": "samesite-쿠키-속성-사용", "hProperties": { "id": "samesite-쿠키-속성-사용" } }, "depth": 3, "value": "SameSite 쿠키 속성 사용" }, { "data": { "id": "사용자-정의-요청-헤더-사용", "hProperties": { "id": "사용자-정의-요청-헤더-사용" } }, "depth": 3, "value": "사용자 정의 요청 헤더 사용" }, { "data": { "id": "이중-쿠키-검증", "hProperties": { "id": "이중-쿠키-검증" } }, "depth": 3, "value": "이중 쿠키 검증" }, { "data": { "id": "민감한-작업에-대해-재인증-사용", "hProperties": { "id": "민감한-작업에-대해-재인증-사용" } }, "depth": 3, "value": "민감한 작업에 대해 재인증 사용" }, { "data": { "id": "요약", "hProperties": { "id": "요약" } }, "depth": 2, "value": "요약" }]; const readingTime = { "minutes": 1, "words": 443, "text": "less than a minute 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", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "웹 개발, 특히 쿠키를 사용할 때 \"이 설정은 CSRF를 방지하는데 도움이 됩니다\"와 같은 문구를 자주 듣습니다. 그러나 많은 사람들은 \"CSRF\"가 실제로 무엇을 의미하는지에 대해 어렴풋이 알고 있을 뿐입니다." }), "\n", _jsx(_components.p, { children: "오늘 우리는 일반적인 웹 보안 결함인 CSRF (교차 사이트 요청 위조)에 대해 심도 있게 살펴볼 것입니다. 이를 통해 CSRF 관련 문제를 보다 효과적으로 처리할 수 있습니다." }), "\n", _jsxs(_components.h2, { id: "csrf란-무엇인가", children: ["CSRF란 무엇인가?", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#csrf란-무엇인가", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF(교차 사이트 요청 위조)는 공격자가 인증된 사용자를 속여 의도치 않은 행동을 하도록 만드는 웹 공격의 일종입니다. 간단히 말해서, \"해커들이 사용자인 척하여 무단 행동을 수행하는 것\"입니다." }), "\n", _jsxs(_components.h2, { id: "csrf는-어떻게-작동하나", children: ["CSRF는 어떻게 작동하나", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#csrf는-어떻게-작동하나", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF를 이해하려면 몇 가지 핵심 개념을 이해해야 합니다:" }), "\n", _jsxs(_components.h3, { id: "브라우저의-동일-출처-정책", children: ["브라우저의 동일 출처 정책", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#브라우저의-동일-출처-정책", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "동일 출처 정책은 하나의 출처에서 가져온 문서나 스크립트가 다른 출처의 리소스와 상호작용할 수 있는 방법을 제한하는 브라우저의 보안 기능입니다." }), "\n", _jsxs(_components.p, { children: ["출처는 프로토콜(예: HTTP 또는 HTTPS), 도메인 이름, 포트 번호로 구성됩니다. 예를 들어, ", _jsx(_components.code, { children: "https://example.com:443" }), "은 하나의 출처이고, ", _jsx(_components.code, { children: "https://demo.com:80" }), "은 다른 출처입니다."] }), "\n", _jsx(_components.p, { children: "동일 출처 정책은 서로 다른 출처의 페이지 간 데이터 접근을 제한합니다:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "한 출처의 자바스크립트가 다른 출처의 DOM을 읽을 수 없습니다." }), "\n", _jsx(_components.li, { children: "한 출처의 자바스크립트가 다른 출처의 쿠키, IndexedDB, 또는 localStorage를 읽을 수 없습니다." }), "\n", _jsx(_components.li, { children: "한 출처의 자바스크립트가 다른 출처로 AJAX 요청을 보낼 수 없습니다 (CORS를 사용하는 경우 제외)." }), "\n"] }), "\n", _jsx(_components.p, { children: "그러나 웹의 개방성 및 상호운용성을 유지하기 위해 동일 출처 정책은 교차 출처 네트워크 요청을 제한하지 않습니다:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "페이지는 어떤 출처든 GET 또는 POST 요청을 보낼 수 있습니다 (이미지 로딩이나 폼 제출 등)." }), "\n", _jsxs(_components.li, { children: ["어떤 출처든 리소스를 포함할 수 있습니다 (", _jsx(_components.code, { children: "\n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["사용자가 자신의 은행 계정에서 로그아웃하지 않고 ", _jsx(_components.code, { children: "https://evil.com" }), " 링크를 클릭했을 때, 이미 ", _jsx(_components.code, { children: "bank.com" }), "에 로그인되어 있으므로 브라우저에는 유효한 ", _jsx(_components.code, { children: "session_id" }), " 쿠키가 있습니다."] }), "\n", _jsxs(_components.p, { children: ["악성 페이지가 로드되고 나면, 숨겨진 양식을 자동으로 제출하여 ", _jsx(_components.code, { children: "https://bank.com/transfer" }), "로 송금 요청을 보냅니다."] }), "\n", _jsxs(_components.p, { children: ["사용자의 브라우저는 이 요청에 ", _jsx(_components.code, { children: "bank.com" }), " 쿠키를 자동으로 첨부합니다. ", _jsx(_components.code, { children: "bank.com" }), " 서버는 이 요청을 수신하고, 쿠키가 유효한지를 확인한 후 이 무단 전송 작업을 수행합니다."] }), "\n", _jsxs(_components.h2, { id: "csrf-공격을-방지하는-일반적인-방법", children: ["CSRF 공격을 방지하는 일반적인 방법", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#csrf-공격을-방지하는-일반적인-방법", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "여기 몇 가지 일반적으로 사용되는 CSRF 방어 방법이 있습니다. 각 방법의 원리와 CSRF 공격을 효과적으로 방지하는 방법을 자세히 설명합니다:" }), "\n", _jsxs(_components.h3, { id: "csrf-토큰-사용", children: ["CSRF 토큰 사용", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#csrf-토큰-사용", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "CSRF 토큰은 CSRF 공격에 대한 가장 일반적이고 효과적인 방어 방법 중 하나입니다. 작동 방식은 다음과 같습니다:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "서버가 각 세션에 대해 고유하고 예측할 수 없는 토큰을 생성합니다." }), "\n", _jsx(_components.li, { children: "이 토큰은 민감한 작업에 대한 모든 양식에 포함됩니다." }), "\n", _jsx(_components.li, { children: "사용자가 양식을 제출할 때, 서버는 토큰의 유효성을 확인합니다." }), "\n"] }), "\n", _jsx(_components.p, { children: "CSRF 토큰은 사용자 세션에 바인딩된 고유 값이며, 공격자는 이 값을 알거나 추측할 수 없습니다(각 세션마다 다름). 공격자가 사용자를 속여 요청을 보내도록 하더라도 유효한 CSRF 토큰이 없기 때문에 서버에 의해 요청이 거부됩니다." }), "\n", _jsx(_components.p, { children: "구현 예시:" }), "\n", _jsx(_components.p, { children: "서버 측(Node.js 및 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// CSRF 토큰 생성\nfunction generateCSRFToken() {\n return crypto.randomBytes(16).toString('hex');\n}\n\n// CSRF 보호 미들웨어\napp.use((req, res, next) => {\n if (req.method === 'GET') {\n // 각 GET 요청에 대해 새로운 CSRF 토큰 생성\n req.session.csrfToken = generateCSRFToken();\n } else if (['POST', 'PUT', 'DELETE'].includes(req.method)) {\n // 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: 'CSRF 토큰 유효성 검사 실패' });\n }\n }\n next();\n});\n" }) }), "\n", _jsx(_components.p, { children: "프론트엔드 JavaScript에서:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-javascript", children: "// 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: "referer-헤더-검사", children: [_jsx(_components.code, { children: "Referer" }), " 헤더 검사", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#referer-헤더-검사", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Referer" }), " 헤더에는 요청을 시작한 페이지의 URL이 포함됩니다. ", _jsx(_components.code, { children: "Referer" }), " 헤더를 검사함으로써 서버는 요청이 합법적인 출처에서 오는지 여부를 판단할 수 있습니다."] }), "\n", _jsxs(_components.p, { children: ["CSRF 공격은 보통 다른 도메인에서 발생하므로 ", _jsx(_components.code, { children: "Referer" }), " 헤더는 공격자의 도메인 이름을 표시합니다. ", _jsx(_components.code, { children: "Referer" }), "가 예상되는 값인지 확인함으로써 알 수 없는 출처로부터의 요청을 차단할 수 있습니다."] }), "\n", _jsxs(_components.p, { children: ["그러나 이 방법은 완전히 신뢰할 수는 없습니다. 일부 브라우저는 ", _jsx(_components.code, { children: "Referer" }), " 헤더를 보내지 않을 수 있으며, 사용자는 브라우저 설정이나 플러그인을 통해 ", _jsx(_components.code, { children: "Referer" }), " 헤더를 비활성화할 수 있습니다."] }), "\n", _jsx(_components.p, { children: "구현 예시:" }), "\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: '유효하지 않은 referer' });\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "samesite-쿠키-속성-사용", children: [_jsx(_components.code, { children: "SameSite" }), " 쿠키 속성 사용", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#samesite-쿠키-속성-사용", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), "는 쿠키가 교차 사이트 요청에 포함되는지 제어하는 쿠키 속성입니다. 세 가지 가능한 값이 있습니다:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Strict" }), ": 쿠키는 동일한 사이트 요청에서만 전송됩니다."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Lax" }), ": 쿠키는 동일한 사이트 요청과 최상위 탐색에서 전송됩니다."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "None" }), ": 쿠키는 모든 교차 사이트 요청에서 전송됩니다 (반드시 ", _jsx(_components.code, { children: "Secure" }), " 속성과 함께 사용해야 함)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "SameSite" }), "를 ", _jsx(_components.code, { children: "Strict" }), "로 설정하면 제삼의 웹사이트가 쿠키를 보내는 것을 완전히 방지할 수 있어 CSRF 공격을 효과적으로 방지할 수 있습니다.\n", _jsx(_components.code, { children: "SameSite" }), "를 ", _jsx(_components.code, { children: "Lax" }), "로 설정하면 외부 링크에서 웹사이트에 들어가는 것과 같은 일반적인 교차 사이트 사용 사례를 허용하면서 민감한 작업을 보호할 수 있습니다."] }), "\n", _jsx(_components.p, { children: "구현 예시:" }), "\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: "사용자-정의-요청-헤더-사용", children: ["사용자 정의 요청 헤더 사용", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#사용자-정의-요청-헤더-사용", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "AJAX 요청의 경우 사용자 정의 요청 헤더를 추가할 수 있습니다. 동일 출처 정책에 제한되어 공격자는 교차 출처 요청에서 사용자 정의 헤더를 설정할 수 없습니다. 서버는 이 사용자 정의 헤더의 존재 여부를 확인하여 요청의 정당성을 검증할 수 있습니다." }), "\n", _jsx(_components.p, { children: "구현 예시:" }), "\n", _jsx(_components.p, { children: "프론트엔드에서:" }), "\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: "서버 측에서:" }), "\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 // AJAX 요청 처리\n } else {\n // 비AJAX 요청 처리\n }\n next();\n});\n" }) }), "\n", _jsxs(_components.h3, { id: "이중-쿠키-검증", children: ["이중 쿠키 검증", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#이중-쿠키-검증", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "이중 쿠키 검증은 효과적인 CSRF 방어 기술입니다. 그 핵심 원리는 서버가 임의의 토큰을 생성하여 쿠키와 페이지(보통 숨겨진 양식 필드로) 모두에 설정하는 것입니다. 브라우저가 요청을 보낼 때 자동으로 쿠키를 포함시키며, 페이지의 JavaScript는 요청 매개변수로 토큰을 보냅니다. 서버는 쿠키의 토큰이 요청 매개변수의 토큰과 일치하는지 확인합니다." }), "\n", _jsx(_components.p, { children: "공격자는 교차 사이트 요청에서 대상 웹사이트의 쿠키를 포함할 수 있지만, 쿠키의 값을 읽거나 수정할 수 없으며, 페이지의 토큰 값을 액세스하거나 수정할 수도 없습니다. 쿠키와 매개변수 양쪽에 있는 토큰을 요청에 포함하도록 요구함으로써, 쿠키를 읽을 수 있는 권한이 있는 원본에서 요청이 온다는 것을 보장하므로 CSRF 공격을 효과적으로 방어합니다." }), "\n", _jsxs(_components.h3, { id: "민감한-작업에-대해-재인증-사용", children: ["민감한 작업에 대해 재인증 사용", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#민감한-작업에-대해-재인증-사용", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "특히 민감한 작업(예: 비밀번호 변경 또는 대량 송금)에 대해 사용자는 재인증을 요구할 수 있습니다.\n이는 사용자에게 추가적인 보안 검사를 제공합니다. 사용자가 CSRF 공격을 성공적으로 시작하더라도, 재인증 단계를 통과할 수 없습니다." }), "\n", _jsx(_components.p, { children: "구현 제안:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "민감한 작업을 수행하기 전에 별도의 인증 페이지로 리디렉션하십시오." }), "\n", _jsx(_components.li, { children: "이 페이지에서 사용자가 비밀번호나 다른 신원 확인 정보를 입력하도록 요구하십시오." }), "\n", _jsx(_components.li, { children: "인증이 통과되면 일회성 토큰을 생성하고 이후 민감한 작업에 이 토큰을 사용하십시오." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "요약", children: ["요약", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#요약", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "이 심층적인 토론을 통해 CSRF 공격에 대해 보다 포괄적인 이해를 가지셨기를 바랍니다. 우리는 CSRF의 작동 원리뿐만 아니라 다양한 효과적인 방어 조치도 탐구했습니다. 이러한 모든 방법은 웹 애플리케이션의 보안을 효과적으로 강화할 수 있습니다." }), "\n", _jsx(_components.p, { children: "이 지식이 일상적인 개발에서 CSRF 관련 문제를 보다 잘 처리하고 더 안전한 웹 애플리케이션을 구축하는 데 도움이 되기를 바랍니다." }), "\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."); }