Web Hacking : Learn The Basics (2)

Minchae Kim·2023년 8월 4일

Web Hacking

목록 보기

2/8

📌 Background : Web Browser

웹 브라우저(Web Browser)는 뛰어난 사용자 경험(User eXperience, UX)을 제공하는 소프트웨어 중 하나이다. 이용자는 브라우저를 이용하여 쉽게 정보를 검색하고, 동영상을 보고, 파일을 내려받지만 내부에서 어떠한 연산이 일어나는지는 전혀 알지 못한다.

웹 브라우저가 하는 동작에 대해서 간단히 나열해보면 아래와 같다.

웹 브라우저의 주소창에 입력된 주소(A)를 해석 (URL 분석)

A에 해당하는 주소를 탐색 (DNS 요청)

HTTP를 통해 A에 요청

A의 HTTP 응답 수신

리소스 다운로드 및 웹 렌더링 (HTML, CSS, Javascript)

최근에는 브라우저가 보안과 개발에 필요한 도구들도 제공하고 있다. HTTPS의 적용 여부 및 서버 인증서의 안전성 여부를 식별해주는 것이 있다.

🚩 URL

URL은 Uniform Resource Locator의 약자로, 웹에 있는 리소스의 위치를 표현하는 문자열이다. 브라우저로 특정 웹 리소스에 접근할 때는, URL을 사용하여 이를 서버에 요청한다.

URL은 Scheme, Authority (Userinfo, Host, Port), Path, Query, Fragment 등으로 구성된다.

Scheme : 웹 서버와 어떤 프로토콜로 통신할지 나타낸다. 보통 HTTP/HTTPS를 사용하며, 이외에도 mailto, tel을 통해 메일 클라이언트나 연락처 프로그램을 열기도 한다.
Host : 웹 브라우저가 어디에 연결할지 정하는 호스트 주소이다. 접속할 웹 서버의 주소에 대한 정보를 가지고 있다. 도메인이나 IP Address가 호스트로써 사용될 수 있다.
Port : 접속할 웹 서버의 포트에 대한 정보를 가지고 있다.
Path : 웹 브라우저가 연결하고자 하는 리소스에 대한 경로이다. /로 구분된다.
Query : 웹 브라우저가 서버에 전달하는 파라미터이다. URL에서 ? 뒤에 위치한다.
Fragment : 웹 브라우저만 가지고 있는 데이터이다. 메인 리소스(페이지) 내에서 서브 리소스를 식별할 때 사용된다. # 문자 뒤에 위치한다.

🚩 Host 값

URL 구성 요소 중 Host는 웹 브라우저가 접속할 웹 서버의 주소를 나타낸다. Host는 Domain Name, IP Address의 값을 가질 수 있다.

🔹 IP Address

IP Address는 네트워크상에서 통신이 이루어질 때 장치를 식별하기 위해 사용되는 주소이다. 불규칙한 숫자로 이루어져 있기에, 일반적으로는 도메인의 특성을 담은 이름을 정의하여 IP 대신 사용한다.

🔹 Domain Name

Domain Name을 Host 값으로 이용할 때, 브라우저는 Domain Name Server(DNS)에 도메인 네임을 질의하고, DNS가 응답한 IP Address를 사용한다.

🚩 웹 렌더링

웹 렌더링(Web Rendering)은 서버로부터 받은 리소스를 이용자에게 시각화하는 행위를 말한다. 서버의 응답을 받은 웹 브라우저는 리소스의 타입을 확인하고, 적절한 방식으로 이용자에게 전달하다.

Ex) 서버로부터 HTML과 CSS를 받으면, 브라우저는 HTML을 파싱하고 CSS를 적용하여 이용자에게 보여준다.

웹 렌더링은 웹 렌더링 엔진에 의해서 이루어지는데, 브라우저별로 서로 다른 엔진을 사용한다. 사파리는 웹킷(Webkit), 크롬은 블링크(Blink), 파이어폭스는 개코(Gecko) 엔진을 사용한다. 각각의 엔진에 따라 렌더링 과정과 순서, 속도의 차이는 있지만, HTML을 파싱하고 시각화하여 이용자에게 보여주는 것은 동일하다.

📌 Tools : Browser DevTools

브라우저 개발자 도구(DevTools)를 이용하면 HTML과 CSS 코드를 브라우저에서 수정하고 결과를 바로 확인할 수 있고, 자바스크립트 코드를 대상으로 디버거도 제공한다. 서버와 오가는 HTTP 패킷도 상세히 보여주므로 프로토콜 상에서 발생하는 문제도 발견할 수 있다.

개발자 도구가 웹 서비스를 진단하는 데 쓰이는 도구인 만큼, 웹 취약점을 이용하려는 공격자에게도 유용하게 사용될 수 있다. 현대의 주요 브라우저인 크롬, 사파리, 파이어폭스는 모두 개발자 도구를 포함하고 있다. 각각의 인터페이스는 다소 다르지만, 기능은 흡사하다.

🚩 개발자 도구

Red Part : 요소 검사(Inspect) 및 디바이스 툴바(Device Toolbar)
Orange Part : 기능을 선택하는 패널이다. 몇 가지 기능에 대해 적어보면,
- Elements : 페이지를 구성하는 HTML 검사
- Console : 자바스크립트를 실행하고 결과를 확인할 수 있음.
- Sources : HTML, CSS, JS 등 페이지를 구성하는 리소스를 확인하고 디버깅할 수 있음.
- Network : 서버와 오가는 데이터를 확인할 수 있음.
- Aplication : 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터를 확인할 수 있음.
Yellow Part : 현재 페이지에서 발생한 에러 및 경고 메세지
Green Part : 개발자 도구 설정

🔹 요소 검사

요소 검사를 활용하면 특정 요소의 개괄적인 정보를 파악하고, 이와 관련된 코드를 쉽게 찾을 수 있다. 요소 검사 버튼을 누르고 웹 페이지의 원하는 요소에 마우스를 올리면, 대상의 정보가 출력된다. 그 상태에서 클릭하면 이와 관련된 HTML 코드가 하이라이팅된다.

🔹 디바이스 툴바

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

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

🔸 Elements

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

🔸 Console

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

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

아래는 NodeJS의 console 오브젝트이다.

> 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이다.

// "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

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

Red Part : 현재 페이지의 리소스 파일 트리, 파일 시스템
Orange Part : 선택한 리소스 상세 보기
Green Part : 디버깅 정보
- Watch : 원하는 자바스크립트 식을 입력하면, 코드 실행 과정에서 해당 식의 값 변화를 확인할 수 있다.
- Call Stack : 함수들의 호출 순서를 스택 형태로 보여준다. 예를 들어, A > B > C 순서로 함수가 호출되어 현재 C 내부의 코드를 실행하고 있다면, Call Stack의 가장 위에는 C, 가장 아래에는 A가 위치한다.
- Scope : 정의된 모든 변수들의 값을 확인할 수 있다.
- Breakpoints : 브레이크포인트들을 확인하고, 각각을 활성화 또는 비활성화할 수 있다.

🔸 Sources : Debug

Sources 탭에서는 원하는 자바스크립트를 디버깅할 수도 있다. 아래의 코드는 이용자가 입력한 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

서버와 오가는 데이터를 확인할 수 있다. 또한 원하는 항목을 선택하면 해당 요청 및 응답 데이터를 확인할 수 있다.

Red Part : 로깅 중지 및 로그 전체 삭제
Orange Part : 로그 필터링 및 검색
Green Part : 옵션
- Preserve log : 새로운 페이지로 이동해도 로그를 삭제하지 않습니다.
- Disable cache : 이미 캐시된 리소스도 서버에 요청합니다.
Yellow Part : 네트워크 로그
Blue Part : 네트워크 로그 요약 정보

🔸 Network : Copy

로그를 우클릭하고, Copy에서 원하는 형태로 복사할 수 있다. Copy as fetch로 HTTP Request를 복사하고, Console 패널에 붙여서 실행하면, 동일한 요청을 서버에 재전송할 수 있다.

🔸 Application

쿠키, 캐시, 이미지, 폰트, 스타일시트 등 웹 애플리케이션과 관련된 리소스를 조회할 수 있다. Cookies에서는 브라우저에 저장된 쿠키 정보를 확인하고, 수정할 수 있다.

🔸 Console Drawer

개발자 도구에 새로운 콘솔창을 열어 가시성과 효율성을 높일 수 있다. 아래와 같이 네트워크 패널과 콘솔 패널을 동시에 사용할 수 있다. Windows와 MAC에서의 단축키는 ESC이다.

🚩 기타 브라우저 기능

Ctrl + U 단축키를 활용하면 페이지 소스 보기를 통해 페이지와 관련된 소스 코드들을 모두 확인할 수 있다.

시크릿 모드(Secret Browsing Mode)에서는 새로운 브라우저 세션이 생성되며, 브라우저를 종료했을 때 방문 기록, 쿠키 및 사이트 데이터, 양식에 입력한 정보, 웹사이트에 부여된 권한 등의 항목이 저장되지 않는다. 단축키는 Windows/Linux에서 Ctrl + Shift + N이다.

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

Minchae Kim

The Bloom of Youth

이전 포스트

Web Hacking : Learn The Basics (1)

다음 포스트