DOM Clobbering

1. DOM Clobbering?

DOM Clobbering은 HTML 요소가 자바스크립트에서 사용하려던 변수나 객체 자리를 대신 차지하는 현상이다.

이 문장만 보면 조금 추상적으로 느껴질 수 있다. 쉽게 말하면, 개발자는 분명히 “이 이름은 내가 코드에서 만든 값”이라고 생각했는데, 실제로는 브라우저가 같은 이름을 가진 HTML 요소를 대신 보여줘서 자바스크립트가 엉뚱한 대상을 참조하게 되는 문제다.

이 공격은 자바스크립트를 직접 넣지 않아도, 단지 HTML 요소의 id나 name 같은 속성을 잘 이용하는 것만으로도 발생할 수 있다.

즉, DOM Clobbering은 “스크립트를 실행시키는 공격”이라기보다,
브라우저가 HTML 요소를 다루는 방식과 자바스크립트가 값을 참조하는 방식 사이의 틈을 이용하는 공격이라고 보는 편이 이해하기 쉽다.

→ 코드가 A를 쓸 줄 알았는데, 브라우저 때문에 B를 쓰게 되는 상황

 

 

2. 왜 발생하는가?

- 브라우저가 일부 HTML 요소를 이름 기반으로 노출하는 레거시 동작을 가지고 있음

- 자바스크립트 코드가 그 이름을 안전한 값이라고 가정하고 사용

- 그 결과 같은 이름 사이의 충돌이 발생할 수 있음

 

브라우저의 오래된 동작 방식과 개발자의 안전하지 않은 참조 방식이 겹치면서 발생한다.

 

 

3. Example

이런 자바스크립트 코드가 있다고 하자.

<script>
    let url = window.redirectTo || "/main";
    location.href = url;
</script>

개발자의 의도는 window.redirectTo에 값이 있으면 그 주소로 이동하고, 없으면 /main으로 이동시키려는 것이다.

그런데 공격자가 페이지에 이런 HTML을 삽입한다면?

<a id="redirectTo" href="https://attacker.com"></a>

브라우저는 redirectTo라는 이름을 가진 DOM 요소를 전역처럼 노출할 수 있다. 그러면 자바스크립트는 <a> 요소를 참조하게 된다.

redirectTo라는 DOM 요소가 등장하면서 자바스크립트가 그 요소를 참조하고, 원래 의도와 다른 값이 사용되는 것이다.

자바스크립트를 직접 삽입한 것도 아니고 그냥 HTML만 삽입했는데 애플리케이션의 동작이 바뀌게 된다.

"같은 이름을 가진 HTML"이 원래 값을 대신한다는게 핵심이다.

 

 

4. Mitigation

일단 제일 중요한 것은 어떤 값을 참조할 때 브라우저가 알아서 이름을 연결해줄 것이라 생각하지 말고, 코드에서 명확하게 어떤 대상을 가져오는지 직접 지정하는 방식으로 작성해야 한다.

 

4-1. 전역 이름에 의존하지 않기

이름 기반 접근이 항상 안전하다고 생각하면 안 된다. 특히 브라우저가 자동으로 노출할 수 있는 이름과 충돌할 가능성을 고려해야 한다. 본인이 만든 변수니까 괜찮을 것이라 생각하지 말고, 이 이름이 DOM 요소와 충돌할 수도 있다는 것을 고려해야 한다.

 

4-2. DOM 요소 명시적으로 가져오기

DOM 요소를 사용할 때는 document.getElementById() 같은 명시적인 방법으로 가져오는 게 좋다.

 

4-3. 전역 변수 사용 줄이기

전역 공간에 값이 많을수록 충돌 가능성도 당연히 커진다. 따라서 가능한 한 let, const를 사용하고 필요한 범위 안에서만 변수를 관리하는 것이 좋다.

꼭 전역에 있어야 하는 거 아니면 차라리 지역 변수가 나아보인다.

 

4-4. 사용자 입력으로 들어가는 HTML 제한

보통 HTML을 삽입할 수 있을 때 발생하므로, 사용자 입력이 그대로 HTML로 들어가는 구조를 줄여야 한다.

id, name 같은 속성을 포함한 태그를 허용할 경우에는 단순히 <script> 막는다고 충분하지 않을 수 있다.