[CTF/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) 그러면 아래와 같이 플래그가 뜬다!

 

 

 

 

 

 

 

 

 

소감

확실히 두 번째라 이 문제는 이런 식으로 푸는 걸까? 하고 혼자 상상 정도는 해볼 수 있었다. (물론 엄연한 상상일 뿐이며, 구체적인 방법도 모르고, 확실하지도 않다…) 그래도 하나씩 하나씩 배워가는 과정에 흥미를 느끼고 있고, 나중에 나도 혼자서 스스로 해결할 날이 오기만을 기다리고 있다. (물론 답부터 보고 하면 늘지 않기 때문에 혼자 생각해보다가 정 모르겠으면 구글링을 해보곤 한다… ) 추가적으로 여러 사람들의 각기 다른 풀이법을 보면서 비교하는 것도 꽤 재미있다!