[빡공팟 5기] W4 : Web Hacking 로드맵 - STAGE 1 - 1

Browser DevTools

1. Tools : Browser DevTools (개발자 도구)

 

개발자 도구는 어떤 용도로 사용하는 걸까?

: 프론트 엔드 부분은 버그나 오류가 발생하는 경우가 빈번하며 CSS 수정, 자바 스크립트의 수행 결과 확인 등의 작업을 수행하는 경우가 많다. 이런 경우, 에디터와 웹 브라우저를 번갈아가면서 한다면 매우 번거롭다. 개발자 도구는 이러한 불편함을 해소해준다.

 

브라우저 개발자 도구로 가능한 일들은

1. HTML, CSS 코드를 직접 수정하고 결과 확인이 가능하다.

2. 자바스크립트 코드를 대상으로 디버거를 제공하며 함수 실행이 가능하다.

3. HTTP 패킷을 상세하게 보여준다. 이는 프로토콜 상 발생하는 문제를 쉽게 발견할 수 있다.

-> 이렇게 편리한 만큼 공격자도 사용 가능하다.

 

해당 커리큘럼을 필자는 크롬 개발자 도구를 사용함.

 

개발자 도구 실행 방법

: Window - F12

: Mac - Option + Command + 영문자 i

 

(개발자 도구 상세하게 살펴보기)

- 요소 검사 및 디바이스 툴바 :

요소에 마우스를 가져다대면 해당하는 HTML 소스코드를 쉽게 찾을 수 있다. 또한, 디바이스 툴바는 현재 브라우저의 화면 비율 및 User-Agent 를 원하는 값으로 변경 가능하다. 필자는 반응형 웹 페이지를 만들 때 유용하게 사용했다.

 

- 우리가 제일 많이 사용하는 부분 :

Elements : 페이지를 구성하는 HTML 의 코드를 읽을 수 있고, 수정도 가능하다. 요소 검사 기능과 함께 사용하면 수정할 코드를 빠르게 선택할 수 있어 매우 유용하다.

Console : 자바 스크립트 코드를 입력하여 실행하고 결과 확인이 가능하다. Console 오브젝트에는 개발자 도구의 콘솔에 접근할 수 있는 함수가 정의되어 있다. 코드를 작성하면서 변수의 값을 중간에 출력하고 싶으면 console.log 명령어가 유용하게 사용된다.

Sources : HTML, CSS, JS 등 페이지를 구성하는 리소스들을 확인하고 디버깅 할 수 있다. 특히, break 포인트를 걸어서 함수를 실행시키는 기능이 매우 유용하다.

Network : 서버와 오가는 데이터, 로그를 확인할 수 있으며 해당 로그에서 원하는 항목을 선택한 후에 Copy - Copy to fetch 를 선택하고 Console 에 붙여넣으면 동일한 요청을 서버에 전송할 수 있다.

Application : 쿠키를 포함한 웹 어플리케이션과 관련된 캐시, 이미지, 폰트, 스타일시트 등 데이터들을 확인할 수 있다.

-> 위 5가지를 주로 사용한다.

 

(Console 패널 실습해보기)

- 자바스크립트의 alert() 함수를 이용하여 알림창을 띄워보았다.

- 자바스크립트의 prompt() 함수를 이용하여 이용자의 입력값을 받는 창을 띄워보았다.

- 자바스크립트의 confirm() 함수를 사용해보았다.

- confirm() 함수는 true or false 를 반환한다. 

- document.body.innerHTML 을 이용하여 값을 채워보았다.

- document.body.innerHTML 은 HTML 페이지의 body 부분의 내용을 입력하는 기능을 수행한다.

 

(Sources 패널 실습해보기)

- 소스 코드에서 이름과 비밀번호를 비교하는 함수의 코드를 살펴보면, dreamhack/31337 일 때, congratulations ! 가 출력되고, 둘 중 하나라도 틀리면 No ! 라는 메시지가 출력된다.

- 우선 맞게 입력하여 congratulations ! 의 결과값을 출력했다.

- 다시 맞게 입력한 후에 비밀번호 검사하는 부분에 break 포인트를 걸어놓고 입력된 비밀 번호를 변경해보았다. 그리고 다시 이어서 실행 시켜보니 No ! 가 출력되었다.

- 이는 함수를 실행하는 도중에 정지 시키고 값을 변경하여 변경된 값을 실행하는 게 가능하다는 소리다.

 

- 기타 브라우저 기능

1. 페이지 소스 보기

2. 시크릿 모드 : 새로운 브라우저 세션을 생성하여 웹 사이트 점검할 때 유용하며,

방문 기록, 쿠키 및 사이트의 데이터, 양식에 입력한 정보 등이 저장되지 않는다.

일반적으로 브라우저의 탭들은 쿠키를 공유하는데 시크릿 모드의 탭들은 공유를 하지 않는다.

 

- 관련된 문제들

1. Carve Party

- 해당 문제는 마우스로 호박을 10000번 클릭을 해야 플래그를 획득하는 문제이다.

- 개발자 도구를 이용하여 문제 풀이를 진행했는데, 이 문제는 source, console 탭을 잘 활용해서 푸는 문제인 것 같다.

 

2. funjs

- 입력 폼에 데이터를 입력하여 맞으면 플래그를 획득하고, 틀리면 NOP ! 을 출력하는 문제이다.