https://dreamhack.io/wargame/challenges/267
들어가기 전..
https://learn.dreamhack.io/198#1
DevTool에 대해 배워보겠다.
웹 개발을 할 때는 프론트엔드의 자바스크립트나 백엔드 API에서 버그가 발생하는 경우가 잦고, 적용한 CSS가 맘에 들지 않을 때도 많다. 특히 CSS는 변경 결과가 어떻게 반영될 지 예상이 쉽지 않아 수정 과정이 번거롭다.
브라우저 개발자 도구(Devtools)는 이런 불편함을 감소시켜준다.
HTML과 CSS 코드를 브라우저에서 수정하고 결과를 바로 확인할 수 있으며, 자바스크립트 코드를 대상으로 디버거도 제공합니다. 서버와 오가는 HTTP 패킷도 상세히 보여주므로 프로토콜 상에서 발생하는 문제도 쉽게 발견할 수 있다.
등등..
뒤의 내용을 알고싶다면 위 사이트에 들어가면 된다.
문제 창에 들어가니까 서버를 불러오는 것이 없었다.
그래서 옆에 문제 파일을 받아주었다.
project.html을 눌러보았다.
주소를 보면 맨 마지막에 ~/project.html이길래 /project.html를 지워보았다.
내 파일 안의 주소들을 이렇게 한번에 볼 수 있다.
여러가지들을 눌러보다가 F12를 누르고 소스를 보면 볼 수 있는 css 파일과 js 파일이 있었다.
이런 파일들 중 flag가 숨겨져 있지 않을까 싶어 ctrl+f를 해서 DH라고 쳐보았다.
두개 다 없는 것을 확인 할 수 있다.
마지막인 main.4c6e144e.map을 확인해보니 flag가 있었다.
나는 위 방법으로 찾았지만 F12를 이용해서 찾아보겠다.
먼저 html로 끝나는 사이트 아무거나 들어간다.
(나는 project.html로 들어갔다.)
그다음 F12를 눌러 소스 탭으로 들어간다.
굉장히 파일들이 많은 것을 알 수 있다.
검색을 통해 flag를 찾아준다.
검색을 하면 어디 파일에 몇줄에 위치하고 있고, 클릭하면 해당 코드로 이동한다.
