Express.js에서 XSS 및 CSRF 방어 구현하기

const express = require('express');
const helmet = require('helmet');
const csrf = require('csurf');
const cookieParser = require('cookie-parser');
const { body, validationResult } = require('express-validator');
const xss = require('xss');

const app = express();

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

// Helmet을 사용한 보안 헤더 설정
app.use(helmet());

// CSRF 보호 미들웨어
const csrfProtection = csrf({ cookie: true });

// XSS 방어를 위한 입력값 검증 및 살균 미들웨어
const validateAndSanitize = (req, res, next) => {
  // 요청 본문의 모든 문자열 값에 XSS 필터 적용
  const sanitizeRecursively = (obj) => {
    if (!obj) return obj;
    
    if (typeof obj === 'string') {
      return xss(obj);
    }
    
    if (typeof obj === 'object') {
      for (const key in obj) {
        obj[key] = sanitizeRecursively(obj[key]);
      }
    }
    
    return obj;
  };
  
  req.body = sanitizeRecursively(req.body);
  next();
};

// 폼 렌더링 라우트
app.get('/form', csrfProtection, (req, res) => {
  res.send(`
    <form action="/submit" method="post">
      <input type="hidden" name="_csrf" value="${req.csrfToken()}">
      <input type="text" name="username" placeholder="사용자 이름">
      <textarea name="comment" placeholder="댓글을 입력하세요"></textarea>
      <button type="submit">제출</button>
    </form>
  `);
});

// 폼 제출 처리 라우트
app.post('/submit', 
  csrfProtection,
  validateAndSanitize,
  [
    body('username').trim().isLength({ min: 2, max: 50 }).escape(),
    body('comment').trim().isLength({ min: 1 }).escape()
  ],
  (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }
    
    // 여기서 안전하게 처리된 데이터로 작업 수행
    const { username, comment } = req.body;
    
    // 데이터베이스에 저장하는 등의 작업...
    
    res.send('댓글이 안전하게 저장되었습니다!');
  }
);

app.listen(3000, () => {
  console.log('서버가 포트 3000에서 실행 중입니다');
});

이 코드는 Helmet, CSRF 토큰, 입력값 검증 및 이스케이프 등 여러 보안 계층을 구현하고 있어요!

React + Spring Boot 조합에서의 보안 구현

Spring Boot 서버 측 (Java)

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
            .and()
            .headers()
                .contentSecurityPolicy("default-src 'self'; script-src 'self' https://trusted-cdn.com; " +
                                      "style-src 'self' https://trusted-cdn.com; img-src 'self' data: https://trusted-cdn.com")
            .and()
            .frameOptions().deny()
            .and()
            .authorizeRequests()
                .antMatchers("/api/public/**").permitAll()
                .anyRequest().authenticated();
    }
    
    @Bean
    public HttpFirewall allowUrlEncodedSlashHttpFirewall() {
        StrictHttpFirewall firewall = new StrictHttpFirewall();
        firewall.setAllowUrlEncodedSlash(true);
        firewall.setAllowSemicolon(false);
        return firewall;
    }
}

React 클라이언트 측 (JavaScript)

// API 요청을 처리하는 서비스
import axios from 'axios';

// CSRF 토큰을 자동으로 포함하는 axios 인스턴스 생성
const api = axios.create({
  baseURL: '/api',
  withCredentials: true  // 쿠키 포함
});

// 요청 인터셉터를 사용하여 CSRF 토큰 추가
api.interceptors.request.use(config => {
  // 쿠키에서 CSRF 토큰 추출
  const token = document.cookie
    .split('; ')
    .find(row => row.startsWith('XSRF-TOKEN='))
    ?.split('=')[1];
  
  if (token) {
    config.headers['X-XSRF-TOKEN'] = token;
  }
  
  return config;
});

// 안전한 폼 컴포넌트 예시
function CommentForm() {
  const [comment, setComment] = useState('');
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      await api.post('/comments', { text: comment });
      setComment('');
      alert('댓글이 등록되었습니다!');
    } catch (error) {
      console.error('댓글 등록 실패:', error);
      alert('댓글 등록에 실패했습니다.');
    }
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={comment}
        onChange={(e) => setComment(e.target.value)}
        placeholder="댓글을 입력하세요"
      />
      <button type="submit">등록</button>
    </form>
  );
}

Spring Security와 React를 함께 사용하면 강력한 보안 시스템을 구축할 수 있어요!