🛡️ XSS 공격 방어 기법: 실전 코드로 배우기

1️⃣ 입력값 검증 및 새니타이제이션(Sanitization)

첫 번째 방어선은 사용자 입력을 절대 믿지 않는 것이야! 🙅‍♂️
모든 입력값을 검증하고 위험한 문자를 제거하거나 이스케이프 처리해야 해.

// HTML 특수문자 이스케이프 함수
function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&")
    .replace(/</g, "<")
    .replace(/>/g, ">")
    .replace(/"/g, """)
    .replace(/'/g, "'");
}

// 사용 예시
const userInput = '<script>alert("XSS")</script>';
const safeOutput = escapeHtml(userInput);
document.getElementById('output').textContent = safeOutput;

// 결과: <script>alert("XSS")</script> (문자열로 표시됨)

이렇게 하면 <나 > 같은 HTML 태그 문자가 실제 태그로 해석되지 않고 그냥 텍스트로 보이게 돼!

2️⃣ innerHTML 대신 textContent 사용하기

이거 진짜 중요해! innerHTML은 HTML을 파싱해서 실행하지만,
textContent는 순수 텍스트로만 처리해서 훨씬 안전해. 🔒

// 🚫 나쁜 예시 - XSS 취약점!
const userComment = getUserInput();
document.getElementById('comment').innerHTML = userComment;

// 해커가 이런 걸 입력하면?
// <img src=x onerror="alert('해킹당했어요!')">

// ✅ 좋은 예시 - 안전!
const userComment = getUserInput();
document.getElementById('comment').textContent = userComment;

// 또는 더 안전하게
const commentElement = document.createElement('div');
commentElement.textContent = userComment;
document.getElementById('comments').appendChild(commentElement);

3️⃣ DOMPurify 라이브러리 활용

만약 사용자가 입력한 HTML을 꼭 렌더링해야 한다면? (예: 위지윅 에디터)
그럴 땐 DOMPurify 같은 검증된 라이브러리를 써야 해! 💎

// DOMPurify 설치: npm install dompurify

import DOMPurify from 'dompurify';

// 사용자 입력 (HTML 포함)
const dirtyHTML = '<p>안전한 내용</p><script>alert("XSS")</script>';

// DOMPurify로 정화
const cleanHTML = DOMPurify.sanitize(dirtyHTML);

// 결과: <p>안전한 내용</p> (script 태그는 제거됨!)
document.getElementById('content').innerHTML = cleanHTML;

DOMPurify는 화이트리스트 방식으로 안전한 태그만 허용하고 나머지는 다 제거해줘.
React나 Vue 같은 프레임워크에서도 완벽하게 작동하니까 꼭 써봐! 👍

4️⃣ Content Security Policy (CSP) 설정

CSP는 브라우저에게 어떤 리소스를 실행할 수 있는지 알려주는 보안 정책이야.
HTTP 헤더로 설정하면 인라인 스크립트 실행을 막을 수 있어!

// Express.js에서 CSP 설정
const helmet = require('helmet');

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "'unsafe-inline'"], // 가능하면 unsafe-inline 제거!
      styleSrc: ["'self'", "'unsafe-inline'"],
      imgSrc: ["'self'", "data:", "https:"],
      connectSrc: ["'self'"],
      fontSrc: ["'self'"],
      objectSrc: ["'none'"],
      mediaSrc: ["'self'"],
      frameSrc: ["'none'"],
    },
  })
);

// 또는 HTML meta 태그로 설정
// <meta http-equiv="Content-Security-Policy" 
//       content="default-src 'self'; script-src 'self'">

이렇게 설정하면 외부 도메인에서 로드된 스크립트는 실행이 차단돼!
XSS 공격이 성공하더라도 악성 스크립트가 실행되지 않는 거지. 🎯

5️⃣ HttpOnly 및 Secure 쿠키 플래그 사용

쿠키 탈취를 막으려면 쿠키 설정도 중요해!

// Node.js Express에서 안전한 쿠키 설정
res.cookie('sessionId', sessionToken, {
  httpOnly: true,    // JavaScript로 접근 불가
  secure: true,      // HTTPS에서만 전송
  sameSite: 'strict', // CSRF 방어
  maxAge: 3600000    // 1시간
});

// 이렇게 설정하면 document.cookie로 접근 불가!
// XSS 공격으로도 쿠키를 훔칠 수 없어

⚔️ CSRF(Cross-Site Request Forgery) 공격: 위조된 요청의 함정

📌 CSRF가 뭐길래 이렇게 위험해?

CSRF는 사용자가 의도하지 않은 요청을 강제로 실행시키는 공격이야.
쉽게 말하면, 너가 로그인한 상태에서 해커가 만든 함정에 걸려서
자기도 모르게 돈을 송금하거나 비밀번호를 바꾸는 거지! 😱

XSS는 악성 스크립트를 주입하는 거라면,
CSRF는 정상적인 사용자의 권한을 도용해서 나쁜 짓을 하는 거야.

🎭 CSRF 공격 시나리오

<!-- 해커가 만든 악성 HTML -->
<form action="https://bank.com/transfer" method="POST" id="evilForm">
  <input type="hidden" name="to" value="해커계좌번호">
  <input type="hidden" name="amount" value="1000000">
</form>

<script>
  // 페이지 로드되자마자 자동 제출!
  document.getElementById('evilForm').submit();
</script>

4단계: 자동으로 송금 요청 전송
→ 브라우저가 자동으로 세션 쿠키를 포함해서 요청을 보냄
→ 은행 서버는 정상적인 요청으로 인식하고 송금 처리! 💸

이게 바로 CSRF의 무서운 점이야.
사용자는 아무것도 안 했는데 돈이 빠져나가는 거지!

🛡️ CSRF 공격 방어 기법

1️⃣ CSRF 토큰 사용 (가장 효과적!)

CSRF 토큰은 각 요청마다 고유한 랜덤 값을 생성해서
서버가 정당한 요청인지 검증하는 방법이야. 🎫

// 1. CSRF 토큰 미들웨어 설치
// npm install csurf

const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });

// 2. 폼 렌더링 시 토큰 생성
app.get('/transfer', csrfProtection, (req, res) => {
  res.render('transfer', { 
    csrfToken: req.csrfToken() 
  });
});

// 3. HTML 폼에 토큰 포함
// <form action="/transfer" method="POST">
//   <input type="hidden" name="_csrf" value="{{csrfToken}}">
//   <input type="text" name="to" placeholder="받는 사람">
//   <input type="number" name="amount" placeholder="금액">
//   <button type="submit">송금하기</button>
// </form>

// 4. POST 요청 처리 시 토큰 검증
app.post('/transfer', csrfProtection, (req, res) => {
  // 토큰이 유효하면 이 코드가 실행됨
  // 토큰이 없거나 잘못되면 자동으로 403 에러 발생!
  
  const { to, amount } = req.body;
  // 송금 처리...
  res.send('송금 완료!');
});

이렇게 하면 해커가 만든 피싱 사이트에서는 유효한 CSRF 토큰을 알 수 없으니까
요청이 차단되는 거야! 완벽한 방어법이지? 😎

2️⃣ SameSite 쿠키 속성 설정

SameSite 속성은 쿠키가 크로스 사이트 요청에 포함되지 않도록 막아줘.

// SameSite 쿠키 설정
res.cookie('sessionId', sessionToken, {
  httpOnly: true,
  secure: true,
  sameSite: 'strict', // 또는 'lax'
  maxAge: 3600000
});

// sameSite 옵션 설명:
// - 'strict': 완전히 차단 (가장 안전하지만 불편할 수 있음)
// - 'lax': GET 요청만 허용 (일반적으로 권장)
// - 'none': 모든 요청 허용 (보안 취약, 비추천)

3️⃣ Referer 헤더 검증

요청이 어디서 왔는지 확인하는 방법이야.
하지만 이 방법은 보조 수단으로만 써야 해! (Referer는 조작 가능하거든)

// Referer 헤더 검증 미들웨어
function checkReferer(req, res, next) {
  const referer = req.get('Referer');
  const allowedDomains = ['https://mysite.com', 'https://www.mysite.com'];
  
  if (!referer) {
    return res.status(403).send('Referer 헤더가 없습니다.');
  }
  
  const isAllowed = allowedDomains.some(domain => 
    referer.startsWith(domain)
  );
  
  if (!isAllowed) {
    return res.status(403).send('허용되지 않은 도메인입니다.');
  }
  
  next();
}

// 사용
app.post('/transfer', checkReferer, (req, res) => {
  // 송금 처리...
});

4️⃣ Double Submit Cookie 패턴

CSRF 토큰을 쿠키와 요청 파라미터 양쪽에 넣어서 비교하는 방법이야.
서버에 토큰을 저장하지 않아도 돼서 stateless 환경에 좋아!

// Double Submit Cookie 구현
const crypto = require('crypto');

// 1. 토큰 생성 및 쿠키 설정
app.get('/form', (req, res) => {
  const csrfToken = crypto.randomBytes(32).toString('hex');
  
  res.cookie('csrf-token', csrfToken, {
    httpOnly: false, // JavaScript에서 읽을 수 있어야 함
    secure: true,
    sameSite: 'strict'
  });
  
  res.render('form', { csrfToken });
});

// 2. 클라이언트에서 요청 시 토큰 포함
// fetch('/api/transfer', {
//   method: 'POST',
//   headers: {
//     'X-CSRF-Token': getCookie('csrf-token'),
//     'Content-Type': 'application/json'
//   },
//   body: JSON.stringify({ to: '계좌번호', amount: 10000 })
// });

// 3. 서버에서 검증
function validateDoubleSubmitCookie(req, res, next) {
  const cookieToken = req.cookies['csrf-token'];
  const headerToken = req.get('X-CSRF-Token');
  
  if (!cookieToken || !headerToken || cookieToken !== headerToken) {
    return res.status(403).send('CSRF 토큰 불일치!');
  }
  
  next();
}

app.post('/api/transfer', validateDoubleSubmitCookie, (req, res) => {
  // 송금 처리...
});

5️⃣ 커스텀 헤더 사용 (AJAX 요청)

AJAX 요청에는 커스텀 헤더를 추가하는 방법도 효과적이야!
브라우저의 Same-Origin Policy 때문에 외부 사이트에서는 커스텀 헤더를 추가할 수 없거든.

// 클라이언트 (React 예시)
const transferMoney = async (to, amount) => {
  try {
    const response = await fetch('/api/transfer', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest', // 커스텀 헤더
        'X-Custom-Header': 'MySecretValue'
      },
      credentials: 'include', // 쿠키 포함
      body: JSON.stringify({ to, amount })
    });
    
    if (response.ok) {
      alert('송금 완료!');
    }
  } catch (error) {
    console.error('송금 실패:', error);
  }
};

// 서버 (Express.js)
app.post('/api/transfer', (req, res) => {
  // 커스텀 헤더 검증
  const customHeader = req.get('X-Requested-With');
  
  if (customHeader !== 'XMLHttpRequest') {
    return res.status(403).send('유효하지 않은 요청입니다.');
  }
  
  // 송금 처리...
  res.json({ success: true });
});

🔐 추가 보안 Best Practices

1️⃣ HTTPS 사용 필수!

이건 진짜 기본 중의 기본이야! 🔒
HTTP는 평문으로 데이터를 전송하기 때문에 중간에서 가로채기 쉬워.
HTTPS를 쓰면 데이터가 암호화되어서 안전하게 전송돼.

2️⃣ 입력값 길이 제한

너무 긴 입력값은 그 자체로 공격 벡터가 될 수 있어.

// 프론트엔드 검증
function validateInput(input, maxLength = 200) {
  if (input.length > maxLength) {
    throw new Error(`입력값은 ${maxLength}자를 초과할 수 없습니다.`);
  }
  
  // 위험한 패턴 검사
  const dangerousPatterns = [
    /<script/i,
    /javascript:/i,
    /on\w+=/i, // onclick, onerror 등
    /<iframe/i
  ];
  
  for (const pattern of dangerousPatterns) {
    if (pattern.test(input)) {
      throw new Error('허용되지 않는 문자가 포함되어 있습니다.');
    }
  }
  
  return true;
}

// 백엔드에서도 반드시 재검증!
app.post('/comment', (req, res) => {
  const { comment } = req.body;
  
  if (!comment || comment.length > 500) {
    return res.status(400).send('유효하지 않은 댓글입니다.');
  }
  
  // 추가 검증 및 저장...
});

3️⃣ Rate Limiting (속도 제한)

같은 IP에서 너무 많은 요청이 오면 차단하는 거야.
브루트 포스 공격이나 자동화된 공격을 막을 수 있어! 🚦

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

// API 요청 제한
const apiLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15분
  max: 100, // 최대 100번 요청
  message: '너무 많은 요청을 보냈습니다. 잠시 후 다시 시도해주세요.',
  standardHeaders: true,
  legacyHeaders: false,
});

// 로그인 요청 제한 (더 엄격하게)
const loginLimiter = rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 5, // 15분에 5번만 허용
  skipSuccessfulRequests: true, // 성공한 요청은 카운트 안 함
});

app.use('/api/', apiLimiter);
app.post('/login', loginLimiter, (req, res) => {
  // 로그인 처리...
});

4️⃣ 보안 헤더 설정

Helmet.js를 쓰면 여러 보안 헤더를 한 번에 설정할 수 있어!

const helmet = require('helmet');

app.use(helmet({
  // Content Security Policy
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "trusted-cdn.com"],
      styleSrc: ["'self'", "'unsafe-inline'"],
      imgSrc: ["'self'", "data:", "https:"],
    },
  },
  
  // X-Frame-Options (클릭재킹 방지)
  frameguard: { action: 'deny' },
  
  // X-Content-Type-Options
  noSniff: true,
  
  // Strict-Transport-Security (HTTPS 강제)
  hsts: {
    maxAge: 31536000,
    includeSubDomains: true,
    preload: true
  },
  
  // X-XSS-Protection
  xssFilter: true,
}));

5️⃣ 정기적인 의존성 업데이트

npm 패키지에도 보안 취약점이 있을 수 있어!
정기적으로 업데이트하고 취약점을 체크해야 해. 🔍

# npm audit으로 취약점 검사
npm audit

# 자동으로 수정 가능한 취약점 패치
npm audit fix

# 강제로 메이저 버전 업데이트 (주의 필요!)
npm audit fix --force

# Snyk 같은 도구 사용
npm install -g snyk
snyk test
snyk wizard

🧪 실전 테스트: 보안 취약점 찾기

🔬 XSS 취약점 테스트 방법

자신의 웹사이트에 XSS 취약점이 있는지 테스트해보자!
(절대 다른 사람 사이트에서 테스트하면 안 돼! 불법이야! ⚖️)

// 기본 테스트
<script>alert('XSS')</script>

// 이미지 태그 활용
<img src=x onerror=alert('XSS')>

// SVG 활용
<svg onload=alert('XSS')>

// 대소문자 우회
<ScRiPt>alert('XSS')</sCrIpT>

// 인코딩 우회
<script>alert(String.fromCharCode(88,83,83))</script>

// 이벤트 핸들러
<body onload=alert('XSS')>
<input onfocus=alert('XSS') autofocus>

// JavaScript URI
<a href="javascript:alert('XSS')">클릭</a>

// DOM-based XSS 테스트
#<img src=x onerror=alert('XSS')>

🔬 CSRF 취약점 테스트 방법

CSRF 취약점을 테스트하려면 간단한 HTML 파일을 만들어봐.

<!-- csrf-test.html -->
<!DOCTYPE html>
<html>
<head>
  <title>CSRF 테스트</title>
</head>
<body>
  <h1>CSRF 취약점 테스트</h1>
  
  <!-- 자동 제출 폼 -->
  <form action="http://localhost:3000/api/delete-account" 
        method="POST" 
        id="csrfForm">
    <input type="hidden" name="confirm" value="yes">
  </form>
  
  <script>
    // 페이지 로드 시 자동 제출
    window.onload = function() {
      document.getElementById('csrfForm').submit();
    };
  </script>
  
  <p>만약 계정이 삭제되면 CSRF 취약점이 있는 것입니다!</p>
</body>
</html>

이 파일을 열었을 때 실제로 계정이 삭제되면 CSRF 방어가 안 되어 있는 거야!
제대로 방어되어 있다면 403 에러나 토큰 불일치 에러가 나야 해. ✅

🛠️ 보안 테스트 도구

🎓 프레임워크별 보안 가이드

⚛️ React 보안 Best Practices

React는 기본적으로 XSS를 방어해주지만, 조심해야 할 부분이 있어!

// 🚫 위험! dangerouslySetInnerHTML 사용
function Comment({ html }) {
  return (
    <div dangerouslySetInnerHTML={{ __html: html }} />
  );
}

// ✅ 안전한 방법 1: 텍스트로 렌더링
function Comment({ text }) {
  return <div>{text}</div>;
}

// ✅ 안전한 방법 2: DOMPurify 사용
import DOMPurify from 'dompurify';

function Comment({ html }) {
  const cleanHTML = DOMPurify.sanitize(html);
  return (
    <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />
  );
}

// Axios 인터셉터로 CSRF 토큰 자동 추가
import axios from 'axios';

// CSRF 토큰 가져오기
function getCsrfToken() {
  return document.querySelector('meta[name="csrf-token"]')?.content;
}

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

// 요청 인터셉터
api.interceptors.request.use(config => {
  const token = getCsrfToken();
  if (token) {
    config.headers['X-CSRF-Token'] = token;
  }
  return config;
});

// 사용
const transferMoney = async (to, amount) => {
  try {
    const response = await api.post('/transfer', { to, amount });
    console.log('송금 성공:', response.data);
  } catch (error) {
    console.error('송금 실패:', error);
  }
};

🟢 Vue.js 보안 Best Practices

Vue도 React처럼 기본적으로 안전하지만, v-html 디렉티브는 조심해야 해!

<!-- 🚫 위험! v-html 사용 -->
<div v-html="userInput"></div>

<!-- ✅ 안전! 텍스트 보간 -->
<div>{{ userInput }}</div>

<!-- ✅ 안전! DOMPurify 사용 -->
<template>
  <div v-html="sanitizedHTML"></div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      userInput: '<script>alert("XSS")</script>'
    };
  },
  computed: {
    sanitizedHTML() {
      return DOMPurify.sanitize(this.userInput);
    }
  }
};
</script>

🅰️ Angular 보안 Best Practices

Angular는 보안 기능이 가장 강력해! 자동으로 새니타이제이션을 해줘.

// Angular의 DomSanitizer 사용
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-comment',
  template: `
    <!-- 자동으로 새니타이즈됨 -->
    <div [innerHTML]="userInput"></div>
    
    <!-- 신뢰할 수 있는 HTML (주의해서 사용!) -->
    <div [innerHTML]="trustedHTML"></div>
  `
})
export class CommentComponent {
  userInput = '<script>alert("XSS")</script>'; // 자동 차단됨
  trustedHTML: SafeHtml;
  
  constructor(private sanitizer: DomSanitizer) {
    // 정말 신뢰할 수 있는 HTML만 이렇게 처리
    this.trustedHTML = this.sanitizer.bypassSecurityTrustHtml(
      '<p>안전한 HTML</p>'
    );
  }
}

🟩 Node.js/Express 보안 체크리스트

// 완벽한 Express 보안 설정 예시
const express = require('express');
const helmet = require('helmet');
const cors = require('cors');
const rateLimit = require('express-rate-limit');
const csrf = require('csurf');
const cookieParser = require('cookie-parser');
const { body, validationResult } = require('express-validator');

const app = express();

// 1. Helmet으로 보안 헤더 설정
app.use(helmet());

// 2. CORS 설정
app.use(cors({
  origin: 'https://yourdomain.com',
  credentials: true
}));

// 3. Rate limiting
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 100
});
app.use('/api/', limiter);

// 4. Body parser
app.use(express.json({ limit: '10kb' })); // 요청 크기 제한
app.use(express.urlencoded({ extended: true, limit: '10kb' }));
app.use(cookieParser());

// 5. CSRF 보호
const csrfProtection = csrf({ cookie: true });

// 6. 입력값 검증 미들웨어
const validateTransfer = [
  body('to').isLength({ min: 10, max: 20 }).trim().escape(),
  body('amount').isInt({ min: 1, max: 1000000 }),
  (req, res, next) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }
    next();
  }
];

// 7. 라우트 설정
app.post('/api/transfer', 
  csrfProtection, 
  validateTransfer, 
  async (req, res) => {
    try {
      const { to, amount } = req.body;
      // 송금 로직...
      res.json({ success: true });
    } catch (error) {
      res.status(500).json({ error: '서버 오류' });
    }
  }
);

// 8. 에러 핸들러
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('서버 오류가 발생했습니다.');
});

// 9. HTTPS 리다이렉트 (production)
if (process.env.NODE_ENV === 'production') {
  app.use((req, res, next) => {
    if (req.header('x-forwarded-proto') !== 'https') {
      res.redirect(`https://${req.header('host')}${req.url}`);
    } else {
      next();
    }
  });
}

app.listen(3000, () => {
  console.log('서버 시작! 보안 설정 완료 ✅');
});

🎯 마무리: 보안은 선택이 아닌 필수!

자, 여기까지 JavaScript 보안에 대해 엄청 많은 걸 배웠어! 😅
XSS, CSRF 공격부터 시작해서 실전 방어 기법, 프레임워크별 보안 설정,
그리고 완전한 보안 로그인 시스템까지 만들어봤잖아?

솔직히 처음엔 복잡해 보일 수 있어.
"이걸 다 해야 해?" 싶을 수도 있고.
하지만 한 번 제대로 익혀두면 평생 써먹을 수 있는 스킬이야! 💪

💡 실무에서 기억해야 할 것들

🚀 다음 단계로 나아가기

이제 너는 JavaScript 보안의 기초를 탄탄하게 다졌어!
다음 단계로는 이런 것들을 공부해보면 좋아:

🌟 마지막 조언

보안은 무섭거나 어려운 게 아니야.
그냥 사용자를 보호하고 싶은 마음에서 시작하는 거야. ❤️

너가 만든 웹사이트를 사용하는 사람들이
안전하게 서비스를 이용할 수 있도록 하는 것.
그게 바로 개발자의 책임이자 자부심이지!

재능넷 같은 플랫폼에서 프로젝트를 진행할 때도,
"저는 보안을 중요하게 생각하는 개발자입니다"라고 말할 수 있다면
클라이언트의 신뢰를 얻을 수 있을 거야. 💼

자, 이제 나가서 안전한 웹을 만들어보자!
화이팅! 🚀✨