DOM-Based-XSS에 대하여

 

DOM을 설명하기에 앞서서 먼저 BOM에 대해서 잠깐 말씀드리겠습니다.

대부분 서비스는 웹 브라우저를 바탕으로 실행이 되는데, 이 브라우저와 관련된 객체들의 집합을 Browser Object Model , BOM이라고 부릅니다.

이 BOM으로 브라우저와 관련된 기능들을 구성하는데 DOM이 이 BOM 중의 하나입니다.

 

DOM은 Document object model의 약자입니다. Document는 문서이고, Object는 객체로 번역이 됩니다. 

그래서 번역하면 문서 객체 모델이라고 번역할 수 있습니다.

 

그럼 이 문서객체란 무엇이냐면 html 태그나 body태그 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 합니다.

그리고 모델이라는 단어 이 문서객체를 ‘인식하는 방식’이라고 해석할 수 있습니다.

 

그래서 DOM은 넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미하고, 

좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미합니다.

 

이 DOM은 오른쪽그림처럼 tree 자료구조의 형태입니다. 다들 아시겠지만 위의 root node에서 아래로 퍼져나가는 형태입니다.

 

오른쪽 그림은 DOM에 포함된 태그들을 더 자세히 본 그림입니다. 각각의 태그에 자식 노드들과 속성들이 트리 형태로 자료 구조를 형성하고 있는 것을 볼 수 있습니다.

그래서 우리는 DOM 객체에 일단 접근하고 키워드를 통하고 통해서 필요한 노드에 접근하고 우리가 필요로 하는 작업들을 할 수 있습니다.

 

결론적으로 DOM은 문서의 구조화된 표현을 제공하며 Javascript를 이용해 DOM의 문서 구조, 스타일, 내용 등을 변경할 수 있게 도와줍니다.

 

그래서 우리가 자바 스크립트로 구현한 모든 동작들이 대체로 DOM을 수정하기 위한 것이라고 말할 수 있습니다. 

JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어. DOM은 바로 이 작업이 이루어지는 장소인 것입니다.

 

 

웹 사이트는 JavaScript를 이용해 DOM의 노드/객체 그리고 속성 등을 변경할 수 있습니다.

그 자체로는 문제가 되지 않지만, 보안을 고려하지 않고 사용한다면 취약점이 발생할 수 있습니다.

뒷부분 DOM-based의 취약점을 이해하기 위해서 source와 sink의 개념을 간단히 설명하겠습니다.

SOURCE 란 잠재적으로 공격자에 의해 제어될 수 있는 데이터를  받아들이는 Javascript의 속성을 말하며 예시는 아래와 같습니다.

그리고 SINK 란 잠재적으로 위험한 Javascript 함수 또는 DOM 객체로, 공격자의 데이터를 전달받아 수행될 때 예기치 않은 결과를 도출할 수 있는 요소들입니다.

그래서 기본적으로 DOM-based의 취약점은 웹사이트가 데이터를 source로부터 sink로 전달하고,

client session의 context에서 안전하지 않은 방식으로 해당 데이터를 처리하기 때문에 발생합니다.

 

다음으로 DOM-based XSS가 발생하는 경우에 대해 말씀드리겠습니다. 

DOM-based XSS는 Javascript 코드가 공격자가 제어할 수 있는 SOURCE로부터 전송된 데이터(ex. URL)를 받은 후,

그 데이터를 동적으로 코드를 지원하는 SINK(ex. eval())에 전달하는 경우 발생합니다.

그래서 DOM Based XSS는 피해자의 브라우저에서 DOM 환경을 수정하여 클라이언트 측 코드가 

예상치 못한 방식으로 공격 구문이 실행되는 XSS(Cross Site Scripting) 공격입니다. 

즉, 페이지 자체(HTTP 응답)는 변경되지 않지만, 페이지에 포함된 클라이언트 측 코드는 DOM환경에서 발생한  악의적인 변조로 인해 공격 구문이 실행됩니다.

 

DVWA 환경에서 간단한 실습을 해보았습니다. 첫번째 사진 보시면 페이지에서 4가지 언어를 선택할 수 있고

Select 버튼을 클릭하면, URL의 default라는 이름의 매개변수 값이 설정된 것을 확인할 수 있습니다.

URL에 설정된 default 라는 이름의 매개변수 값을 whitehat으로 수정해서 전송해보았습니다.

전송한 결과 드롭다운 목록에 선택된 값이 URL 매개변수에 입력된 whitehat으로 변경된 것을 확인할 수 있습니다.

즉, default 매개변수에 설정된 값으로 페이지를 구성한다는 사실을 확인할 수 있습니다.

 

아래 사진은 default 매개변수에다가 드롭다운 목록에 쿠키 정보를 작성하게 하는 스크립트를 작성하여 전송한 결과입니다.

DOM 구조가 수정되어 쿠키 정보가 드롭박스에 표시되는 모습을 확인할 수 있었습니다.

 

해당 기능(드롭다운 목록 설정)이 구현된 소스코드를 개발자 옵션을 통해 살펴본 결과

default 매개변수에 입력된 값을 통해 클라이언트 측에서 JavaScript를 이용하여 페이지를 구성한다는 사실을 확인할 수 있었습니다.