XSS 공격은 왜 하는 거니? 와라 튕겨줄께

웹 개발자라면 보안도 신경써야하기에 한번쯤이면 XSS 공격, CSRF 공격에 대해서 들어보았을 것이다. 이번 글에서는 React 프로젝트에서 XSS 공격에 대응하는 방법에 대해서 공유하려고 한다.

먼저 XSS 공격이 무엇인지 부터 설명하면,

XSS(교차 사이트 스크립팅) 공격은 악성 스크립트를 웹 사이트에 삽입하여 사용자의 브라우저에서 실행되도록 하는 공격 기법이다. 이를 통해 공격자는 사용자의 세션 쿠키, 로그인 정보, 개인 데이터를 탈취하거나, 악성 소프트웨어를 설치하거나, 사용자에게 위협적인 행동을 수행할 수 있다. XSS 공격은 주로 입력값을 제대로 검증하지 않은 웹 애플리케이션에서 발생한다.

XSS 공격에 취약한 React 코드 예시

import React from 'react';

function App() {
  const userInput = "<script>alert('XSS Attack!');</script>";

  return (
    <div>
      <div id="output">{userInput}</div>
    </div>
  );
}

export default App;

위 React 코드는 사용자의 입력을 그대로 HTML에 삽입하고 있어, 악성 스크립트가 실행되도록 하는 XSS 공격에 취약하다.

그래서 XSS 공격의 위험을 줄일수 있는 방안은 다음과 같다.

첫번째, ‘dangerouslySetInnerHTML’을 이용하기

• React에서 제공하는 dangerouslySetInnerHTML을 이용해서 입력값을 삽입할 수 있다. 이는 입력값을 string으로 변환하기에 입력을 그대로 넣는것보다는 낫다.

import React from 'react';

function App() {
  const userInput = "<script>alert('XSS Attack!');</script>";

  return (
    <div>
      <div id="output" dangerouslySetInnerHTML={{ __html: userInput }}></div>
    </div>
  );
}

export default App;

• 하지만 이것도 XSS 공격에 취약하다.

두번째, DOMPurify 라이브러리를 이용하기

• DOMPurify는 HTML을 살균하고(Sanitize) XSS 공격을 차단해주는 서드파티 라이브러리이다. innerHTML으로 텍스트를 삽입하더라도 해커들의 공격으로부터 보호해준다.

import React from 'react';
import DOMPurify from 'dompurify';

function App() {
  const userInput = "<script>alert('XSS Attack!');</script>";
  
  const cleanInput = DOMPurify.sanitize(userInput);

  return (
    <div>
      <div id="output" dangerouslySetInnerHTML={{ __html: cleanInput }}></div>
    </div>
  );
}

export default App;

세번째, HTML Sanitizer API를 이용하기

• window 에서 제공해주는 Sanitizer API를 이용해서 XSS 공격을 차단하는 방법도 있다.

Sanitizer - Web APIs | MDN

• 하지만 해당 API는 현재 Deprecated된 상태여서 사용을 고려해야 한다.

네번째, eslint-plugin-risxx를 이용해서 린트의 규칙을 강화하기

• ESLint 규칙에 eslint-plugin-risxx 플러그인을 이용하여 XSS 결함을 강화시키는 방법도 있다.

npm: eslint-plugin-risxss

결론, 나의생각

프론트엔드 개발자라면 항상 보안을 신경 써야 한다고 생각한다.(라고 생각하지만 놓칠때도 많다 반성..)

그 중 XSS공격은 생각보다 빈번하게 발생하기 때문에 강화로직을 개발자가 신경 써야 한다. 나는 위의 여러 방법 중 DOMPurify 라이브러리를 선택했는데, 이는 널리 사용되고 검증된 라이브러리로 많은 커뮤니티와 프로젝트에서 안정성을 입증 받았기 때문이다. DOMPurify 라이브러리를 사용하여 입력값을 살균하고 XSS 공격을 방지 할 것이다.

또한, 팀 협업 강화를 위해서 ESLint 규칙을 적용함으로써 보안 취약점을 자동으로 검출하고 수정할 수 있도록 할 것이다. 이렇게 함으로써 XSS공격이 오더라도 방어를 할수있지 않을까 싶다.