React에서 CSRF 공격 방지하기

 

웹 애플리케이션의 보안에서 CSRF(Cross-Site Request Forgery)는 주요한 위협 중 하나로, 사용자의 의지와 무관하게 악의적인 요청을 서버로 전송하도록 유도하는 공격입니다. React 기반 애플리케이션에서 CSRF를 효과적으로 방지하기 위해 필요한 개념과 구현 방법을 단계별로 살펴보겠습니다.

CSRF란 무엇인가?

CSRF는 인증된 사용자를 대상으로 공격자가 악의적인 요청을 수행하도록 만드는 공격입니다. 이를 통해 공격자는 사용자가 의도하지 않은 동작(예: 계정 변경, 데이터 삭제)을 서버에서 수행할 수 있습니다. 이 공격은 특히 사용자가 이미 로그인된 상태일 때 심각한 보안 문제를 야기합니다.

CSRF 공격의 동작 원리

1. 사용자가 신뢰할 수 있는 애플리케이션에 로그인합니다.
2. 공격자가 악성 웹 페이지 또는 링크를 사용해 CSRF 공격을 시도합니다.
3. 사용자가 공격자가 유도한 페이지에 접근하면 브라우저는 인증 쿠키를 자동으로 포함하여 서버에 요청을 보냅니다.
4. 서버는 요청의 출처를 확인하지 않으면 공격이 성공합니다.

CSRF 방지를 위한 주요 방법

React 애플리케이션에서 CSRF를 방지하려면 다음과 같은 보안 기술을 활용해야 합니다:

1. CSRF 토큰 사용
2. SameSite 쿠키 설정
3. Referrer Header 확인
4. CORS 정책 설정

아래에서 각각의 방법을 자세히 살펴보고 React 애플리케이션에서 어떻게 적용할 수 있는지 알아보겠습니다.

1. CSRF 토큰 사용

CSRF 토큰은 클라이언트와 서버 간 요청의 정당성을 검증하는 데 사용됩니다. 서버는 각 요청에 대해 고유한 CSRF 토큰을 생성하고, 클라이언트는 이를 포함하여 요청을 보냅니다. 서버는 받은 토큰이 유효한지 확인하여 요청을 처리합니다.

CSRF 토큰 구현 방법

서버 측에서 CSRF 토큰 생성

Node.js와 Express를 사용하는 예를 들어 보겠습니다:

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

const app = express();
app.use(cookieParser());
app.use(csrf({ cookie: true }));

app.get('/csrf-token', (req, res) => {
  res.json({ csrfToken: req.csrfToken() });
});

위 코드에서는 csurf 미들웨어를 사용하여 CSRF 토큰을 생성하고, 이를 클라이언트에 전송합니다.

클라이언트에서 CSRF 토큰 전송

React에서 CSRF 토큰을 포함한 요청을 보내는 방법은 다음과 같습니다:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [csrfToken, setCsrfToken] = useState('');

  useEffect(() => {
    axios.get('/csrf-token').then((response) => {
      setCsrfToken(response.data.csrfToken);
    });
  }, []);

  const handleSubmit = async () => {
    await axios.post(
      '/api/secure-endpoint',
      { data: 'example' },
      { headers: { 'X-CSRF-Token': csrfToken } }
    );
  };

  return <button onClick={handleSubmit}>Send Secure Request</button>;
};

export default MyComponent;

위 코드는 서버에서 받은 CSRF 토큰을 요청 헤더에 포함하여 전송하는 방식입니다.

2. SameSite 쿠키 설정

SameSite 쿠키 속성은 브라우저가 쿠키를 전송하는 조건을 제한하여 CSRF 공격을 방지합니다. Strict 또는 Lax로 설정하면 다른 도메인에서의 요청 시 쿠키가 전송되지 않습니다.

SameSite 설정 방법

서버에서 쿠키를 설정할 때 다음과 같이 SameSite 속성을 추가합니다:

app.use(cookieParser());
app.use(
  session({
    secret: 'your-secret-key',
    resave: false,
    saveUninitialized: true,
    cookie: {
      httpOnly: true,
      secure: true,
      sameSite: 'Strict',
    },
  })
);

이 설정은 CSRF 공격 방지뿐만 아니라 세션 보안성을 높이는 데도 효과적입니다.

3. Referrer Header 확인

Referrer Header를 확인하여 요청이 신뢰할 수 있는 출처에서 발생했는지 검증할 수 있습니다. Referrer 검증은 추가적인 보안 계층을 제공합니다.

Referrer 검증 구현

Express 서버에서 Referrer 헤더를 확인하는 간단한 예는 다음과 같습니다:

app.post('/api/secure-endpoint', (req, res) => {
  const referrer = req.get('Referrer');
  if (!referrer || !referrer.startsWith('https://your-domain.com')) {
    return res.status(403).send('Forbidden');
  }

  // 요청 처리
  res.send('Request is valid');
});

이 방법은 CSRF 토큰 사용과 함께 적용하면 더욱 강력한 보안을 제공합니다.

4. CORS 정책 설정

CORS(Cross-Origin Resource Sharing) 정책을 적절히 설정하면 신뢰할 수 없는 도메인에서의 요청을 차단할 수 있습니다.

CORS 설정 방법

cors 패키지를 사용하여 특정 출처만 허용하도록 설정합니다:

const cors = require('cors');

app.use(
  cors({
    origin: 'https://your-domain.com',
    methods: ['GET', 'POST'],
    credentials: true,
  })
);

CORS는 서버와 클라이언트 간 신뢰를 구축하는 데 중요한 역할을 합니다.

React 애플리케이션에서 보안 모범 사례

React 애플리케이션에서 CSRF 공격을 방지하기 위해 다음 모범 사례를 따르세요:

1. CSRF 토큰을 모든 상태 변경 요청에 포함합니다.
2. SameSite 쿠키와 Secure 플래그를 항상 활성화합니다.
3. Referrer 헤더 검증을 추가적으로 활용합니다.
4. CORS 정책을 엄격하게 설정합니다.

마치며

CSRF는 무시할 수 없는 보안 위협이지만, 적절한 예방 조치를 통해 효과적으로 방어할 수 있습니다. React 애플리케이션에서 위의 방법들을 구현하면 보안 수준을 한층 높일 수 있습니다. 안정적이고 신뢰할 수 있는 애플리케이션을 개발하기 위해 보안에 대한 노력을 지속적으로 강화하세요.