이 LAB은 custom tag를 제외한 모든 HTML tag를 차단하고 있다. LAB을 해결하기 위해서 custom tag를 사용해 자동으로 alert(document.cookie) 함수가 실행되도록 만들어라.
우선 custom tag가 무엇인지 알아보고 시작하겠습니다.
💡 Custom tag란?
HTML에서 사용자가 직접 생성한 tag를 말합니다. 브라우저는 HTML에 기본적으로 등록된 태그가 아닌 태그들은 사용자 정의 태그로 인식합니다. 태그를 생성한 후 JS 코드인customElements.define("custom-tag", 클래스);함수와 클래스를 이용해 기능을 정의할 수 있습니다.
즉 custom tag는 HTML에 존재하지 않는 이름의 태그를 일반 태그처럼 사용가능하다는 의미입니다.
그럼 우선 custom tag를 웹사이트에 입력해보겠습니다.


Hi가 정상적으로 출력됩니다.

소스코드에 방금 입력한 <custom-tag>가 태그로 인식되어 HTML 코드에 입력된 것을 볼 수 있습니다.
이제 여기에 속성 값으로 JS 코드를 불러와야 합니다. 그런데 자동으로 alert(document.cookie)함수가 실행돼야 하는데 custom tag의 기능을 정의하려면 현재 사용할 수 없는 <script>태그가 필요합니다.
이를 해결하기 위해 fragment(#)를 활용합니다.
💡 fragment(#)란?
http://website.com/board#x
URL 구성요소 중 하나로 URL의 맨 뒤에 #x를 붙여 전송하면 해당 페이지의 id 값이 x인 요소로 즉시 포커스가 이동합니다.
fragment(#)를 이용해 경로 이동 시 custom-tag 요소로 포커스가 이동하게하고, 포커스가 이동했을 때 alert(document.cookie)를 실행하도록 할 수 있습니다.
그러려면 custom tag에 id 값과 onfocus속성, 그리고 포커스가 가능하도록 tabindex 속성을 할당해주어야 합니다.
tabindex는 tab키를 눌렀을 때 포커스가 가능하도록 만들어주는 속성입니다.
속성을 추가한 <custom tag>는 다음과 같습니다.
<custom-tag id="x" tabindex=1>test<custom-tab>

이를 검색창에 입력하고 Tab 키를 누르면 경고창이 출력됩니다.
이 상태에서 현재 URL에 #x를 붙여 전송하면 tab을 누르지 않아도 자동으로 경고창이 실행됩니다.
http://web/?search=<custom-tag+id%3D"x"+onfocus%3D"alert%28document.cookie%29"+tabindex%3D1>test<custom-tab>#x
이렇게 완성된 URL을 Go to exploit Server로 이동해 Body란에 입력합니다. 입력할 때는 victim 서버에서 자동으로 해당 경로로 리다이렉션될 수 있도록 location 객체의 값으로 입력합니다. 그냥 경로만 작성하게 되면 화면에 경로가 문자열로 출력됩니다.
💡location 객체
location또는location.href로 주로 사용하며 JS에서 현재 문서의 URL을 나타내는 기능을 합니다.location값으로 특정 URL을 입력하면 즉시 해당 URL로 이동하기 때문에 redirection으로 주로 사용합니다.
<script> location = https://0a06008e047f6e0a805e44f000a000e1.web-security-academy.net/?search=%3Ccustom-tag+id%3D%22x%22+onfocus%3D%22alert%28document.cookie%29%22+tabindex%3D1%3Etest%3Ccustom-tab%3E#x </script>

Store, Delever exploit to victim 클릭 후 View exploit 클릭하면 victim 서버로 이동하게 됩니다.

이동하자마자 location의 값으로 전달한 URL로 redirection되며 경고창이 나타납니다.