개요

DOM 관련 취약점을 이해하기 위해서는 먼저 DOM에 대해 정리해둘 필요가 있으므로 정리해둔다.

DOM 개요

  • DOM은 Document Object Model 의 약자다.
  • DOM을 통해 Javascript가 웹 페이지의 요소들(엘레먼트, 이미지, 텍스트 등)을 조작할 수 있다.
  • DOM은 JavaScript 언어의 일부가 아니라 웹 사이트를 구축하는 데 사용되는 Web API이다.
  • DOM은 트리구조로 표현된다.
  • DOM의 최상위 객체는 document이다.


출처: https://en.wikipedia.org/wiki/Document_Object_Model

  • DOM의 트리구조를 보려면 웹 브라우저의 개발자 도구의 콘솔탭에서 console.dir을 사용하면 된다.
console.dir(document)
  • 트리구조에서 표현된 각 엘레먼트를 노드라고 부른다.

브라우저 객체 모델(Browser Object Model, BOM)

  • 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM: Browser Object Model)이라고 부른다.
  • 브라우저 객체 모델(BOM)의 최상위 객체는 window 객체다. DOM은 window 객체의 하위 객체다.
  • 브라우저는 HTML 페이지를 파싱하여 문서객체(DOM)를 생성한다. Javascript는 HTML에 직접 접근하는 것이 아니라 브라우저에 의해 생성된 이 문서객체에 접근해서 각 요소를 조작할 수 있다. (이런면에서 DOM은 Javascript가 HTML 페이지에 접근하게 해주는 API라고 볼 수 있다.)Javascript에서 동적으로 DOM 객체를 생성할 수도 있다.

DOM 엘레먼트의 트리 구조

DOM 트리에서 표현된 각 엘레먼트(태그)를 상세히 보면 다음과 같이 생겼다.


출처:https://m.blog.naver.com/magnking/220972680805

각 엘레먼트는 여러가지 속성(Property)을 갖는데 그 중에서 childNodes라는 속성과 attributes 라는 속성이 있다.

다음은 위키피디아의 페이지를 console.dir로 출력해본 모습니다. childNodes와 attributes가 배열로 들어가 있는 것을 볼 수 있다.

childNodes는 그 이름 그대로 자식노드를, attributes는 이 엘레먼트가 가진 속성들(atributes)을 의미한다.

그런데 여기서 잠깐. 한국어로는 동일한 속성이지만 영어로는 property로 표현할 때와 attribute로 표현할 때가 있다. 어떻게 다른 걸까? HTML/Javascript의 문맥에서는 attribute는 HTML 엘레먼트의 속성을 가리키고 property는 DOM객체가 가지고 있는 속성을 가리킨다. 위키피디아에서는 이 것을 다음과 같이 설명한다.

Attributes of an element are represented as properties of the element node in the DOM tree. 

엘레먼트의 어트리뷰트는 DOM 트리 안의 엘레먼트 노드의 프로퍼티로 표현된다.

예를들어, 다음 앵커 태그는 href 라는 속성(attribute)를 가지고 있다.

<a href="https://example.com">Link</a>

이 것이 DOM 트리에서는 다음과 같이 표현된다. DOM 객체 a가 href 속성(property)를 가지고 있다.

- a
  - href: "https://example.com"
  - "Link"

참고

  • https://velog.io/@ko9612/JavaScript-DOM
  • https://m.blog.naver.com/magnking/220972680805
  • https://en.wikipedia.org/wiki/Document_Object_Model
  • attribute 와 property 속성 차이: https://inpa.tistory.com/entry/%F0%9F%8C%90-attribute-property-%EC%B0%A8%EC%9D%B4
  • DOM 객체의 attritubes property 정보: https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes