[Dreamhack : Web] devtools

문제

문제 사진

개발자 도구(f12)의 Sources 탭을 이용해서 DH{} 형식의 flag를 찾으라는 문제이다.

sources는 현재 페이지를 구성하는 웹 리소스들을 확인할 수 있는 그런 탭이다.

 

풀이

문제 파일을 다운 받으면 이런 파일들이 있다. assets 폴더에는 사진들이 있고, sample에는 html이 있다.

css랑 관련된 파일은 넘어가고 js도 아마도 필요없을 것 같기 때문에 html파일들부터 읽어봤다.

(.map파일은 링크와 관련된 파일들이 텍스트로 저장된 파일로 무시해도 된다.)

 

about.html부터 확인해봤다.

접속하면 이런 페이지가 뜨는데 여기서 개발자 도구 - sources로 들어가보자.

sources로 들어가면 이런 화면이 뜬다. dh형식의 flag를 찾기 위해서 전체검색 기능을 사용해보자.(ctrl + shift + f)

전체 검색으로 dh를 검색한 화면(개발자 도구 하단에 뜸)

일반 ctrl + f와 다르게 모든 파일에 대해 검색하는 기능인데 여기에 검색을 하니까 flag가 출력됐다.

위치는 webpack:///styles/main.scss에 있다.

첫 문제라서 그런지 쉽게 해결할 수 있는 문제였다.