-
[Javascript] XSS, CSRF 공격 대응하기■ Front-End/- JavaScript & TypeScript 2020. 7. 9. 20:33
사내 프로젝트 R1 범위를 배포하기 전에 보안 검수를 받았는데, DOM XSS 공격에 취약하다는 결과를 받았다.
서버 단에서 CSRF 공격에 대비해 처리해둔게 있어서, 사실 둘 다 비슷한 공격이라고 생각해서 프론트 단에서 따로 처리를 하지 않았었다.
보안 검수 결과에 대응하면서 XSS 공격과 CSRF 공격에 대해 알아보기로 했다.
XSS(크로스 사이트 스크립팅) 공격
XSS 공격은 사용자 브라우저에 전달되는 데이터에 악성 스크립트를 포함시킨 뒤, 사용자 브라우저에 실행되면서 해킹하는 공격이다.
대표적인 피해 사례로는 아래 세 가지가 있다.
1) Session ID를 얻어 정상 사용자인 척하면서 API를 호출해 데이터를 빼내거나
2) 사용자 브라우저에 악성 스크립트가 실행되면서 사용자 PC를 통제하거나
3) 사용자가 악성 스크립트가 있는 URL을 클릭하도록 유도해서, 악성코드 또는 프로그램이 다운로드 되도록 한다. (예: 트로이목마)
XSS 공격은 '저장 XSS 공격', '반사 XSS 공격', 'DOM XSS 공격' 으로 나눠져 있다.
1. 저장 XSS 공격
저장 XSS 공격은 취약한 웹 서버에 악성 스크립트를 심어놓고, 사용자가 방문하면 해당 스크립트를 전달해서 사용자 브라우저를 공격하는 방법이다.
예) HTML 문서에 아래 스크립트를 저장해놓으면, 사용자는 해당 브라우저에 방문할 때마다 쿠키 정보를 출력하는 경고창이 뜨는 것을 보게 된다.
<script>alert(document.cookie)</script>
2. 반사 XSS 공격
반사 XSS 공격은 공격용 악성 URL을 만든 뒤, 사용자가 해당 URL을 클릭했을 때 정보를 획득하는 방법이다.
예) 검색 사이트를 생각하면 쉬운데, 예를 들어 구글 검색을 할 때 URL을 보면 http://www.google.com/search?q=검색어&aqs=xxx...이런식으로 되어있다. 만약 구글 웹 서버가 취약한 경우, 아래와 같이 URL param에 악성 스크립트를 넣어서 호출하면 해당 정보를 리턴한다.
http://www.test.com/search?q=<script>alert(document.cookie)</script>&x=0&y=0
3. DOM XSS 공격
저장 XSS 공격과 반사 XSS 공격이 서버의 취약점을 이용해 사용자 브라우저에 악성 스크립트가 포함된 응답 페이지를 전달한다고 배웠다. 하지만 DOM XSS 공격은 서버와 관계없이 브라우저에서 발생한다.
DOM XSS 공격은 사용자가 공격자가 조작한 URL을 클릭하는 순간, 악성 스크립트가 실행되면서 사용자 브라우저를 공격하는 방법이다.
XSS 공격 대응 방법
그렇다면 위와 같은 XSS 공격에 대응하려면 어떻게 해야할까?
1. 입력 값 검증
데이터가 입력되기 전이나, 입력된 데이터를 서버에 전달하기 전에 프론트에서 검증하는 것이 좋다.
- 입력 데이터의 길이 제한하기
- 지정된 문자 또는 형식으로 입력되었는지 확인
- 정해진 규칙을 벗어난 입력 값들은 무효화 시키기
2. 출력 값 검증
아마 이 부분이 가장 많이 쓰이는 대응 방식이라고 본다. 가장 유명한 예시로는 게시판 상세 페이지가 있다.
게시판에 올라온 글을 클릭하면, 해당 글의 상세 내용을 조회하는 api를 호출한다. 이 때, 상세 내용에 HTML 또는 스크립트 구문이 들어가 있다면, 스크립트로 해석될 수 있다.
그래서 스크립트로 해석될 여지가 있는 특수 문자들을 인코딩해서 보여줘야 한다.
변경 전 변경 후 변경 전 변경 후 & & " " < < ' ' > > / / ( ( ) ) 위 문자들을 모두 바꿔주면 좋지만, 나는 (, )와 같은 괄호는 그대로 표현해줘야하기 때문에 이를 제외하고 나머지 문자들만 바꿔줬다.
3. 보안 라이브러리 사용
개발자가 직접 입/출력 데이터를 검증하는 데에도 한계가 있다. 이럴 때 보안 라이브러리를 사용하면 좀 더 강력한?(사실 이것도 개발자가 만든 거니까 100% 확신할 순 없다. 그저 나보다 더 똑똑한 개발자가 만들었으니 믿을 수 밖에..) 효과를 얻을 수 있다.
내가 참고한 사이트에서는 MS에서 개발한 AntiXSS 라이브러리와 OWASP라는 오픈소스 라이브러리를 추천했는데, 구글링해보면 요즘은
네이버에서 개발한 Lucy-Xss-Servlet-Filter 라이브러리를 많이 사용하는 것 같다.
CSRF 공격
사이트 간 요청 위조로 특정 웹사이트가 사용자의 웹 브라우저를 신용해서 발생하는 공격이다. XSS 공격이 주로 사용자(Client)를 공격하는 행위라면, CSRF는 웹 서버(Server)를 공격하는 행위라고 생각하면 된다.
로그인한 사용자의 세션을 재사용해 서버에 가짜 요청을 하는 것이다. 예를 들면, 데이터 등록, 수정, 삭제 등이 있다.
CSRF 공격 대응 방법
가짜 사용자를 판별하기 위해 API 호출시 token을 사용하는 것이 좋다. token을 재사용할 수 없도록 유효 시간을 설정하거나, 로그아웃시 세션 만료시키는 것도 좋은 방법이다. 그리고 중요한 기능을 사용할 때에는 사용자의 세션을 검증하고 재인증을 유도하는 것도 좋다.
그리고 GET 방식으로 API를 호출하면, URL 뒤에 폼 데이터가 붙어서 전달되기 때문에 CSRF 공격에 쉽게 노출될 수 있다고 한다.
따라서 입력화면 폼 작성시에는 GET 보다는 POST 방식을 사용하는 것을 추천한다.
참고 사이트
https://www.kisa.or.kr/uploadfile/201312/201312161355109566.pdf
'■ Front-End > - JavaScript & TypeScript' 카테고리의 다른 글
모바일 웹 화면을 개발할 때 신경써야할 것들 (0) 2021.11.21 [Javascript] disabled, readonly (0) 2020.07.16 [Javascript] Array.prototype.findIndex() (0) 2020.07.07 [Javascript] 비동기 처리 (0) 2020.01.30 [Javascript] this에 대하여 (0) 2019.07.23