DOM clobbering

DOM clobbering

 

DOM clobbering이란 HTML 코드를 주입하여 DOM(Document Object Model)을 조작하는 기법이다.  

 

DOM clobbering 예시

 

DOM clobbering은 다음과 같이 동작한다. 아래의 웹페이지는 사용자의 입력 값을 출력하는 간단한 웹페이지이다.

 

DOM clobbering 예시 (1)

 

이 웹페이지에서는 입력 값으로 HTML 코드 주입이 가능하며 다음과 같은 JavaScript 코드가 작성되어있다.

        window.test = { webtest: "pentest" }
        
        if(window.test.webtest == "pentest") {
            alert(window.test.webtest);
        } else {
            alert("Not...");
        }

 

이 코드에서는 window.test.webtest 의 값을 pentest로 초기화하고, window.test.webtest 값이 pentest이면 window.test.webtest이 출력되고, 그렇지 않으면 Not... 을 출력한다.

 

따라서, 이 웹페이지에 처음 접근하면 pentest 가 출력된다.

 

DOM clobbering 예시 (2)

 

그렇다면 아래의 HTML 코드를 입력 값으로 주입해보겠다. DOM clobbering을 발생시키기 위해 a 태그의 id, name 속성 값을 이용한다.

 

<a id=test><a id=test name=webtest href=test>

 

 

주입된 HTML 코드로 인해 window.test.webtest 값이조작되어 Not... 이 출력된다.

 

 

DOM clobbering 예시 (3)

 

 

 

대응방안

 

DOM clobbering을 막기 위해서 다음과 같은 방법을 사용할 수 있다.

 

■ HTML 태그가 주입되어야 하므로 입력 값에서 <, > 등의 특수문자를 필터링한다.

 

■ DOMPurify 등의 라이브러리를 사용하여 DOM clobbering을 방지한다.

 

참고

 

■ https://portswigger.net/web-security/dom-based/dom-clobbering