자바스크립트 fetch API의 보안 관련 이슈

10 Sep 2023

javascript

자바스크립트 fetch API는 웹 개발자들에게 네트워크 요청을 보내고 응답을 받을 수 있는 강력한 도구입니다. 그러나 많은 웹 애플리케이션들이 fetch API를 사용하면서 보안과 관련된 몇 가지 이슈가 발견되었습니다. 이번 글에서는 fetch API의 보안 관련 이슈를 살펴보고, 이를 해결하기 위한 방법들을 알아보겠습니다.

CORS는 웹 브라우저에서 다른 도메인, 포트 또는 프로토콜로 리소스를 요청할 때 발생하는 보안 문제입니다. 보안 상의 이유로 브라우저는 기본적으로 다른 도메인으로의 리소스 요청을 제한합니다. fetch API를 사용할 때, 요청하려는 리소스가 다른 도메인에 있을 경우, 브라우저는 preflight 요청을 보내고 서버로부터 응답을 받아야 합니다.

fetch('https://example.com/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

위의 예제에서 https://example.com/api/data는 다른 도메인에 위치한 리소스입니다. 이렇게 도메인이 다르면 브라우저는 프리플라이트 요청을 보내고 서버로부터 응답을 받아야 하기 때문에, 서버는 요청을 승인해야 합니다.

2. CSRF(Cross-Site Request Forgery)

CSRF는 악의적인 공격자가 희생자의 권한을 이용하여 웹 애플리케이션을 공격하는 기술입니다. 이 기술을 사용하여 공격자는 희생자에게 위조된 요청을 보내게 하여 보안상의 문제를 발생시킬 수 있습니다. fetch API를 사용할 때에도 이러한 CSRF 공격에 취약할 수 있습니다.

한 가지 방법은 요청에 CSRF 토큰을 포함하는 것입니다. 서버는 각 세션에 대한 고유한 토큰을 생성하고 이를 클라이언트에게 제공합니다. 클라이언트는 이 토큰을 요청에 포함시켜 서버에서 유효성을 검증하도록 해야 합니다.

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': 'token',
  },
  body: JSON.stringify({ name: 'John Doe' }),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

위의 예제에서 X-CSRF-Token 헤더를 사용하여 CSRF 토큰을 포함시킵니다.

3. 민감한 데이터 노출

fetch API를 사용할 때 민감한 데이터가 요청 또는 응답에 노출될 수 있습니다. 이는 특히 HTTPS가 제대로 구성되지 않은 환경에서 보안 문제로 이어질 수 있습니다. 따라서 항상 SSL/TLS(HTTPS)를 사용하여 통신하는 것이 중요합니다.

fetch('https://example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ username: 'john', password: 'secret' }),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

위의 예제에서는 로그인 요청 시 사용자의 아이디와 비밀번호가 요청에 담겨 있습니다. 이러한 경우, HTTPS 프로토콜을 사용하여 데이터를 암호화하고 노출을 방지해야 합니다.

결론

fetch API는 강력하고 유연한 도구이지만, 보안과 관련된 몇 가지 이슈를 가지고 있습니다. CORS(Cross-Origin Resource Sharing) 문제, CSRF(Cross-Site Request Forgery) 공격, 민감한 데이터의 노출 등은 개발자들이 주의해야할 중요한 보안 이슈입니다. 이러한 이슈들을 해결하기 위해서 적절한 대응책을 마련하고, 항상 HTTPS 프로토콜을 사용하여 데이터 통신을 보호하는 것이 좋습니다.

1. CORS(Cross-Origin Resource Sharing)

2. CSRF(Cross-Site Request Forgery)

3. 민감한 데이터 노출

결론