웹 애플리케이션 보안은 매우 중요한 주제이며, 개발자는 사용자의 개인정보와 민감한 데이터를 보호하기 위해 적절한 보안 점검을 수행해야 합니다. 이번 글에서는 자바스크립트 fetch API를 사용하여 웹 앱의 보안을 점검하는 방법을 알아보겠습니다.

Fetch API란?

Fetch API는 웹 브라우저의 내장 함수로, AJAX 요청을 보낼 때 사용됩니다. 이 API는 웹 앱이 서버로부터 데이터를 가져오거나 전송할 수 있도록 도와줍니다.

CSRF(Cross-Site Request Forgery) 방어

먼저, 웹 앱의 보안 취약점 중 하나인 CSRF(Cross-Site Request Forgery)를 방어하기 위한 방법에 대해 알아보겠습니다. CSRF 공격은 인증된 사용자가 악의적인 웹 사이트에 접속하여 웹 앱에 피해를 입힐 수 있는 공격입니다.

Anti-CSRF 토큰 사용

여기서는 CSRF 공격을 방어하기 위해 Anti-CSRF 토큰을 사용하는 방법을 소개하겠습니다. Anti-CSRF 토큰은 웹 앱에 의해 생성되며, 모든 폼 요청에 포함되어야 합니다.

// Anti-CSRF 토큰 생성
function generateToken() {
  const token = Math.random().toString(36).substring(2);
  localStorage.setItem('csrfToken', token);
}

// Anti-CSRF 토큰 검증
function validateToken() {
  const storedToken = localStorage.getItem('csrfToken');
  const requestToken = fetch('/api/csrf/token')
    .then(response => response.json())
    .then(data => data.token);
  
  if (storedToken !== requestToken) {
    throw new Error('Invalid CSRF token');
  }
}

위의 코드에서 generateToken 함수는 랜덤한 문자열을 생성하고, localStorage에 Anti-CSRF 토큰을 저장합니다. validateToken 함수는 서버로부터 받아온 Anti-CSRF 토큰과 localStorage에 저장된 토큰을 비교하여 일치하지 않으면 예외를 발생시킵니다.

Fetch API를 활용한 AJAX 요청 보호

웹 앱에서 AJAX 요청을 보낼 때, fetch 함수를 사용하여 보안을 강화할 수 있습니다. API 수준에서 credentials 옵션을 설정하면 쿠키와 같은 사용자 인증 정보가 요청에 포함되어 보안 강화가 가능해집니다.

fetch('/api/endpoint', {
  method: 'POST',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
  // 응답 처리 로직
})
.catch(error => {
  // 오류 처리 로직
});

위의 코드에서 credentials 옵션을 include로 설정하여 보안을 강화하고, headers에 X-Requested-With: XMLHttpRequest 헤더를 추가하여 AJAX 요청임을 명시합니다. 또한, 요청 본문은 JSON.stringify 함수를 사용하여 JSON 형태로 변환합니다.

결론

웹 앱의 보안은 매우 중요한 측면이며, CSRF와 같은 공격을 방어하기 위해 적절한 보안 점검을 수행해야 합니다. 자바스크립트 fetch API를 사용하여 AJAX 요청 보안을 강화하는 방법을 알아보았습니다. 이러한 보안 점검을 통해 사용자의 개인정보와 민감한 데이터를 보호할 수 있습니다.