DOM 객체 접근

개발자 도구를 통해 객체에 접근하는 방법과 그것을 이용한 XSS에 대해 적어보려합니다.
먼저 DOM은 Document Object Model, 문서 객체 모델로 브라우저에서 사용하는 객체 모델이라고 보면 됩니다. XSS 방식을 사용하다 보면 필요한 데이터를 가져올 때 해당 데이터가 위치한 장소를 지정하기가 어려운데, 그런 경우에 DOM 객체를 사용하면 쉽게 접근할 수 있습니다.

네이버 페이지중 Naver 로그인 이라고 적힌 부분에서 Naver 데이터를 가져오려고 한다 가정해보겠습니다. F12 버튼으로 개발자 도구를 눌러 이리저리 찾다보면 해당 부분이 연결된 부분을 찾을 수 있습니다.!!
사진에 표시해둔 것처럼 a 태그안에 i 태그 이후 span 태그로 Naver가 있고, i를 닫고 로그인이라는 글자가 적혀 있는 것을 볼 수 있습니다.
이제 document.getElement를 이용해 대상을 찾아야합니다. 개발자 도구에서 console 부분에 들어가서 입력할 수 있는데, getElement에는 여러가지 종류가 있지만 우선 필요한 부분을 찾아보면 span 태그에 class 이름으로 blind라는 이름을 가진 것이 보입니다. 이렇게 class 이름을 알게된 경우에는 document.getElementsByClassName을 이용해 찾을 수 있습니다. 아까 찾은 blind라는 이름을 넣어 document.getElementsByClassName('blind') 라고 콘솔 창에 입력해보겠습니다.

class는 여러 개 존재할 수 있기 때문에 많은 결과값이 나옵니다. 결과값을 하나하나 짚어보니 16번째가 제가 찾던 값이라는 것을 알 수 있었습니다. 뒤에 [16]를 붙여 원하는 값이 맞나 확인해보면 !

해당 부분이 맞는 것을 확인할 수 있습니다. 이렇게 getElement를 통해 원하는 객체를 찾을 수 있는 것을 확인할 수 있습니다. class 이름을 통해 찾는 ClassName같이 복수인 경우에는 Element에 복수형인 s를 붙여 getElementsByClassName과 같이 쓰고, id같이 유일한 값으로 하나만 존재하는 경우에는 getElementById와 같이 s를 붙이지 않고 씁니다. 이제 찾은 객체에서 값을 가져오는 방법을 알아보겠습니다.

값을 가져오는 방법은 간단합니다. 우선 제가 찾는 Naver처럼 태그 안에 입력된 값이 필요한 경우에는 뒤에 . 을 붙이고 innerHTML을 사용하면 해당 태그 안에 값을 가져올 수 있습니다.

하지만 이렇게 태그 안에 적힌 값이 필요한게 아니라 태그의 속성값이 필요한 경우도 있는데 이런 경우에는 해당 속성의 이름을 적으면 됩니다.

이런 식으로 class 이름을 가져온 모습을 볼 수 있습니다.

이걸 xss에 이용하려면 변수에 찾은 값을 저장해서 이용하는 식으로 쓰면 됩니다. 이전에 document.cookie를 사용하던 것과 다를 게 없습니다.