우당탕탕 XSS 도입기

poyal·2023년 10월 31일

XSS vue

XSS(Cross Site Scripting)란?

웹 사이트에 악성 스크립트를 삽입하여 의도하지 않은 명령을 실행시키는등 사용자에게 악영향을 끼칠수 있는 피해를 방지하는 목적입니다.

대부분 자바스크립트를 통해서 공격이 이루워지나, 공격 패턴이 너무 다양하여 완벽한 방어가 힘들다.

그로인해 발생할수 있는 문제

쿠키 및 세션정보 탈취
악성 프로그램 다운 유도
의도하지 않은 페이지 노출

예시

스크립트를 삽입하여 실행시키는 행위로 공격한다.

<script>
	location.herf = '악성코드를 실행 시키는 페이지로 이동';
</script>

스크립트를 일차적으로 필터링 하는걸로 공격한다.

<scr<script>ipt>
	location.herf = '악성코드를 실행 시키는 페이지로 이동';
</scr</script>ipt>

태그에서 특정 행동으로 공격한다.

<img src=0 onerror="javascript: alert('WARNING')">

<a onmouseover="alert('WARNING')">

잘 사용하지 않는 태그를 사용하여 공격한다.

<ruby onmouseover="alert('WARNING')"></ruby>

DOCTYPE에 취약점 삽입 공격한다.

<!DOCTYPE xss [
 <!ENTITY x "<script>alert('WARNING')</script>">
]>
<html xmlns="http://www.w3.org/1999/xhtml">

등등... 너무 많은 유형의 공격방법이 존재한다.

Vue의 원인

v-html을 사용하는 부분이 조금씩 있었는데, 사용은 열심히 하였지만, 중요한 내용을 지나치고 있었다.
XSS-VUE-SITE

해결방법

입력하는 값의 길이제한한다.
- 충분히 취약점이 들어갈수 없게 제한한다.
입력하는 값에 대한 유효성 검사한다.
- 취약점이 발견되면 지워버린다.
HTML을 사용하게 되었을 때는 tag, attribute의 화이트리스트를 작성한다.
- 허용하고, 신뢰하는 속성과 태그만 입력 가능해야한다.
<, > 와 같이 태그에 사용되는 기호를 엔티티코드로 변환한다.
- 추가로 태그에 사용되는 항목(", = 등...)의 기호도 변환해도 된다.

실제 적용

사용 라이브러리

vue2, typescript 사용함.
1. vue-dompurify-html
2. class-transformer
3. dompurify

플로우

사용 예시

v-html대신 v-dompurify-html사용한다.

// AS-IS
<div v-html="htmlStr"></div>

// TO-BE
<div v-dompurify-html="htmlStr"></div>

모델에 데코레이터 적용

// Request 모델
@Expose()
@XssRequest()
xssRequestItem!: string;

// Response 모델
@Expose()
@XssResponse()
xssResponseItem!: string;

// XssRequest Decorator 
Transform(value => decoratorEncodeXss(value), {toPlainOnly: true})();

// XssResponse Decorator
Transform(value => decoratorDecodeXss(value), {toClassOnly: true})();

Axtion실행 할때 Xss실행

// action
@ToPlain()
actions(params) {
  // 데코레이터의 역활로 params는 class -> plain으로 변경되어 진입됨
  http.post(`/actions`, params).then(response => {
    // response mutation
  });
}

// getter
getter() {
  return plainToInstance(T, state);
}

// ToPlain Decorator
...
instanceToPlain(arg)
...

주의사항

그렇다 하더라도 텍스트로 입력한 내용에 HTML내용이 들어가지 않을수 없다.
그래서 표현하는 부분에서 innmerText로 입력할지, innerHTML로 입력할지를 선택해서 수정하였다.
만약에 관리자가 잘못 입력하더라도 < >로 표현되지 않고 텍스트< >로 표현하도록 하였다.