인프런 커뮤니티 질문&답변

문채우

작성한 질문수

해킹 입문부터 중급까지, 한 번에 배우는 웹해킹

Dom clobbering 문제 풀이

Dom clobbering 관련 문의

해결된 질문

작성

강의 04:31부터의 설명을 보면,
상단의 window.CONFIG는 if문까지의 로직과 연결되어 있고,
HTML에서는 먼저 다음 태그가 등장합니다.

<a id="CONFIG"></a>

그리고 이후 설명에서는 아래와 같은 태그를 사용하는 것처럼 보입니다.

<a id="CONFIG" name="location" href="http://www.naver.com"></a>

자바스크립트 코드는 다음과 같습니다.

window.CONFIG = window.CONFIG || {
  check: false,
  location: "http://ssh.knock-on.org:10010/",
};

if (window.CONFIG.check !== false) {
  location.href = window.CONFIG.location;
}

여기서 이해가 되지 않는 점은 다음과 같습니다.

id="CONFIG"를 가진 <a> 태그가 두 번 등장하는데,
그렇다면 결국 아래에 있는 <a id="CONFIG" name="location" href="..."> 태그가
앞의 태그를 덮어쓰는 것 아닌가요?
만약 그렇다면 window.CONFIG는 최종적으로 아래 태그 기준으로만 동작하게 되고,
변수 초기화부터 조건문, 이동까지 모두 동일하게 처리될 것 같은데
왜 하나만 있을 때와 두 개가 있을 때 결과 차이가 발생하는지가 이해되지 않습니다.
두 경우 모두 같은 id="CONFIG" 태그를 사용하는 것처럼 보이는데,
DOM 관점에서 어떤 차이 때문에 동작이 달라지는지 설명이 필요할 것 같습니다.

이 부분에서
DOM 요소(id="CONFIG")와 window.CONFIG 객체가 어떻게 연결되는지,
그리고 태그가 여러 개일 때 어떤 것이 참조되는지가 정확히 이해되지 않아 질문드립니다.

모의해킹

답변 2

knockOn

지식공유자

안녕하세요 ㅎㅎ 자세한 질문 감사합니다!

이전 강의의 1:35 부분을 참고하셔서 같이 보시면 좋을 것 같습니다.

해당 문제의 목적은 window.CONFIG.location 을 덮어 씌우는 것 입니다.

만약 태그를 다음과 같이 하나만 넣었을 경우,

<a id="CONFIG" name="location" href="~~~">

window.CONFIG 의 결과값은 해당 태그이므로 window.CONFIG.location의 값은 undefined 가 될 것 입니다.

그렇기에, 강의에서 설명한 바와 같이 window.CONFIG.location의 값을 원하는 값으로 설정하기 위해 태그를 두개를 넣어

window.CONFIG 의 결과값이 HTMLCollection이 되고, window.CONFIG.location 의 결과값이

<a id="CONFIG" name="location" href="~~~">

가 되어 원하는 페이지로 리다이렉트 시키는 것이 목적입니다 😄

문채우

질문자

답변 감사합니다!
말씀해주신 의도 자체는 이해가 되었고, 제가 헷갈렸던 부분은 왜 그런 결과가 나오는지에 대한 동작 원리였습니다.

정리해보니 다음과 같은 흐름이더라고요.

태그를 하나만 사용할 경우 window.CONFIG는 HTMLElement(단일 객체)로 바인딩됩니다.
하지만 같은 id를 가진 태그가 여러 개 존재하면, window.CONFIG는 단일 요소가 아니라 HTMLCollection 타입의 유사 배열로 반환됩니다.
이때 HTMLCollection은 name 속성을 프로퍼티처럼 접근할 수 있기 때문에
window.CONFIG.location은 name="location"을 가진 <a> 태그를 가리키게 됩니다.
이후 location.href에 <a> 태그 객체를 대입하면, 브라우저가 내부적으로 해당 객체를 문자열로 변환(toString())하려고 하고
<a> 태그의 경우 이 문자열 값이 href 주소가 됩니다(자바스크립트 특징?! 핵심)
결과적으로 예시(location.href = "http://www.naver.com")이 실행되어 페이지가 이동하게 되는 구조라는 점을 이해하게 되었습니다.

덕분에 의도와 함께 내부 동작 원리까지 정리할 수 있었습니다. 감사합니다! 😄

위 사진처럼 <a> 태그나 <area> 태그는 자바스크립트에서 객체가 문자열이 필요한 위치에 사용될 경우, 묵시적 형변환이 발생하면서 toString() 결과로 href 속성값(URL 문자열)을 반환한다.

반면에 <div>, <span> 같은 일반 요소들은 동일한 상황에서 문자열로 변환되면 기본 객체 표현인 [object HTMLDivElement], [object HTMLSpanElement] 형태로 출력된다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 문채우님.

DOM Clobbering은 자바스크립트와 HTML 간에 특이한 상호작용을 발생시킬 수 있는 개념입니다. 주어진 코드에서는 이 개념이 어떻게 동작하는지를 이해하는 것이 중요합니다.

DOM Clobbering 설명: HTML에서 id 속성이 지정된 태그는 자바스크립트에서 전역 객체의 프로퍼티로 접근할 수 있습니다. 예를 들어, <a id="CONFIG"></a> 태그가 있다면, 자바스크립트 상에서 window.CONFIG로 접근할 수 있습니다.
태그의 Overwriting 동작: 동일한 id 속성을 여러 태그에 선언하면, 가장 마지막에 선언된 태그가 참조됩니다. 따라서 주어진 코드에서 <a id="CONFIG" name="location" href="http://www.naver.com"></a> 태그가 마지막에 등장하면 이 태그의 속성이 window.CONFIG로 인식됩니다.
window.CONFIG의 업데이트: 두 개의 <a> 태그가 있을 경우 DOM에서 마지막 태그의 속성값으로 window.CONFIG가 설정되고 자바스크립트 로직이 이 값을 기반으로 동작하게 됩니다. 이로 인해 window.CONFIG.check가 초기 설정값을 덮어쓰기 때문에 조건문 내의 설정에 따라 결과가 달라질 수 있습니다.

질문해주신 상황에서 window.CONFIG는 DOM에서 마지막에 등장한 요소의 속성에 의해 영향을 받을 수 있으며, 이는 보안상 예기치 않은 동작을 초래할 수 있습니다.

추가적으로 도움이 될 질문 링크를 추천드립니다:
- DOM Clobbering in Web Security

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

문채우

작성한 질문수

전체 Q&A

질문하기