스테이지1. Background: Browser DevTools

웹 개발을 할 때는 프론트엔드의 자바스크립트나 백엔드 API에서 버그가 발생하는 경우가 잦고, 적용한 CSS가 맘에 들지 않을 때도 많습니다. 이런 경우에는 코드 에디터로 원하는 부분을 수정하고 브라우저로 결과를 확인해야 하는데, 만족스럽지 않으면 에디터와 브라우저를 오가며 수정을 반복해야 합니다. 특히 CSS는 변경 결과가 어떻게 반영될 지 쉽게 예상이 되지 않아서 수정 과정이 더욱 번거로워지기도 합니다.

브라우저 개발자 도구(Devtools)는 이러한 불편함을 대폭 감소시켜줍니다. HTML과 CSS 코드를 브라우저에서 수정하고 결과를 바로 확인할 수 있으며, 자바스크립트 코드를 대상으로 디버거도 제공합니다. 서버와 오가는 HTTP 패킷도 상세히 보여주므로 프로토콜 상에서 발생하는 문제도 쉽게 발견할 수 있습니다.

개발자 도구가 웹 서비스를 진단하는데 도구인 만큼, 웹 취약점을 이용하려는 공격자에게도 유용하게 사용될 수 있습니다. 앞으로의 코스에서도 자주 등장할 것이므로 이번 코스에서는 웹 해킹에 자주 사용되는 개발자 도구의 기능에 대해 배우고, 간단한 실습으로 사용법을 익혀보겠습니다.

현대의 주요 브라우저인 크롬, 사파리, 파이어폭스는 모두 개발자 도구를 포함하고 있는데, 이 커리큘럼에서는 크롬 개발자 도구를 사용합니다. 각각의 인터페이스는 다소 다르지만 기능은 흡사합니다. 그러므로 다른 브라우저를 사용하더라도 무리없이 실습을 따라할 수 있을 것입니다.

개발자 도구

개발자 도구를 실행하려면 브라우저를 열고 F12를 누릅니다. 그러면 다음과 같은 개발자 도구 창이 브라우저에 나타납니다. 아래 그림에서 개발자 도구의 간단한 레이아웃 정보를 확인할 수 있습니다.

🔴 빨간색	요소 검사(Inspect) 및 디바이스 툴바(Device Toolbar)
🟠 주황색	기능을 선택하는 패널. 코스에서는 굵게처리된 기능들만을 다룹니다. • Elements: 페이지를 구성하는 HTML 검사 • Console: 자바 스크립트를 실행하고 결과를 확인할 수 있음 • Sources: HTML, CSS, JS 등 페이지를 구성하는 리소스를 확인하고 디버깅할 수 있음 • Network: 서버와 오가는 데이터를 확인할 수 있음 • Performance • Memory • Application: 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터를 확인할 수 있음 • Security • Lighthouse
🟡 노란색	현재 페이지에서 발생한 에러 및 경고 메시지
🟢 녹색	개발자 도구 설정

요소 검사

요소 검사를 활용하면 특정 요소의 개괄적인 정보를 파악하고, 이와 관련된 코드를 쉽게 찾을 수 있습니다.

요소 검사 버튼을 누르고 웹 페이지의 원하는 요소에 마우스를 올리면 대상의 정보가 출력됩니다. 그 상태에서 클릭하면 이와 관련된 HTML 코드가 하이라이팅됩니다.

디바이스 툴바

디바이스 툴바(Device Toolbar)를 활용하면 현재 브라우저의 화면 비율 및 User-Agent를 원하는 값으로 변경할 수 있습니다.

현대에는 웹에 접속하는 장치가 데스크톱, 태블릿, 스마트폰, 노트북 등으로 다양해지고 있으며, 웹 페이지가 렌더링되어야 할 화면 비율도 가지각색으로 많아지고 있습니다. 개발자는 모든 이용자에게 좋은 웹 경험을 줘야하므로, 자신이 개발한 웹 서비스가 다른 장치에서도 잘 작동하는지 점검해봐야 합니다. 디바이스 툴바를 이용하면 이러한 점검을 쉽게 진행할 수 있습니다.

Elements

HTML 읽기

현재 페이지를 구성하는 HTML의 코드를 읽을 수 있습니다.

HTML 수정

코드를 선택한 상태로 단축키 F2를 누르거나 더블 클릭하면, 이를 수정할 수 있습니다. 요소 검사 기능을 같이 활용하면 수정할 코드를 빠르게 선택할 수 있어 편리합니다.

Console

콘솔(Console)은 프론트엔드의 자바스크립트 코드에서 발생한 각종 메세지를 출력하고, 이용자가 입력한 자바스크립트 코드를 실행도 해주는 도구입니다.

자바스크립트로 웹 개발을 할 때, console 오브젝트에는 개발자 도구의 콘솔에 접근할 수 있는 함수가 정의되어 있습니다. 코드를 작성하면서 어떤 변수의 값을 중간에 출력해보고 싶다면, console.log 등을 유용하게 사용할 수 있습니다.

> console
Console {
  log: [Function: bound consoleCall],
  debug: [Function: bound consoleCall],
  info: [Function: bound consoleCall],
  dirxml: [Function: bound consoleCall],
  warn: [Function: bound consoleCall],
  error: [Function: bound consoleCall],
  ...
  context: [Function: context],
  [Symbol(counts)]: Map {},
  [Symbol(kColorMode)]: 'auto' }

💡 단축키
Windows/Linux	Ctrl + Shift + J
macOS	Option(⌥) +Cmd(⌘) + J

콘솔을 사용하면 브라우저에서 자바스크립트를 실행하고 결과를 확인할 수 있습니다. 단축키로 콘솔을 열고, 아래 내용을 콘솔에 입력해보세요.

// "hello" 문자열을 출력하는 alert 함수를 실행합니다.
alert("hello");
// prompt는 popup box로 이용자 입력을 받는 함수입니다.
// 이용자가 입력한 데이터는 return value로 설정됩니다.
var value = prompt('input')
// confirm 는 확인/취소(yes/no)를 확인하는 이용자로부터 입력 받는 함수입니다.
// 이용자의 선택에 따라 Boolean(true/false)타입의 return value를 가집니다.
var true_false = confirm('yes or no ?');
// document.body를 변경합니다.
document.body.innerHTML = '<h1>Refresh!</h1>';
// document.body에 새로운 html 코드를 추가합니다.
document.body.innerHTML += '<h1>HI!</h1>';

Sources

현재 페이지를 구성하는 웹 리소스들을 확인할 수 있습니다.

🔴 현재 페이지의 리소스 파일 트리, 파일 시스템

🟠 선택한 리소스 상세 보기

🟢 디버깅 정보

Watch: 원하는 자바스크립트 식을 입력하면, 코드 실행 과정에서 해당 식의 값 변화를 확인할 수 있습니다.
Call Stack: 함수들의 호출 순서를 스택 형태로 보여줍니다. 예를 들어, A → B → C 순서로 함수가 호출되어 현재 C 내부의 코드를 실행하고 있다면, Call Stack의 가장 위에는 C, 가장 아래에는 A가 위치합니다.
Scope: 정의된 모든 변수들의 값을 확인할 수 있습니다.
Breakpoints: 브레이크포인트들을 확인하고, 각각을 활성화 또는 비활성화할 수 있습니다.

Sources: Debug

또한, Source 탭에서는 원하는 자바스크립트를 디버깅할 수도 있습니다. 하단의 코드는 이용자가 입력한 name, num에 따라 실행 흐름이 바뀌는 코드인데, 이를 다음과 같은 방법으로 디버깅할 수 있습니다. 실습 페이지에서 직접 실습할 수 있습니다.

실습 페이지 열기

원하는 코드 라인을 클릭하여 해당 라인에 브레이크포인트를 설정합니다.
임의의 데이터를 입력하면 해당 브레이크포인트에서 실행이 멈춥니다.
Scope 에서 현재 할당된 변수들을 확인하고 값을 변경할 수 있습니다.

</!DOCTYPE html>
<html>
<head>
    <title>JS Debug</title>
</head>
<body>
    <input type='text' id='input-name' placeholder='name'><br/>
    <input type='text' id='input-num' placeholder='num'><br/>
    <!-- 버튼 클릭 시 button_click함수가 실행됩니다. -->
    <input type='button' onclick='button_click()' value="Click">
<script>
    /*
     name과 num에 대한 변수를 검증하는 함수입니다.
     name이 'dreamhack', num이 31337인 경우 "congratulations !" 문자열을 출력합니다.
    */
    function compare(name, num){
        if(name == 'dreamhack'){
            if(num == 31337){
                console.log("congratulations !");
                return;
            }
        }
        console.log("No !");
    }
    /*
     버튼 클릭 시 실행되는 함수입니다.
     'input-name', 'input-num'의 값을 가져와 compare함수를 실행합니다.
    */
    function button_click() {
        var name = document.getElementById('input-name').value;
        var num = parseInt(document.getElementById('input-num').value);
        compare(name, num);
    }
</script>
</body>
</html>

Network

서버와 오가는 데이터를 확인할 수 있습니다.

🔴 로깅 중지 및 로그 전체 삭제

🟠 로그 필터링 및 검색

🟢 옵션

Preserve log: 새로운 페이지로 이동해도 로그를 삭제하지 않습니다.
Disable cache: 이미 캐시된 리소스도 서버에 요청합니다.

🟡 네트워크 로그

🔵 네트워크 로그 요약 정보

원하는 항목을 선택하면 해당 요청 및 응답 데이터를 확인할 수 있습니다.

Network - Copy

로그를 우클릭하고, Copy에서 원하는 형태로 복사할 수 있습니다.

Copy as fetch로 HTTP Request를 복사하고 Console 패널에 붙여서 실행하면, 동일한 요청을 서버에 재전송할 수 있습니다.

Application

쿠키, 캐시, 이미지, 폰트, 스타일시트 등 웹 애플리케이션과 관련된 리소스를 조회할 수 있습니다.

Cookies에서는 브라우저에 저장된 쿠키 정보를 확인하고, 수정할 수 있습니다.

Console Drawer

개발자 도구에 새로운 콘솔창을 열어 가시성과 효율성을 높일 수 있습니다. 다음과 같이 네트워크 패널과 콘솔 패널을 동시에 사용할 수도 있습니다.

💡단축키
Windows, MAC	ESC

페이지 소스 보기

페이지 소스 보기를 통해 페이지와 관련된 소스 코드들을 모두 확인할 수 있습니다.

💡단축키
Windows/Linux	Ctrl + U
macOS	Cmd(⌘) + Opt(⌥) + U

Secret browsing mode

시크릿 모드에서는 새로운 브라우저 세션이 생성되며, 브라우저를 종료했을 때 다음 항목이 저장되지 않습니다.

방문 기록
쿠키 및 사이트 데이터
양식에 입력한 정보
웹사이트에 부여된 권한

일반적으로 브라우저의 탭들은 쿠키를 공유하는데, 시크릿 모드로 생성한 탭은 쿠키를 공유하지 않습니다. 이를 이용하면 같은 사이트를 여러 세션으로 사용할 수 있어서 다수의 계정으로 서비스를 점검할 때 유용합니다.

💡 단축키
Windows/Linux	Ctrl + Shift + N
macOS	Cmd(⌘) + shift(⇧) + N

마치며

이번 강의를 통해 웹 브라우저의 개발자 도구에 대해 알아보았습니다. 개발자 도구는 원래 개발자들의 편의를 위해 도입되었지만, 실제로는 취약점을 진단하려는 이용자들에게도 유용하게 사용되고 있습니다.

이 커리큘럼에서도 개발자 도구를 사용하여 웹 서비스의 취약점을 발견하고, 이를 공격하는 다양한 실습들을 해볼 것입니다. 강의에서는 기본적인 기능들만 소개했는데, 실습과정에서 추가적으로 설명이 필요한 기능들은 그때그때 짚고 넘어갈 것입니다.

다음 강의에서는 클라이언트의 상태를 저장하는 쿠키와 세션에 대해서 알아보겠습니다.

키워드

• 개발자 도구 (DevTools): 웹 페이지를 진단할 때 사용하는 브라우저 도구

Browser DevTools