Cộng đồng Hỏi & Đáp của Inflearn

tyche0529

câu hỏi đã được viết

Học hack web từ cơ bản đến trung cấp, tất cả trong một khóa học

Giải quyết vấn đề DOM Clobbering

Dom clobbering 관련 문의

Đã giải quyết

Viết

강의 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 객체가 어떻게 연결되는지,
그리고 태그가 여러 개일 때 어떤 것이 참조되는지가 정확히 이해되지 않아 질문드립니다.

모의해킹

Câu trả lời 2

knockOn

Người chia sẻ kiến thức

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

이전 강의의 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="~~~">

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

tyche0529

Người đặt câu hỏi

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

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

태그를 하나만 사용할 경우 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] 형태로 출력된다.

communityai8509

안녕하세요, 인프런 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

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

tyche0529

câu hỏi đã được viết

Đặt câu hỏi