[Dreamhack] devtools-sources & Carve Party

devtools-sources

devtools-sources

 

 

 

 

참고

🔧개발자 도구의 기능을 뜯어보자

 

 

 

 

문제 설명

 

 

 

문제 분석

 

(1) 우선 파일을 다운 받았다.

 

 

 

(2) [project] 파일에 들어가니 저런 웹 페이지가 열렸다.

 

 

(3) 일단 아까 배운 걸 활용해보기 위해, 그리고 문제에서도 Sources 탭 기능을 활용하라고 했으므로… F12

오른쪽 측면의 트리 구조를 확인한다.

 

 

 

 

(4) 검색창에 ‘flag’를 입력하여 결과를 확인해본다. 별로 쓸만한 건 없어보였다…

 

 

(5) flag의 형식은 ‘DH{...}’ 라고 했으므로…

 

 

 

성공이다!

 

 

 

 

---

 

Carve Party

Carve Party

 

 

문제 확인

 

 

 

 

 

문제 분석

 

(1) 다운받은 파일을 확인한다.

 

 

 

(2) ‘jack-o-lantern’이라는 파일을 클릭하면 아래 그림과 같은 인터넷 창이 켜진다.

10000번을 누르면 펌킨이 호박랜턴이 되는 것 같다…

그러면 클릭 횟수가 10000번인지 확인하는 코드가 있을 것 같아서 우선 개발자 도구 창을 켜준다.

 

( 실제로 몇 번 눌러본 결과 아래처럼 형태가 잡혀가는 걸 확인해볼 수 있었다…. )

 

 

 

 

(3) 코드와 트리 구조를 확인해준다.

 

 

 

(4) 우선 1000번 클릭됐는지 확인하는 if문을 들여다본다….

 

 

 

(5) 위의 코드를 보니 무슨 뜻인지는 몰라도 $(’#jack-target’).click(function()} 이 중요한 것 같아서 구글링을 좀 해보았다. ‘id(#) = jack-target’이라는 대상을 가진 웹페이지를 클릭했을 때, 함수 안의 동작들을 수행하는 듯 하다.

 

 

 

 

(6) 그래서 counter를 10000으로 만들어주기 위해 콘솔 창에서 해당 코드를 작성해준다.

 

 

 

(7) 그러면 아래와 같이 플래그가 뜬다!