DOM(Document Object Model)이란?

DOM의 정의

DOM이란 'Document Object Model'의 약자입니다. Document라는 Object(객체)를 다루는 공통된 모델이라고 할 수 있습니다. 모델이라고 하는 이유는 브라우저마다 구현되는 체계가 다를 수 있지만 일반적으로 공유되는 표준이 있기 때문입니다. 브라우저는 window와 document라고 하는 객체를 생성하고 해당 객체를 통해서 HTML과 같은 언어를 표현하여 보여줍니다. window 객체 아래에는 여러 가지 객체들이 있지만 그중에 document 객체 아래에 있는 여러가지 기능과 객체들을 통틀어서 DOM의 구성요소라고 부릅니다. 

 

필요성

이러한 모델이 나온 이유는 무엇일까요? 기존에 정적이고 움직이지 않는 재미없는 웹에서 조금 더 활발하고 동적이고 발랄한 웹을 구현하기 위해서 자바스크립트와 같은 프런트엔드 프로그래밍 언어가 등장하게 됩니다. 이런 언어를 통해서 웹에 있는 구성요소를 조작하고 싶은 것이지요. 하지만, html과 자바스크립트는 서로 다른 언어입니다. 따라서 html이 가지고 있는 구성요소를 자바스크립트로 표현할 필요가 생깁니다. 이런 구성요소를 구현하기 위해서는 객체지향적으로 표현하게 됩니다. 브라우저는 window라는 객체를 만들고 그 안에서 브라우저를 조작하는 기능들을 넣었습니다. 이제 html 요소를 자바스크립트 언어로 이해될 수 있게 document라는 객체 안에 넣고 표현하는 것입니다. 그렇게 하면 자바스크립트를 통해서 html 구성요소가 브라우저에서 움직이거나 사라지거나 생기게 할 수 있습니다. 

 

웹페이지에서 등장하는 예시

매우 간단하게 DOM의 개념을 설명했지만 지금의 예시를 통해서 어떤 것이 있는지 간단하게 확인해 보겠습니다. 아래의 스크린숏은 DOM Based XSS 개념을 익히기 위해 구현된 CTF 웹페이지에서 받은 Response의 일부입니다. 'script' 태그 부분을 보면 API처럼 보이는 함수들을 사용하는 것을 볼 수 있습니다. 예를 들면 'document.getElementById'와 같은 함수가 있을 수 있습니다. 이런 것들을 써서 html의 요소 중 해당 id를 가진 구성요소(element)를 가져오고 값을 넣는 등의 행위를 할 수 있습니다.

 

이렇게 간단하게 DOM에 대해서 알아보았습니다. 프런트엔드에서는 꽤나 중요한 개념이고 기술이 될 수 있습니다. 보안의 관점에서 보면 XSS가 DOM을 포함한 javascript에서 일어날 수 있으므로, 웹에서 DOM을 어떻게 사용하는지에 따라서 XSS 취약점의 존재유무가 결정될 수 있습니다.