🎯 CSRF가 뭔데 이렇게 난리야?

야 솔직히 말해서 웹 개발하다보면 보안 이슈 진짜 개많잖아 ㅋㅋㅋ 그 중에서도 CSRF(Cross-Site Request Forgery)는 진짜 무시하면 큰일나는 녀석이야.

간단하게 설명하면, 사용자가 의도하지 않은 요청을 공격자가 몰래 보내게 만드는 공격 방식이거든? 예를 들어 네가 은행 사이트에 로그인한 상태에서 악성 링크를 클릭하면, 너도 모르게 돈이 이체될 수 있다는 거지 ㄷㄷㄷ

이런 공격을 막기 위해 나온 게 바로 CSRF 토큰이야! 토큰은 일종의 비밀 암호 같은 건데, 서버가 생성해서 클라이언트에게 주고, 클라이언트는 요청할 때마다 이 토큰을 같이 보내는 거지. 서버는 이 토큰을 검증해서 "아 이건 진짜 우리 사용자가 보낸 요청이구나" 하고 확인하는 거야.

🔐 CSRF 토큰의 핵심 원리

CSRF 토큰이 작동하는 원리는 생각보다 심플해 ㅋㅋ 근데 이게 진짜 효과적이거든?

기본 아이디어는 이거야: 예측 불가능한 랜덤 값을 생성해서 서버와 클라이언트만 공유하는 거지. 공격자는 이 값을 알 수 없으니까 정상적인 요청을 위조할 수 없게 되는 원리야.

토큰은 보통 세션마다 또는 요청마다 새로 생성되고, 서버 측에서는 이 토큰을 세션이나 데이터베이스에 저장해둬. 그리고 클라이언트가 폼을 제출하거나 API 요청을 보낼 때 이 토큰을 함께 보내면, 서버는 저장된 토큰과 비교해서 검증하는 거지.

💻 Node.js + Express에서 CSRF 토큰 생성하기

자 이제 본격적으로 코드 들어간다 ㅋㅋㅋ Node.js 환경에서 가장 많이 쓰는 방법부터 볼게.

Express에서는 csurf 미들웨어가 전통적으로 많이 쓰였는데, 최근에는 더 현대적인 방법들도 많이 나왔어. 근데 원리를 이해하려면 직접 구현해보는 게 최고지!

const crypto = require('crypto');

// CSRF 토큰 생성 함수
function generateCSRFToken() {
    // 32바이트(256비트)의 랜덤 데이터 생성
    return crypto.randomBytes(32).toString('hex');
}

// 사용 예시
const token = generateCSRFToken();
console.log('생성된 토큰:', token);
// 출력 예: 생성된 토큰: a3f5e8d9c2b1a4f6e7d8c9b0a1f2e3d4c5b6a7f8e9d0c1b2a3f4e5d6c7b8a9f0

이게 가장 기본적인 형태야. crypto.randomBytes()는 암호학적으로 안전한 난수를 생성해주거든. 그리고 hex로 인코딩하면 문자열로 변환돼서 다루기 편해짐 ㅇㅇ

const express = require('express');
const session = require('express-session');
const crypto = require('crypto');

const app = express();

// 세션 설정
app.use(session({
    secret: 'your-secret-key-here',
    resave: false,
    saveUninitialized: true,
    cookie: { 
        secure: true, // HTTPS에서만 작동
        httpOnly: true, // JavaScript 접근 차단
        sameSite: 'strict' // CSRF 추가 방어
    }
}));

// CSRF 토큰 생성 미들웨어
app.use((req, res, next) => {
    if (!req.session.csrfToken) {
        req.session.csrfToken = crypto.randomBytes(32).toString('hex');
    }
    // 템플릿에서 사용할 수 있도록 locals에 저장
    res.locals.csrfToken = req.session.csrfToken;
    next();
});

// CSRF 토큰 검증 미들웨어
function verifyCSRFToken(req, res, next) {
    const token = req.body.csrfToken || req.headers['x-csrf-token'];
    
    if (!token || token !== req.session.csrfToken) {
        return res.status(403).json({ 
            error: 'CSRF 토큰이 유효하지 않습니다 ㅠㅠ' 
        });
    }
    
    next();
}

// 폼 페이지 라우트
app.get('/form', (req, res) => {
    res.send(`
        <form method="POST" action="/submit">
            <input type="hidden" name="csrfToken" value="${res.locals.csrfToken}">
            <input type="text" name="data" placeholder="데이터 입력">
            <button type="submit">전송</button>
        </form>
    `);
});

// 폼 제출 처리 (CSRF 보호됨)
app.post('/submit', verifyCSRFToken, (req, res) => {
    res.json({ 
        success: true, 
        message: '데이터가 안전하게 처리되었습니다! 🎉' 
    });
});

app.listen(3000, () => {
    console.log('서버 실행 중: http://localhost:3000');
});

🎨 csurf 패키지 사용하기

직접 구현하는 것도 좋지만, 검증된 라이브러리를 쓰는 게 더 안전할 때가 많아 ㅋㅋ csurf는 Express용 CSRF 보호 미들웨어인데, 사용법이 진짜 간단해.

// 설치
// npm install csurf cookie-parser

const express = require('express');
const cookieParser = require('cookie-parser');
const csrf = require('csurf');

const app = express();

// 미들웨어 설정
app.use(cookieParser());
app.use(express.urlencoded({ extended: false }));

// CSRF 보호 설정 (쿠키 기반)
const csrfProtection = csrf({ cookie: true });

// 모든 라우트에 적용
app.use(csrfProtection);

// 폼 렌더링
app.get('/form', (req, res) => {
    // req.csrfToken()으로 토큰 가져오기
    res.send(`
        <form method="POST" action="/process">
            <input type="hidden" name="_csrf" value="${req.csrfToken()}">
            <input type="text" name="username" placeholder="사용자명">
            <button type="submit">제출</button>
        </form>
    `);
});

// POST 요청 처리 (자동으로 CSRF 검증됨)
app.post('/process', (req, res) => {
    res.send('처리 완료! ✅');
});

// CSRF 에러 핸들링
app.use((err, req, res, next) => {
    if (err.code === 'EBADCSRFTOKEN') {
        res.status(403).send('CSRF 토큰 검증 실패 😢');
    } else {
        next(err);
    }
});

app.listen(3000);

csurf의 장점은 자동으로 토큰 생성, 검증, 에러 처리를 해준다는 거야. 근데 최근에는 이 패키지가 deprecated 됐어 ㅠㅠ 그래서 대안을 찾아야 하는데, 그건 조금 있다가 설명할게!

🐍 Python Flask에서 CSRF 토큰 구현

Python 개발자들 여기 주목 ㅋㅋㅋ Flask에서도 CSRF 보호는 필수야. Flask-WTF 확장을 쓰면 진짜 쉽게 구현할 수 있어.

from flask import Flask, render_template, request, jsonify
from flask_wtf.csrf import CSRFProtect, generate_csrf
import secrets

app = Flask(__name__)

# 시크릿 키 설정 (실제로는 환경변수에서 가져와야 함)
app.config['SECRET_KEY'] = secrets.token_hex(32)

# CSRF 보호 활성화
csrf = CSRFProtect(app)

@app.route('/form')
def form():
    # 템플릿에 자동으로 csrf_token() 함수 제공됨
    return '''
        <form method="POST" action="/submit">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="text" name="data">
            <button type="submit">전송</button>
        </form>
    '''

@app.route('/submit', methods=['POST'])
def submit():
    # CSRF 토큰은 자동으로 검증됨
    data = request.form.get('data')
    return jsonify({'success': True, 'data': data})

# API 엔드포인트에서 CSRF 토큰 가져오기
@app.route('/api/get-token')
def get_token():
    token = generate_csrf()
    return jsonify({'csrfToken': token})

# 특정 라우트에서 CSRF 보호 비활성화 (API 등)
@app.route('/api/public', methods=['POST'])
@csrf.exempt
def public_api():
    return jsonify({'message': '공개 API 엔드포인트'})

if __name__ == '__main__':
    app.run(debug=True)

from flask import Flask, session
import secrets
import hashlib
import hmac

app = Flask(__name__)
app.secret_key = secrets.token_hex(32)

def generate_csrf_token():
    """CSRF 토큰 생성"""
    if '_csrf_token' not in session:
        session['_csrf_token'] = secrets.token_urlsafe(32)
    return session['_csrf_token']

def validate_csrf_token(token):
    """CSRF 토큰 검증"""
    return token == session.get('_csrf_token')

# 템플릿에서 사용할 수 있도록 컨텍스트 프로세서 등록
@app.context_processor
def inject_csrf_token():
    return dict(csrf_token=generate_csrf_token)

@app.before_request
def csrf_protect():
    """POST 요청에 대해 CSRF 토큰 검증"""
    if request.method == "POST":
        token = request.form.get('_csrf_token')
        if not token or not validate_csrf_token(token):
            abort(403, 'CSRF 토큰 검증 실패!')

# 사용 예시
@app.route('/protected-form')
def protected_form():
    return render_template('form.html')

Flask는 진짜 간단하지? ㅋㅋ Flask-WTF가 대부분의 작업을 자동으로 처리해줘서 개발자는 신경 쓸 게 별로 없어. 근데 내부 동작 원리를 이해하는 건 중요하니까 수동 구현 코드도 같이 봐둬!

☕ Java Spring에서 CSRF 토큰 처리

엔터프라이즈 환경에서 많이 쓰는 Spring도 빼놓을 수 없지 ㅋㅋ Spring Security는 기본적으로 CSRF 보호가 활성화되어 있어. 오히려 비활성화하는 게 더 어려울 정도 ㅋㅋㅋ

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.csrf.CookieCsrfTokenRepository;

@Configuration
@EnableWebSecurity
public class SecurityConfig {
    
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            // CSRF 보호 활성화 (기본값)
            .csrf(csrf -> csrf
                // 쿠키 기반 토큰 저장소 사용
                .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
                // 특정 경로는 CSRF 보호 제외
                .ignoringRequestMatchers("/api/public/**")
            )
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/", "/login").permitAll()
                .anyRequest().authenticated()
            );
        
        return http.build();
    }
}

<!-- Thymeleaf는 자동으로 CSRF 토큰을 폼에 추가함 -->
<form th:action="@{/submit}" method="post">
    <!-- 이 부분이 자동으로 추가됨:
    <input type="hidden" name="_csrf" value="토큰값"/>
    -->
    <input type="text" name="data"/>
    <button type="submit">전송</button>
</form>

<!-- AJAX 요청에서 CSRF 토큰 사용 -->
<script th:inline="javascript">
    const token = /*[[${_csrf.token}]]*/ '';
    const header = /*[[${_csrf.headerName}]]*/ '';
    
    fetch('/api/data', {
        method: 'POST',
        headers: {
            [header]: token,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ data: 'test' })
    });
</script>

import org.springframework.security.web.csrf.CsrfToken;
import org.springframework.web.bind.annotation.*;

@RestController
public class CsrfController {
    
    // CSRF 토큰 정보 반환
    @GetMapping("/api/csrf-token")
    public CsrfToken getCsrfToken(CsrfToken token) {
        return token;
    }
    
    // POST 요청 처리 (자동으로 CSRF 검증됨)
    @PostMapping("/api/submit")
    public ResponseEntity<String> submitData(@RequestBody DataDto data) {
        // CSRF 토큰이 유효하면 이 메서드가 실행됨
        return ResponseEntity.ok("데이터 처리 완료! 🎉");
    }
}

Spring의 장점은 프레임워크 레벨에서 CSRF 보호를 제공한다는 거야. 개발자가 별도로 구현할 필요 없이 설정만 해주면 끝! 근데 SPA(Single Page Application)나 REST API를 만들 때는 설정을 좀 더 세밀하게 조정해야 해.

⚛️ React + REST API에서 CSRF 토큰 처리

요즘 대세인 SPA 환경에서는 CSRF 토큰 처리가 좀 달라 ㅋㅋ 전통적인 폼 제출 방식이 아니라 AJAX/Fetch로 통신하니까 말이야.

재능넷 같은 플랫폼에서도 프론트엔드 개발 재능을 거래할 때 이런 보안 지식이 있으면 진짜 유리하거든? 클라이언트 측 보안 구현 능력은 필수야 ㅇㅇ

// csrfToken.js - CSRF 토큰 유틸리티
export const getCsrfToken = async () => {
    try {
        const response = await fetch('/api/csrf-token', {
            credentials: 'include' // 쿠키 포함
        });
        const data = await response.json();
        return data.csrfToken;
    } catch (error) {
        console.error('CSRF 토큰 가져오기 실패 ㅠㅠ', error);
        return null;
    }
};

// 쿠키에서 CSRF 토큰 읽기
export const getCsrfTokenFromCookie = () => {
    const name = 'XSRF-TOKEN=';
    const decodedCookie = decodeURIComponent(document.cookie);
    const cookies = decodedCookie.split(';');
    
    for (let cookie of cookies) {
        cookie = cookie.trim();
        if (cookie.indexOf(name) === 0) {
            return cookie.substring(name.length);
        }
    }
    return null;
};

// API 호출 래퍼 함수
export const apiCall = async (url, options = {}) => {
    const token = getCsrfTokenFromCookie() || await getCsrfToken();
    
    const defaultOptions = {
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': token,
            ...options.headers
        }
    };
    
    return fetch(url, { ...defaultOptions, ...options });
};

import React, { useState, useEffect } from 'react';
import { apiCall, getCsrfToken } from './csrfToken';

function ProtectedForm() {
    const [csrfToken, setCsrfToken] = useState('');
    const [formData, setFormData] = useState({ name: '', email: '' });
    const [message, setMessage] = useState('');

    // 컴포넌트 마운트 시 CSRF 토큰 가져오기
    useEffect(() => {
        const fetchToken = async () => {
            const token = await getCsrfToken();
            setCsrfToken(token);
        };
        fetchToken();
    }, []);

    const handleSubmit = async (e) => {
        e.preventDefault();
        
        try {
            const response = await apiCall('/api/submit', {
                method: 'POST',
                body: JSON.stringify(formData)
            });
            
            if (response.ok) {
                const result = await response.json();
                setMessage('전송 성공! 🎉');
            } else {
                setMessage('전송 실패 😢');
            }
        } catch (error) {
            console.error('에러 발생:', error);
            setMessage('네트워크 오류 발생 ㅠㅠ');
        }
    };

    return (
        <div>
            <form onSubmit={handleSubmit}>
                <input
                    type="text"
                    value={formData.name}
                    onChange={(e) => setFormData({...formData, name: e.target.value})}
                    placeholder="이름"
                />
                <input
                    type="email"
                    value={formData.email}
                    onChange={(e) => setFormData({...formData, email: e.target.value})}
                    placeholder="이메일"
                />
                <button type="submit">전송</button>
            </form>
            {message && <p>{message}</p>}
        </div>
    );
}

export default ProtectedForm;

import axios from 'axios';

// Axios 인스턴스 생성
const api = axios.create({
    baseURL: '/api',
    withCredentials: true // 쿠키 자동 포함
});

// 요청 인터셉터: 모든 요청에 CSRF 토큰 자동 추가
api.interceptors.request.use(
    async (config) => {
        // 쿠키에서 토큰 읽기
        const token = document.cookie
            .split('; ')
            .find(row => row.startsWith('XSRF-TOKEN='))
            ?.split('=')[1];
        
        if (token) {
            config.headers['X-CSRF-Token'] = token;
        }
        
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

// 응답 인터셉터: CSRF 에러 처리
api.interceptors.response.use(
    (response) => response,
    async (error) => {
        if (error.response?.status === 403) {
            console.error('CSRF 토큰 검증 실패! 토큰을 갱신해야 함 ㅠㅠ');
            // 토큰 갱신 로직 추가 가능
        }
        return Promise.reject(error);
    }
);

// 사용 예시
export const submitData = async (data) => {
    try {
        const response = await api.post('/submit', data);
        return response.data;
    } catch (error) {
        console.error('API 호출 실패:', error);
        throw error;
    }
};

export default api;

Axios 인터셉터를 쓰면 진짜 편해 ㅋㅋㅋ 모든 요청에 자동으로 CSRF 토큰이 붙으니까 일일이 신경 쓸 필요가 없거든. 이런 패턴은 대규모 프로젝트에서 필수야!

🔒 Double Submit Cookie 패턴

세션을 사용하지 않는 stateless API에서는 어떻게 CSRF를 막을까? 여기서 등장하는 게 Double Submit Cookie 패턴이야 ㅋㅋ

이 방식은 서버가 토큰을 저장하지 않고도 CSRF를 방어할 수 있어. 원리는 간단해: 같은 토큰을 쿠키와 요청 헤더(또는 바디) 양쪽에 보내는 거지. 공격자는 쿠키를 읽을 수 없으니까 헤더에 올바른 토큰을 넣을 수 없다는 게 핵심!

const express = require('express');
const cookieParser = require('cookie-parser');
const crypto = require('crypto');

const app = express();
app.use(cookieParser());
app.use(express.json());

// CSRF 토큰 생성 및 쿠키 설정
app.use((req, res, next) => {
    if (!req.cookies.csrfToken) {
        const token = crypto.randomBytes(32).toString('hex');
        res.cookie('csrfToken', token, {
            httpOnly: false, // JavaScript에서 읽을 수 있어야 함!
            secure: true,
            sameSite: 'strict',
            maxAge: 3600000 // 1시간
        });
    }
    next();
});

// CSRF 검증 미들웨어
function verifyDoubleSubmitToken(req, res, next) {
    const cookieToken = req.cookies.csrfToken;
    const headerToken = req.headers['x-csrf-token'];
    
    // 쿠키와 헤더의 토큰이 일치하는지 확인
    if (!cookieToken || !headerToken || cookieToken !== headerToken) {
        return res.status(403).json({ 
            error: 'CSRF 토큰 불일치! 공격 시도 감지 🚨' 
        });
    }
    
    next();
}

// 토큰 발급 엔드포인트
app.get('/api/token', (req, res) => {
    res.json({ 
        csrfToken: req.cookies.csrfToken,
        message: '토큰 발급 완료 ✅'
    });
});

// 보호된 API 엔드포인트
app.post('/api/protected', verifyDoubleSubmitToken, (req, res) => {
    res.json({ 
        success: true, 
        message: '요청이 안전하게 처리되었습니다! 🎉',
        data: req.body 
    });
});

app.listen(3000);

// 쿠키에서 CSRF 토큰 읽기
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) {
        return parts.pop().split(';').shift();
    }
    return null;
}

// API 호출 함수
async function makeProtectedRequest(data) {
    const csrfToken = getCookie('csrfToken');
    
    if (!csrfToken) {
        console.error('CSRF 토큰이 없음 ㅠㅠ');
        return;
    }
    
    try {
        const response = await fetch('/api/protected', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': csrfToken // 쿠키 값을 헤더에도 전송
            },
            credentials: 'include', // 쿠키 포함
            body: JSON.stringify(data)
        });
        
        const result = await response.json();
        console.log('응답:', result);
        return result;
    } catch (error) {
        console.error('요청 실패:', error);
    }
}

// 사용 예시
makeProtectedRequest({ 
    username: 'testuser', 
    action: 'update_profile' 
});

🎭 HMAC 기반 CSRF 토큰

좀 더 고급 기법으로 넘어가볼까? ㅋㅋ HMAC(Hash-based Message Authentication Code)를 사용하면 토큰의 무결성을 보장할 수 있어. 서버만 알고 있는 비밀 키로 토큰을 서명하는 방식이지.

const crypto = require('crypto');

class CSRFTokenManager {
    constructor(secretKey) {
        this.secretKey = secretKey;
    }
    
    // CSRF 토큰 생성
    generateToken(sessionId, timestamp = Date.now()) {
        // 랜덤 값 생성
        const randomValue = crypto.randomBytes(16).toString('hex');
        
        // 토큰 페이로드: sessionId + timestamp + randomValue
        const payload = `${sessionId}:${timestamp}:${randomValue}`;
        
        // HMAC 서명 생성
        const signature = crypto
            .createHmac('sha256', this.secretKey)
            .update(payload)
            .digest('hex');
        
        // 최종 토큰: payload + signature
        const token = `${payload}:${signature}`;
        
        return Buffer.from(token).toString('base64');
    }
    
    // CSRF 토큰 검증
    verifyToken(token, sessionId, maxAge = 3600000) {
        try {
            // Base64 디코딩
            const decoded = Buffer.from(token, 'base64').toString('utf-8');
            const parts = decoded.split(':');
            
            if (parts.length !== 4) {
                return { valid: false, reason: '토큰 형식 오류' };
            }
            
            const [tokenSessionId, timestamp, randomValue, signature] = parts;
            
            // 세션 ID 확인
            if (tokenSessionId !== sessionId) {
                return { valid: false, reason: '세션 불일치' };
            }
            
            // 타임스탬프 확인 (만료 체크)
            const tokenAge = Date.now() - parseInt(timestamp);
            if (tokenAge > maxAge) {
                return { valid: false, reason: '토큰 만료됨 ⏰' };
            }
            
            // 서명 검증
            const payload = `${tokenSessionId}:${timestamp}:${randomValue}`;
            const expectedSignature = crypto
                .createHmac('sha256', this.secretKey)
                .update(payload)
                .digest('hex');
            
            if (signature !== expectedSignature) {
                return { valid: false, reason: '서명 검증 실패 🚫' };
            }
            
            return { valid: true, reason: '토큰 유효 ✅' };
            
        } catch (error) {
            return { valid: false, reason: '토큰 파싱 오류' };
        }
    }
}

// 사용 예시
const secretKey = crypto.randomBytes(32).toString('hex');
const csrfManager = new CSRFTokenManager(secretKey);

// 토큰 생성
const sessionId = 'user-session-12345';
const token = csrfManager.generateToken(sessionId);
console.log('생성된 토큰:', token);

// 토큰 검증
const verification = csrfManager.verifyToken(token, sessionId);
console.log('검증 결과:', verification);
// 출력: { valid: true, reason: '토큰 유효 ✅' }

const express = require('express');
const session = require('express-session');

const app = express();

// 시크릿 키는 환경변수에서 가져오기
const SECRET_KEY = process.env.CSRF_SECRET || crypto.randomBytes(32).toString('hex');
const csrfManager = new CSRFTokenManager(SECRET_KEY);

app.use(session({
    secret: 'session-secret',
    resave: false,
    saveUninitialized: true
}));

// CSRF 토큰 생성 미들웨어
app.use((req, res, next) => {
    if (req.session && req.session.id) {
        req.csrfToken = () => csrfManager.generateToken(req.session.id);
        res.locals.csrfToken = req.csrfToken();
    }
    next();
});

// CSRF 검증 미들웨어
function validateCSRF(req, res, next) {
    const token = req.body._csrf || req.headers['x-csrf-token'];
    
    if (!token) {
        return res.status(403).json({ error: 'CSRF 토큰 누락' });
    }
    
    const result = csrfManager.verifyToken(token, req.session.id);
    
    if (!result.valid) {
        return res.status(403).json({ 
            error: 'CSRF 검증 실패', 
            reason: result.reason 
        });
    }
    
    next();
}

// 라우트 예시
app.get('/form', (req, res) => {
    res.send(`
        <form method="POST" action="/submit">
            <input type="hidden" name="_csrf" value="${res.locals.csrfToken}">
            <input type="text" name="data">
            <button>전송</button>
        </form>
    `);
});

app.post('/submit', validateCSRF, (req, res) => {
    res.json({ success: true, message: '안전하게 처리됨! 🎉' });
});

app.listen(3000);

HMAC 방식의 장점은 토큰 자체에 검증 정보가 포함되어 있다는 거야. 서버가 별도로 토큰을 저장하지 않아도 되고, 토큰이 위조되었는지 즉시 알 수 있지 ㅇㅇ 보안성도 훨씬 높고!

📱 모바일 앱에서의 CSRF 방어

모바일 앱은 웹과 좀 다르게 접근해야 해 ㅋㅋ 네이티브 앱은 브라우저가 아니니까 전통적인 CSRF 공격에는 덜 취약하지만, 그래도 방어 메커니즘은 필요해!

// csrfService.js
import AsyncStorage from '@react-native-async-storage/async-storage';

class CSRFService {
    constructor() {
        this.tokenKey = '@csrf_token';
        this.baseURL = 'https://api.example.com';
    }
    
    // 토큰 가져오기
    async getToken() {
        try {
            const token = await AsyncStorage.getItem(this.tokenKey);
            if (token) {
                return token;
            }
            // 토큰이 없으면 서버에서 새로 받아오기
            return await this.fetchNewToken();
        } catch (error) {
            console.error('토큰 가져오기 실패 ㅠㅠ', error);
            return null;
        }
    }
    
    // 서버에서 새 토큰 받아오기
    async fetchNewToken() {
        try {
            const response = await fetch(`${this.baseURL}/api/csrf-token`, {
                method: 'GET',
                credentials: 'include'
            });
            
            const data = await response.json();
            await AsyncStorage.setItem(this.tokenKey, data.token);
            return data.token;
        } catch (error) {
            console.error('토큰 발급 실패:', error);
            return null;
        }
    }
    
    // 토큰 갱신
    async refreshToken() {
        await AsyncStorage.removeItem(this.tokenKey);
        return await this.fetchNewToken();
    }
    
    // API 호출 래퍼
    async apiCall(endpoint, options = {}) {
        const token = await this.getToken();
        
        const defaultOptions = {
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': token,
                ...options.headers
            }
        };
        
        try {
            const response = await fetch(
                `${this.baseURL}${endpoint}`, 
                { ...defaultOptions, ...options }
            );
            
            // 403 에러면 토큰 갱신 후 재시도
            if (response.status === 403) {
                console.log('토큰 만료, 갱신 중...');
                await this.refreshToken();
                
                // 재시도
                const newToken = await this.getToken();
                defaultOptions.headers['X-CSRF-Token'] = newToken;
                return await fetch(
                    `${this.baseURL}${endpoint}`, 
                    { ...defaultOptions, ...options }
                );
            }
            
            return response;
        } catch (error) {
            console.error('API 호출 실패:', error);
            throw error;
        }
    }
}

export default new CSRFService();

import React, { useState } from 'react';
import { View, TextInput, Button, Text, Alert } from 'react-native';
import csrfService from './csrfService';

function ProtectedForm() {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [loading, setLoading] = useState(false);
    
    const handleSubmit = async () => {
        setLoading(true);
        
        try {
            const response = await csrfService.apiCall('/api/submit', {
                method: 'POST',
                body: JSON.stringify({ name, email })
            });
            
            const result = await response.json();
            
            if (response.ok) {
                Alert.alert('성공', '데이터가 전송되었습니다! 🎉');
                setName('');
                setEmail('');
            } else {
                Alert.alert('오류', result.error || '전송 실패 ㅠㅠ');
            }
        } catch (error) {
            Alert.alert('오류', '네트워크 오류가 발생했습니다');
        } finally {
            setLoading(false);
        }
    };
    
    return (
        <View style={{ padding: 20 }}>
            <TextInput
                placeholder="이름"
                value={name}
                onChangeText={setName}
                style={{ borderWidth: 1, padding: 10, marginBottom: 10 }}
            />
            <TextInput
                placeholder="이메일"
                value={email}
                onChangeText={setEmail}
                keyboardType="email-address"
                style={{ borderWidth: 1, padding: 10, marginBottom: 10 }}
            />
            <Button 
                title={loading ? "전송 중..." : "전송"} 
                onPress={handleSubmit}
                disabled={loading}
            />
        </View>
    );
}

export default ProtectedForm;

모바일 앱에서는 토큰을 AsyncStorage나 SecureStore에 저장하고, API 호출 시마다 자동으로 포함시키는 게 일반적이야. 토큰 만료 시 자동 갱신 로직도 꼭 넣어줘야 하고!

🔄 토큰 갱신 전략

CSRF 토큰도 만료 시간이 있어야 해. 너무 오래 유효하면 보안 위험이 커지거든 ㅋㅋ 근데 사용자가 폼 작성 중에 토큰이 만료되면? 짜증나지 ㅠㅠ 그래서 적절한 갱신 전략이 필요해!

class TokenRefreshManager {
    constructor(refreshInterval = 1800000) { // 기본 30분
        this.refreshInterval = refreshInterval;
        this.refreshTimer = null;
        this.token = null;
    }
    
    // 토큰 갱신 시작
    startAutoRefresh() {
        // 초기 토큰 가져오기
        this.refreshToken();
        
        // 주기적 갱신 설정
        this.refreshTimer = setInterval(() => {
            this.refreshToken();
        }, this.refreshInterval);
        
        console.log('자동 토큰 갱신 시작 🔄');
    }
    
    // 토큰 갱신 중지
    stopAutoRefresh() {
        if (this.refreshTimer) {
            clearInterval(this.refreshTimer);
            this.refreshTimer = null;
            console.log('자동 토큰 갱신 중지 ⏸️');
        }
    }
    
    // 토큰 갱신
    async refreshToken() {
        try {
            const response = await fetch('/api/csrf-token/refresh', {
                method: 'POST',
                credentials: 'include'
            });
            
            if (response.ok) {
                const data = await response.json();
                this.token = data.token;
                
                // 커스텀 이벤트 발생 (다른 컴포넌트에서 감지 가능)
                window.dispatchEvent(new CustomEvent('csrf-token-refreshed', {
                    detail: { token: this.token }
                }));
                
                console.log('토큰 갱신 완료 ✅');
                return this.token;
            } else {
                console.error('토큰 갱신 실패 ㅠㅠ');
                return null;
            }
        } catch (error) {
            console.error('토큰 갱신 중 오류:', error);
            return null;
        }
    }
    
    // 현재 토큰 가져오기
    getToken() {
        return this.token;
    }
}

// 전역 인스턴스 생성
const tokenManager = new TokenRefreshManager();

// 페이지 로드 시 자동 갱신 시작
window.addEventListener('load', () => {
    tokenManager.startAutoRefresh();
});

// 페이지 언로드 시 갱신 중지
window.addEventListener('beforeunload', () => {
    tokenManager.stopAutoRefresh();
});

export default tokenManager;

import { useState, useEffect, useCallback } from 'react';

function useCSRFToken(refreshInterval = 1800000) {
    const [token, setToken] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    
    // 토큰 가져오기
    const fetchToken = useCallback(async () => {
        try {
            setLoading(true);
            const response = await fetch('/api/csrf-token');
            
            if (!response.ok) {
                throw new Error('토큰 가져오기 실패');
            }
            
            const data = await response.json();
            setToken(data.token);
            setError(null);
        } catch (err) {
            setError(err.message);
            console.error('토큰 로드 오류:', err);
        } finally {
            setLoading(false);
        }
    }, []);
    
    // 토큰 갱신
    const refreshToken = useCallback(async () => {
        console.log('토큰 갱신 중... 🔄');
        await fetchToken();
    }, [fetchToken]);
    
    // 초기 로드 및 자동 갱신 설정
    useEffect(() => {
        fetchToken();
        
        // 주기적 갱신
        const interval = setInterval(refreshToken, refreshInterval);
        
        return () => {
            clearInterval(interval);
        };
    }, [fetchToken, refreshToken, refreshInterval]);
    
    return { token, loading, error, refreshToken };
}

// 사용 예시
function MyComponent() {
    const { token, loading, error, refreshToken } = useCSRFToken();
    
    if (loading) return <div>토큰 로딩 중... ⏳</div>;
    if (error) return <div>오류: {error} 😢</div>;
    
    const handleSubmit = async (data) => {
        try {
            const response = await fetch('/api/submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': token
                },
                body: JSON.stringify(data)
            });
            
            if (response.status === 403) {
                // 토큰 만료 시 갱신 후 재시도
                await refreshToken();
                // 재시도 로직...
            }
        } catch (error) {
            console.error('전송 실패:', error);
        }
    };
    
    return (
        <div>
            <p>현재 토큰: {token.substring(0, 20)}...</p>
            <button onClick={() => handleSubmit({ test: 'data' })}>
                전송
            </button>
        </div>
    );
}

🛠️ 실전 디버깅 팁

CSRF 토큰 구현하다 보면 문제가 생길 때가 많아 ㅋㅋㅋ 내가 겪었던 삽질들을 공유해볼게!

// CSRF 토큰 디버깅 유틸리티
class CSRFDebugger {
    static logTokenInfo(token, sessionId) {
        console.group('🔍 CSRF 토큰 정보');
        console.log('토큰:', token);
        console.log('토큰 길이:', token?.length);
        console.log('세션 ID:', sessionId);
        console.log('쿠키:', document.cookie);
        console.groupEnd();
    }
    
    static validateTokenFormat(token) {
        if (!token) {
            console.error('❌ 토큰이 없음!');
            return false;
        }
        
        if (typeof token !== 'string') {
            console.error('❌ 토큰이 문자열이 아님!');
            return false;
        }
        
        if (token.length < 32) {
            console.warn('⚠️ 토큰이 너무 짧음 (보안 취약)');
            return false;
        }
        
        console.log('✅ 토큰 형식 유효');
        return true;
    }
    
    static async testCSRFProtection(endpoint, token) {
        console.group('🧪 CSRF 보호 테스트');
        
        // 1. 토큰 없이 요청
        console.log('테스트 1: 토큰 없이 요청');
        try {
            const res1 = await fetch(endpoint, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ test: 'data' })
            });
            console.log('결과:', res1.status, res1.status === 403 ? '✅ 차단됨' : '❌ 통과됨');
        } catch (e) {
            console.error('오류:', e);
        }
        
        // 2. 잘못된 토큰으로 요청
        console.log('테스트 2: 잘못된 토큰으로 요청');
        try {
            const res2 = await fetch(endpoint, {
                method: 'POST',
                headers: { 
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': 'invalid-token-12345'
                },
                body: JSON.stringify({ test: 'data' })
            });
            console.log('결과:', res2.status, res2.status === 403 ? '✅ 차단됨' : '❌ 통과됨');
        } catch (e) {
            console.error('오류:', e);
        }
        
        // 3. 올바른 토큰으로 요청
        console.log('테스트 3: 올바른 토큰으로 요청');
        try {
            const res3 = await fetch(endpoint, {
                method: 'POST',
                headers: { 
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': token
                },
                body: JSON.stringify({ test: 'data' })
            });
            console.log('결과:', res3.status, res3.status === 200 ? '✅ 통과됨' : '❌ 차단됨');
        } catch (e) {
            console.error('오류:', e);
        }
        
        console.groupEnd();
    }
    
    static monitorCSRFRequests() {
        // Fetch API 래핑
        const originalFetch = window.fetch;
        window.fetch = async (...args) => {
            const [url, options] = args;
            
            if (options?.method && options.method !== 'GET') {
                const token = options.headers?.['X-CSRF-Token'] || 
                             options.headers?.['x-csrf-token'];
                
                console.log('🌐 CSRF 보호 요청:', {
                    url,
                    method: options.method,
                    hasToken: !!token,
                    token: token?.substring(0, 20) + '...'
                });
            }
            
            return originalFetch(...args);
        };
        
        console.log('✅ CSRF 요청 모니터링 활성화');
    }
}

// 개발 환경에서만 사용
if (process.env.NODE_ENV === 'development') {
    window.CSRFDebugger = CSRFDebugger;
    
    // 자동 모니터링 시작
    CSRFDebugger.monitorCSRFRequests();
}

디버깅 도구를 만들어두면 진짜 편해 ㅋㅋㅋ 문제 생겼을 때 바로 원인 파악할 수 있거든. 특히 프로덕션 배포 전에 꼭 테스트해봐야 해!

🌐 다양한 프레임워크별 구현

지금까지 주로 Node.js랑 Python을 봤는데, 다른 언어들도 간단히 살펴볼게 ㅇㅇ

use actix_web::{web, App, HttpRequest, HttpResponse, HttpServer};
use actix_session::{Session, SessionMiddleware, storage::CookieSessionStore};
use actix_web::cookie::Key;
use rand::{thread_rng, Rng};
use rand::distributions::Alphanumeric;

// CSRF 토큰 생성
fn generate_csrf_token() -> String {
    thread_rng()
        .sample_iter(&Alphanumeric)
        .take(32)
        .map(char::from)
        .collect()
}

// CSRF 토큰 검증 미들웨어
async fn verify_csrf(req: HttpRequest, session: Session) -> Result<(), HttpResponse> {
    let session_token = session.get::<String>("csrf_token")?
        .ok_or_else(|| HttpResponse::Forbidden().body("No CSRF token in session"))?;
    
    let request_token = req
        .headers()
        .get("X-CSRF-Token")
        .and_then(|h| h.to_str().ok())
        .ok_or_else(|| HttpResponse::Forbidden().body("No CSRF token in request"))?;
    
    if session_token != request_token {
        return Err(HttpResponse::Forbidden().body("CSRF token mismatch"));
    }
    
    Ok(())
}

// 라우트 핸들러
async fn get_form(session: Session) -> HttpResponse {
    let token = generate_csrf_token();
    session.insert("csrf_token", token.clone()).unwrap();
    
    HttpResponse::Ok().body(format!(
        r#"<form method="POST" action="/submit">
            <input type="hidden" name="csrf_token" value="{}">
            <button>Submit</button>
        </form>"#,
        token
    ))
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    let secret_key = Key::generate();
    
    HttpServer::new(move || {
        App::new()
            .wrap(SessionMiddleware::new(
                CookieSessionStore::default(),
                secret_key.clone()
            ))
            .route("/form", web::get().to(get_form))
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}

# Rails는 기본적으로 CSRF 보호가 활성화되어 있음
# app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  # CSRF 보호 활성화 (기본값)
  protect_from_forgery with: :exception
  
  # 특정 액션에서 CSRF 보호 건너뛰기
  skip_before_action :verify_authenticity_token, only: [:webhook]
  
  # API 컨트롤러에서는 null_session 사용
  # protect_from_forgery with: :null_session
end

# 뷰에서 CSRF 토큰 사용
# app/views/posts/new.html.erb
<%= form_with model: @post do |form| %>
  <!-- csrf_meta_tags 헬퍼가 자동으로 토큰 추가 -->
  <%= form.text_field :title %>
  <%= form.submit %>
<% end %>

# JavaScript에서 CSRF 토큰 가져오기
# app/javascript/csrf.js
const token = document.querySelector('meta[name="csrf-token"]').content;

fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': token
  },
  body: JSON.stringify({ data: 'test' })
});

<?php
// Laravel도 기본적으로 CSRF 보호 활성화
// app/Http/Middleware/VerifyCsrfToken.php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    // CSRF 보호 제외할 URI
    protected $except = [
        'api/*',
        'webhook/*'
    ];
}

// 블레이드 템플릿에서 사용
// resources/views/form.blade.php
<form method="POST" action="/submit">
    @csrf  <!-- 자동으로 CSRF 토큰 필드 생성 -->
    <input type="text" name="data">
    <button type="submit">전송</button>
</form>

// JavaScript에서 사용
// resources/js/app.js
axios.defaults.headers.common['X-CSRF-TOKEN'] = 
    document.querySelector('meta[name="csrf-token"]').content;

// API 라우트에서 토큰 가져오기
Route::get('/csrf-token', function () {
    return response()->json(['token' => csrf_token()]);
});
?>

보다시피 대부분의 현대적인 프레임워크들은 CSRF 보호를 기본으로 제공해 ㅋㅋ 개발자가 직접 구현할 필요 없이 설정만 잘 해주면 돼. 근데 원리를 이해하는 건 여전히 중요해!

🎓 보안 강화 팁

기본적인 CSRF 토큰만으로는 부족할 때가 있어. 추가적인 보안 레이어를 더하면 더 안전해지지 ㅇㅇ

const express = require('express');
const rateLimit = require('express-rate-limit');

const app = express();

// 1. Rate Limiting
const limiter = rateLimit({
    windowMs: 15 * 60 * 1000, // 15분
    max: 100, // 최대 100개 요청
    message: '너무 많은 요청! 나중에 다시 시도하세요 ㅠㅠ'
});

app.use('/api/', limiter);

// 2. Origin 검증 미들웨어
function verifyOrigin(req, res, next) {
    const allowedOrigins = [
        'https://example.com',
        'https://www.example.com'
    ];
    
    const origin = req.headers.origin || req.headers.referer;
    
    if (!origin || !allowedOrigins.some(allowed => origin.startsWith(allowed))) {
        return res.status(403).json({ 
            error: '허용되지 않은 출처입니다 🚫' 
        });
    }
    
    next();
}

// 3. 커스텀 헤더 검증
function requireCustomHeader(req, res, next) {
    if (!req.headers['x-requested-with']) {
        return res.status(403).json({ 
            error: '필수 헤더가 누락되었습니다' 
        });
    }
    next();
}

// 4. 종합 보안 미들웨어
function comprehensiveSecurity(req, res, next) {
    // CSRF 토큰 검증
    const csrfToken = req.headers['x-csrf-token'];
    if (!csrfToken || csrfToken !== req.session.csrfToken) {
        return res.status(403).json({ error: 'CSRF 검증 실패' });
    }
    
    // Origin 검증
    verifyOrigin(req, res, (err) => {
        if (err) return;
        
        // 커스텀 헤더 검증
        requireCustomHeader(req, res, (err) => {
            if (err) return;
            
            // 모든 검증 통과
            next();
        });
    });
}

// 보호된 라우트
app.post('/api/critical-action', 
    limiter,
    comprehensiveSecurity,
    (req, res) => {
        res.json({ success: true, message: '안전하게 처리됨! 🎉' });
    }
);

📊 성능 최적화

보안도 중요하지만 성능도 무시할 수 없지 ㅋㅋ CSRF 토큰 검증이 병목이 되면 안 되니까!

const NodeCache = require('node-cache');

class OptimizedCSRFManager {
    constructor() {
        // 토큰 캐시 (TTL: 1시간)
        this.tokenCache = new NodeCache({ 
            stdTTL: 3600,
            checkperiod: 120 
        });
        
        // 검증 결과 캐시 (TTL: 5분)
        this.validationCache = new NodeCache({ 
            stdTTL: 300,
            checkperiod: 60 
        });
    }
    
    // 토큰 생성 (캐시 활용)
    generateToken(sessionId) {
        // 캐시에서 기존 토큰 확인
        let token = this.tokenCache.get(sessionId);
        
        if (!token) {
            // 새 토큰 생성
            token = crypto.randomBytes(32).toString('hex');
            this.tokenCache.set(sessionId, token);
            console.log('새 토큰 생성 및 캐싱 ✨');
        } else {
            console.log('캐시된 토큰 사용 ⚡');
        }
        
        return token;
    }
    
    // 토큰 검증 (캐시 활용)
    verifyToken(sessionId, token) {
        // 검증 결과 캐시 키
        const cacheKey = `${sessionId}:${token}`;
        
        // 캐시된 검증 결과 확인
        let isValid = this.validationCache.get(cacheKey);
        
        if (isValid !== undefined) {
            console.log('캐시된 검증 결과 사용 ⚡');
            return isValid;
        }
        
        // 실제 검증 수행
        const storedToken = this.tokenCache.get(sessionId);
        isValid = storedToken === token;
        
        // 검증 결과 캐싱
        this.validationCache.set(cacheKey, isValid);
        console.log('검증 수행 및 결과 캐싱 💾');
        
        return isValid;
    }
    
    // 통계 정보
    getStats() {
        return {
            tokenCacheSize: this.tokenCache.keys().length,
            validationCacheSize: this.validationCache.keys().length,
            tokenCacheHits: this.tokenCache.getStats().hits,
            tokenCacheMisses: this.tokenCache.getStats().misses
        };
    }
}

const csrfManager = new OptimizedCSRFManager();

// 주기적으로 통계 로깅
setInterval(() => {
    console.log('📊 CSRF 캐시 통계:', csrfManager.getStats());
}, 60000); // 1분마다

// 비동기 토큰 검증으로 성능 향상
async function asyncCSRFVerification(req, res, next) {
    const token = req.headers['x-csrf-token'];
    const sessionId = req.session.id;
    
    // Promise로 비동기 검증
    const verificationPromise = new Promise((resolve, reject) => {
        setImmediate(() => {
            try {
                const isValid = csrfManager.verifyToken(sessionId, token);
                resolve(isValid);
            } catch (error) {
                reject(error);
            }
        });
    });
    
    try {
        const isValid = await verificationPromise;
        
        if (!isValid) {
            return res.status(403).json({ error: 'CSRF 검증 실패' });
        }
        
        next();
    } catch (error) {
        console.error('검증 오류:', error);
        res.status(500).json({ error: '서버 오류' });
    }
}

// 배치 검증 (여러 요청 동시 처리)
async function batchVerifyCSRF(requests) {
    const verifications = requests.map(req => ({
        sessionId: req.session.id,
        token: req.headers['x-csrf-token']
    }));
    
    // 병렬 검증
    const results = await Promise.all(
        verifications.map(v => 
            csrfManager.verifyToken(v.sessionId, v.token)
        )
    );
    
    return results;
}

캐싱을 잘 활용하면 성능이 엄청 좋아져 ㅋㅋ 특히 트래픽이 많은 서비스에서는 필수야. 근데 캐시 무효화 전략도 잘 세워야 해!

🧪 테스트 코드 작성

보안 기능은 테스트가 진짜 중요해! CSRF 방어가 제대로 작동하는지 자동화된 테스트로 검증해야 해.

// csrf.test.js
const CSRFTokenManager = require('./csrfTokenManager');
const crypto = require('crypto');

describe('CSRF Token Manager', () => {
    let manager;
    
    beforeEach(() => {
        const secretKey = crypto.randomBytes(32).toString('hex');
        manager = new CSRFTokenManager(secretKey);
    });
    
    test('토큰이 정상적으로 생성되어야 함', () => {
        const sessionId = 'test-session-123';
        const token = manager.generateToken(sessionId);
        
        expect(token).toBeDefined();
        expect(typeof token).toBe('string');
        expect(token.length).toBeGreaterThan(0);
    });
    
    test('유효한 토큰은 검증을 통과해야 함', () => {
        const sessionId = 'test-session-123';
        const token = manager.generateToken(sessionId);
        
        const result = manager.verifyToken(token, sessionId);
        
        expect(result.valid).toBe(true);
    });
    
    test('잘못된 토큰은 검증을 실패해야 함', () => {
        const sessionId = 'test-session-123';
        manager.generateToken(sessionId);
        
        const fakeToken = 'fake-token-12345';
        const result = manager.verifyToken(fakeToken, sessionId);
        
        expect(result.valid).toBe(false);
    });
    
    test('다른 세션의 토큰은 검증을 실패해야 함', () => {
        const sessionId1 = 'session-1';
        const sessionId2 = 'session-2';
        
        const token = manager.generateToken(sessionId1);
        const result = manager.verifyToken(token, sessionId2);
        
        expect(result.valid).toBe(false);
    });
    
    test('만료된 토큰은 검증을 실패해야 함', () => {
        const sessionId = 'test-session-123';
        const token = manager.generateToken(sessionId);
        
        // 시간을 미래로 이동 (1시간 후)
        jest.useFakeTimers();
        jest.advanceTimersByTime(3600000 + 1000);
        
        const result = manager.verifyToken(token, sessionId, 3600000);
        
        expect(result.valid).toBe(false);
        expect(result.reason).toContain('만료');
        
        jest.useRealTimers();
    });
    
    test('동일한 세션에서 여러 토큰 생성 가능', () => {
        const sessionId = 'test-session-123';
        
        const token1 = manager.generateToken(sessionId);
        const token2 = manager.generateToken(sessionId);
        
        expect(token1).not.toBe(token2);
        expect(manager.verifyToken(token1, sessionId).valid).toBe(true);
        expect(manager.verifyToken(token2, sessionId).valid).toBe(true);
    });
});

// integration.test.js
const request = require('supertest');
const app = require('./app');

describe('CSRF Protection Integration Tests', () => {
    let csrfToken;
    let cookies;
    
    // 토큰 가져오기
    beforeEach(async () => {
        const response = await request(app)
            .get('/api/csrf-token')
            .expect(200);
        
        csrfToken = response.body.token;
        cookies = response.headers['set-cookie'];
    });
    
    test('GET 요청은 CSRF 토큰 없이도 성공해야 함', async () => {
        await request(app)
            .get('/api/data')
            .expect(200);
    });
    
    test('POST 요청은 토큰 없이 실패해야 함', async () => {
        await request(app)
            .post('/api/submit')
            .send({ data: 'test' })
            .expect(403);
    });
    
    test('POST 요청은 유효한 토큰과 함께 성공해야 함', async () => {
        await request(app)
            .post('/api/submit')
            .set('Cookie', cookies)
            .set('X-CSRF-Token', csrfToken)
            .send({ data: 'test' })
            .expect(200);
    });
    
    test('잘못된 토큰으로 POST 요청 시 실패해야 함', async () => {
        await request(app)
            .post('/api/submit')
            .set('Cookie', cookies)
            .set('X-CSRF-Token', 'wrong-token')
            .send({ data: 'test' })
            .expect(403);
    });
    
    test('토큰 갱신이 정상 작동해야 함', async () => {
        // 첫 번째 토큰으로 요청
        await request(app)
            .post('/api/submit')
            .set('Cookie', cookies)
            .set('X-CSRF-Token', csrfToken)
            .send({ data: 'test1' })
            .expect(200);
        
        // 새 토큰 받기
        const newResponse = await request(app)
            .get('/api/csrf-token')
            .set('Cookie', cookies)
            .expect(200);
        
        const newToken = newResponse.body.token;
        
        // 새 토큰으로 요청
        await request(app)
            .post('/api/submit')
            .set('Cookie', cookies)
            .set('X-CSRF-Token', newToken)
            .send({ data: 'test2' })
            .expect(200);
    });
});

테스트 코드 작성하면 리팩토링할 때도 안심이 돼 ㅋㅋ 뭔가 바꿨는데 보안이 뚫렸다? 그런 일 없게 해주거든!

🎯 실전 체크리스트

마지막으로 CSRF 방어 구현할 때 꼭 확인해야 할 체크리스트 정리해줄게!

🎬 마무리하며

와 여기까지 읽었으면 진짜 대단한 거야 ㅋㅋㅋ CSRF 방어에 대해 꽤 많이 알게 됐을 거야!

핵심만 다시 정리하면:
1️⃣ CSRF는 사용자 모르게 악의적인 요청을 보내는 공격
2️⃣ 토큰 기반 방어가 가장 효과적
3️⃣ 암호학적으로 안전한 랜덤 토큰 생성 필수
4️⃣ 모든 상태 변경 요청에 토큰 검증 적용
5️⃣ 프레임워크 내장 기능 적극 활용
6️⃣ 다층 방어 전략으로 보안 강화
7️⃣ 테스트와 모니터링 필수!

보안은 한 번 구현하고 끝이 아니야. 지속적으로 업데이트하고 모니터링해야 해. 새로운 공격 기법도 계속 나오니까 말이지 ㅇㅇ

혹시 구현하다가 막히거나 도움이 필요하면 재능넷에서 전문가들의 도움을 받는 것도 좋은 방법이야. 혼자 고민하지 말고 함께 해결해나가자구!

그럼 모두 안전한 코딩 하시길 바래요! 화이팅 🚀✨