Content-Type : application/json에서의 XSS

문제 인식

특정 웹 서비스에서 json 형식으로 데이터를 주고 받는 웹 서버임에도 XSS 취약점이 동작하는 것을 확인했다.
Content-Type이 application/json은 XSS가 동작하지 않는 걸로 알고있는데 여기서는 왜, 어떻게 동작한 걸까?

 

문제 해결

바로바로 서버에서 렌더링해서 줄 때 취약한 방식으로 렌더링해서 주기때문이다.

뭔말이냐?

 

취약했던 대상 웹 서비스에서는 vue.js를 사용해 프론트엔드를 구현했는데,
이 vue.js에서 안전하지 않은 렌더링 방식으로 구현했다는거다.

 

<안전하지 않은 렌더링 방식 예시>

<div class="test">
  <p class="ttt" v-html=Atest"></p>

렌더링 방식으로 v-html 디렉티브를 사용했는데, 컨텐츠 타입에 상관없이 프론트엔드에
그대로 포함시켜버리는 친구라고 한다.

 

그래서 XSS 취약점이 발생해 버렸던것
뿌슝 빠슝

 

그럼 반대로 진단자는 이런 환경임을 어떻게 알아볼 수 있을까?
그러니까 application/json을 사용함에도 XSS가 먹는지 아닌지 어떻게 알아볼수있는가 하는거다.

클라이언트 사이드에서 소스코드 내용으로 v_html을 검색해본다?
> 안된다. v_html은 vue 소스코드에서만 유효하고 실제로 클라이언트에 렌더링해서 보여줄땐
v_html 키워드를 찾을수 없다.

정답은 바로바로 'innerHTML을 검색해본다.' 이다.
v_html 디렉티브는 안전하지 않은 방식으로 렌더링된다고 했는데 그건 어디까지나
vuejs에서 그런거고, 이미 클라이언트에게 뿌려졌다면 v_html은 v_html이 아니라
innerHTML로 구현돼 innerHTML라는 키워드로 클라이언트에서 확인할 수 있다.

 

그러니까 Content-Type에서 application/json의 데이터를 불러오는 페이지에서
XSS가 존재할지 아닐지를 추측해볼 수 있는 방법은

 

innerHTML 키워드 검색 → 특정 함수명(A) 사용 확인 → A 함수가 어떤 데이터를 불러오는지 확인
→ 해당 데이터에 XSS 삽입

방식으로 진행하거나 아니면 그 역순으로 진행하면 된다.

 

json으로 불러오는 데이터 키워드 클라이언트 소스코드에서 검색 →
해당 데이터를 어떤 함수에서 사용하는지 확인 → 해당 함수 또는 변수 그 자체가 innerHTML로써 사용되는 지 확인

 

v-html 디렉티브 사용의 대응방안

대응방안으로는 v-html 디렉티브가 아니라 "v-text"나 "v-bind" 등을 사용하여 XSS 공격을 방지해야 한다.