Learn Token, XSS & CSRF

Index

Token
XSS
CSRF

intro

참고
https://velog.io/@creyon0215/2023.-4.-19

React는 웹 애플리케이션의 구축을 위한 자바스크립트 라이브러리로 보안 문제(특히 로그인-액세스 토큰부터)를 충분히 고려해야 한다. 보안 문제의 해결책은 다양하지만 그중에서도 널리 쓰이는 것이 token이라 할 수 있으며 XSS, CSRF는 여기서 빈번하게 발생하는 문제 중 하나다.

Token

Token은 인증(authentication)을 위한 중요한 요소 중 하나로 React 애플리케이션에서는 토큰을 사용하여 사용자가 인증된 사용자인지 확인한다. 토큰은 서버에서 발급되며, 사용자가 로그인하면 토큰을 클라이언트(브라우저)에 저장합니다. 그 후, 사용자의 모든 요청(request)에서 토큰을 함께 보내서 인증을 유지한다.

이를 적용하는 간단한 예시 코드

import axios from 'axios';

// 로그인 후 서버에서 받은 토큰을 localStorage에 저장
localStorage.setItem('token', token);

// 모든 요청에서 토큰을 함께 보내서 인증을 유지
axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

XSS

XSS(Cross-Site Scripting)는 웹 애플리케이션의 보안 취약점 중 하나로, 악의적인 사용자가 스크립트를 삽입하여 다른 사용자의 정보를 탈취하는 공격이다. React 애플리케이션에서는 사용자가 입력한 데이터를 안전하게 처리해야 한다. 이를 위해 React는 JSX 문법을 사용하며, JSX는 입력한 데이터를 자동으로 이스케이프(escape)한다.

간단한 예시 코드를 살펴보면

function Comment({ text }) {
  return (
    <div>
      {text}
    </div>
  );
}

const commentText = '<script>alert("XSS!");</script>';
<Comment text={commentText} /> // 출력 결과: <div>&lt;script&gt;alert("XSS!");&lt;/script&gt;</div>

CSRF

CSRF(Cross-Site Request Forgery)는 웹 애플리케이션의 보안 취약점 중 하나로, 인증된 사용자의 권한을 도용하여 악의적인 요청을 보내는 공격이다. React 애플리케이션에서는 CSRF를 방지하기 위해 보안 토큰을 사용한다. 보안 토큰은 서버에서 발급되며, 모든 요청에서 함께 보내서 인증을 확인한다.

import axios from 'axios';

// 서버에서 발급받은 보안 토큰을 cookie에 저장
document.cookie = `csrfToken=${csrfToken}; Secure`;

// 모든 요청에서 보안 토큰을 함께 보내서 인증을 확인
axios.interceptors.request.use((config) => {
  const csrfToken = getCookie('csrfToken');
  config.headers['X-CSRF-Token'] = csrfToken;
  return config;
});

// 보안 토큰을 추출하는 함수
function getCookie(name) {
  const cookieValue = document.cookie.match(`(^|;)\\s*${name}\\s*=\\s*([^;]+)`);
  return cookieValue ? cookieValue[2] : null;
}

위의 코드에서는 서버에서 발급받은 보안 토큰을 cookie에 저장하고, 모든 요청에서 보안 토큰을 함께 보내서 인증을 확인하도록 설정했으며 또한 보안 토큰을 추출하는 함수도 함께 구현되었다.

이렇게 함으로써 React 애플리케이션에서 CSRF 공격을 예방할 수 있게 된다.