[Dreamhack] devtools-sources write-up

https://dreamhack.io/wargame/challenges/267

devtools-sources

드림핵에 있는 beginner난이도(완전 입문 난이도)인 문제devtools-sources입니다.

 

웹 해킹을 공부하던 도중 특정 기법을 다시 공부하려고 보니 갑자기 처음부터 차례대로 풀지 않으면 다음 단계를 못 본다고 해서 첫 단계인 해당 워게임을 풀어보았습니다.

 

일단 해당 문제의 설명을 보겠습니다.

문제설명에서 먼저 개발자 도구의 Sources를 이용하라고 이미 방법을 다 알려준 문제입니다.

개발자 도구는 F12 혹은 페이지에 오른쪽 마우스를 누르고 맨 아래 검사를 누르면 나오는 창입니다. 해당 페이지의 HTML소스, 통신하는 네트워크, 자바스크립트를 입력할 수 있는 콘솔 등 여러 메뉴가 있습니다. 궁금하시면 당장 이 페이지의 F12번을 누르셔도 바로 확인하실 수 있을겁니다.

 

개발자 도구의 Sources부분은 해당 웹페이지에서 사용된 리소스를 모두 열어볼 수 있습니다. 그 예로는 CSS, 자바스크립트 , 이미지 등의 내용들이 포함되어 있습니다. 

 

이 점을 알고 일단 문제 파일 압축을 풀어보겠습니다.

이런 파일들이 있는것을 확인할 수 있고 그 중에 index.html이라는 파일을 알 수 있습니다. 해당 html을 먼저 열어봅시다. index.html은 보통 웹 페이지의 메인 페이지를 뜻하는데 이는 예전에 웹 서버의 목차 역할을 하는 페이지가 index.html이라고 이름지은게 지금까지 내려온 전통(?)이라고 할 수 있습니다.

 

아무튼 해당 파일을 열면 

어떤 그림이 있는 페이지가 나오는 것을 확인할 수 있습니다. 여기서 우리는 이것이 아닌 해당 개발자 도구의 Sources를 확인 할 것이니 F12를 눌러 Sources창을 확인해 줍니다.

왼쪽을 보시면 해당 웹페이지에서 쓰인 리소스가 모여져 있는 것을 확인할 수 있습니다. 해당 Sources에서 DH로 시작하는 플래그를 찾아보아야 하니 Ctrl + Shift + F를 하여 모든 리소스에서 DH로 시작하는 글자가 있는지 확인해봅니다.

그러면 맨 아래 webpack의 style파일안의 main.scss라는 리소스안에 플래그가 있는것을 확인할 수 있었습니다.

 

해당 플래그를 제출하여 문제를 풀 수 있었습니다.