정보 출처: https://dreamhack.io/
웹이란 무엇인가?
- 웹이란 무엇인가?
웹 해킹을 포함한 다양한 분야에서의 해킹은 본래의 의도와는 다른 행위를 발생시키는 것을 의미한다. 그런 의도치 않은 행위를 발생시키기 위해 설계 또는 운영의 약점을 찾을 수 있어야 한다. 이를 위해서는 설계자 또는 운영자보다 해상 시스템에 대한 더 높은 이해도를 가지고 있어야 한다. 이런 이
유로 인해 웹 해킹을 학습하기 이전에 웹에 대한 기본적인 이해가 필요하다.
웹의 정확한 어원은 월드 와이드 웹(World Wide Web, WWW, W3)이지만, 간단하게 웹(Web)으로 부르는 경우가 많다. 웹의 사전적 의미인 거미줄과 같이 인터넷상에서 각각의 사용자(컴퓨터)가 연결되어 서로 정보를 공유한다는 의미에서 유래되었다.
인터넷상의 서비스 중 HTTP를 이용하여 정보를 공유하는 통신 서비스를 웹, 서비스를 제공하는 대상을 웹 서버(Web Server), 서비스를 받는 사용자를 웹 클라이언트(Web Client)라고 부른다.
웹은 웹 브라우저라는 소프트웨어의 등장과 발전으로 인해 대중적인 접근성이 높아지게 되었으며, 다양한 형태의 서비스가 가능하다는 점 때문에 전 세계적으로 가장 많이 사용되는 인터넷 서비스가 되었다.
인터넷 서비스 중 손쉽게 접근 가능하다는 점에서 단순히 웹 사이트에 접속하는 형태 외에도 모바일 서비스, IoT 장비의 관리 페이지 등 다양한 형태로 일상생활 곳곳에서 사용되고 있다.
웹이란 무엇인가?
- 웹의 역사
초기 웹은 저장된 문서의 내용을 출력해 사용자에게 제공하는 간단한 서비스였다.
시간이 지나면서 사용자의 입력과 입력에 따른 기능 수행이 추가되고 업무, 금융, 쇼핑 등 다양한 분야에서 사용할 수 있도록 발전해왔다.
간단한 예시로 아래 사진의 마이크로소프트(Microsoft, MS) 홈페이지의 과거와 최근 페이지의 차이를 통해 서비스 형태가 많은 부분 달라졌음을 알 수 있다. 과거에는 별다른 로직 없이 단순한 정적 페이지를 보여주는 기능을 하였다면 최근에는 정보 검색뿐만 아니라 온라인 쇼핑몰의 기능을 제공하는 등 사용자와 많은 부분을 상호작용 한다.
과거에는 오프라인에서 진행되었거나 물리적으로 저장되었던 정보들이 웹에서 접근 가능한 디지털 정보로 바뀌었다. 개인 정보(이름, 전화번호, 주소, 카드번호 등) 및 기업의 자산 등이 웹에서 접근 가능해짐에 따라 웹 보안의 중요성이 강조되고 있다.
과거 서비스 페이지는 단순히 정보를 제공하거나 마이크로소프트의 소프트웨어 중 하나인 Internet Explorer를 다운로드할 수 있도록 제공하는 기능 외에는 특별한 로직을 확인할 수 없었다.
최근 서비스 페이지에서는 사용자가 회원가입/로그인, 마이크로소프트 서비스 내에서 원하는 정보를 검색하거나 마이크로소프트의 제품을 웹을 통해 구매할 수도 있게 되었다.
웹 기초 지식
- 웹 기초지식
아래 그림은 사용자가 드림핵 웹 사이트(http://dreamhack.io)에 접속시 발생하는 과정을 간략히 표현한 그림이다.
이번 장에서 다루는 키워들은 아래와 같다.
- Web Browser(웹 브라우저): 웹에 접속하기 위해 사용하는 소프트웨어
- Web Resource: 웹 상에 존재하는 모든 콘텐츠(HTML, CSS,JS, PDF, PNG 등)
- URI(URL): URI는 Uniform Resource Identifier의 약자로 리소스를 식별하기 위한 식별자이다.
- HTTP(HyperText Transfer Protocol): 인터넷 서비스에서는 서비스 대상 간 통신 규약(Protocol)을 지정하여 통신한다. HTTP는 웹을 이용하기 위한 통신 규약이다.
문서 편집을 하기 위해 워드 프로세서 소프트웨어를 사용하고, 데이터 분석, 경리 및 회계 등의 계산을 위해 스프레드시트 소프트웨어를 사용한다.
마찬가지로 웹을 사용하기 위해 웹 브라우저를 사용한다.
웹 브라우저는 HTTP를 통해 인터넷 상에서 통신을 하며 서버로부터 전달받은 다양한 웹 리소스들을 가공해 사용자가 웹과 HTTP의 동작 원리를 알지 못해도 웹을 사용할 수 있도록 도와주는 소프트웨어이다.
대중적으로 많이 쓰이는 웹 브라우저는 Chrome, Edge, Safari, Firefox 등이 있다. 각 브라우저들이 수행하는 기본적인 기능은 동일하지만 HTML/CSS/JS 해석 및 실행을 빠르게 하거나 내장 로그인을 통해 브라우저를 사용하는 모든 디바이스 동기화 기능 등에 차별을 둬 사용자들이 자사의 브라우저를 사용하게끔 많은 노력을 하고 있다.
각 브라우저별 특징은 아래와 같다
네트워크 프로그램: nc 또는 telnet과 같은 네트워크 프로그램을 통해 웹을 사용하기 위해서는 웹 서버가 이해하고 해석할 수 있는 형태(HTTP)의 데이터를 직접 작성하여 전송하여야 한다.
$ echo -ne "GET / HTTP/1.1\r\nHost: example.com\r\n\r\n"| nc example.com 80
HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: max-age=604800
Content-Type: text/html; charset=UTF-8
Date: Fri, 10 Jan 2020 07:24:17 GMT
Etag: "3147526947+gzip"
Expires: Fri, 17 Jan 2020 07:24:17 GMT
Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
Server: ECS (sgt/B3B1)
Vary: Accept-Encoding
X-Cache: HIT
Content-Length: 1256
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
...
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is for use in illustrative examples in documents. You may use this
domain in literature without prior coordination or asking for permission.</p>
<p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>
nc: (netcat은 TCP 또는 UDP를 사용하여 네트워크 연결을 읽고 쓰는 데 사용되는 컴퓨터 네트워킹 유틸리티)
telnet: (텔넷은 인터넷이나 로컬 영역 네트워크 연결에 쓰이는 네트워크 프로토콜)
CLI 프로그램: curl, wget과 같은 CLI 프로그램을 통해 웹을 사용하게 되면 서버가 응답하여 주는 데이터를 단순히 출력만 하게 된다. 즉 html을 해석하여 화면에 출력하는 기능, css로 스타일을 입혀주는 기능, 자바스크립트를 실행하는 기능 등은 포함되어 있지 않다.
$ curl example.com
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
...
</style>
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is for use in illustrative examples in documents. You may use this
domain in literature without prior coordination or asking for permission.</p>
<p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>
웹 브라우저: 먼저 웹 브라우저에서 웹을 사용하기 위해서는 주소창에 접속하고자 하는 주소를 입력한다. 웹 브라우저는 사용자가 요청한 주소를 대신 접속해 서버에서 응답한 데이터를 해석한 후 화면에 출력한다.
웹 기초 지식
- Web Resource
웹 리소스는 웹에서 사용하는 콘텐츠를 의미한다. 웹 브라우저의 주소창에
http://dreamhack.io/index.html 주소를 입력하게 되면 dreamhck.io에 존재하는 /index.html 리소스에 대해 요청을 수행하는 것을 의미한다.
웹 리소스를 가리키는 주소는 URL(Uniform Resource Locator)이라고 한다. 초기 웹에서는 경로가 실제 서버 내에 존재하는 파일의 실제 위치와 동일한 경우가 많았으나 최근 들어 웹 브라우저의 본래 목적인 추상화된 경로를 사용하고 있다.
사용자가 웹 브라우저를 통해 보게 되는 페이지를 구성하는 대표적인 웹 리소스들은 아래와 같다.
- HTML(Hyper Text Markup Language) : 웹 문서의 뼈대를 구축하기 위한 마크업 언어이다. 정해진 태그와 속성을 지정하여 문서를 구성한다.
- CSS(Cascading Style Sheets): HTML이 표시되는 방법을 정의하는 스타일 시트 언어이다. 이미지, 태그, 글자 등 다양한 웹 리소스들의 출력 시 스타일을 설정한다.
- JS(JavaScript): HTML과 CSS는 화면에 출력되는 뼈대를 그리는 것이며, JS와 같은 Client Side Script를 이용하여 페이지 내에서의 행위들을 설정할 수 있다.
- Etc: 문서, 이미지, 동영상, 폰트 등
💬
아래 사진에서는 HTML, CSS, JS를 이용하여 간단한 웹 페이지를 구성한 화면과 코드의 예시이다. 사용자의 요청이 들어오면 서버는 아래 코드와 같은 웹 리소스들로 응답하며, 웹 브라우저는 사용자가 볼 수 있는 형태로 가공하여 화면에 출력한다.
[index.html]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<script src="main.js"></script>
</head>
<body>
<p><img src="/assets/dreamhack_logo.png"></p>
<strong id="tag-test">hello</strong>
<button onclick="myFunction()">Click me</button><br/><br />
<input placeholder="Enter Text" type="text" onKeyUp="myKeyEvent(this)">
<p id="inputLog"></p>
</body>
</html>[theme.css]
#tag-test {
color: cornflowerblue;
}[main.js]
function myFunction() {
const tagTest = document.getElementById('tag-test');
if (tagTest.innerHTML === 'hello') {
tagTest.innerHTML = 'world';
} else {
tagTest.innerHTML = 'hello';
}
}
function myKeyEvent(e) {
var inputLog = document.getElementById('inputLog');
inputLog.textContent = e.value;
}웹 기초 지식
URI(URL)
URI는 Uniform Resource Identifier의 약자로 리소스를 식별하기 위한 식별자이다. 우리에게 좀 더 친숙한 용어인 URL은 Uniform Resource Locator의 약자로 리소스의 위치를 식별하기 위한 URI의 하위 개념이다.
웹에 접속할 때 웹 사이트의 주소(위치)를 이용해 접근하는 것은 URL이자 URI를 사용한 것이다.
최근 들어 URI와 URL을 혼용해서 사용하는 추세이기 때문에 드림핵에서는 상위 개념인 URI로 통합하여 설명한다.
URI는 Scheme, Authority (Userinfo, Host, Port), Path, Query, Fragment의 구성 요소를 가진다.
각 요소에 대한 상세한 설명은 해당 요소를 이용한 공격 기법을 다룰 때 설명하고, 지금은 웹에 접속할 때 사용되는 가장 기본적은 요소만 다루겠다.
💬
아래 그림은 URI를 구성 요소 별로 나눈 그림이다.
💬
아래는 자주 쓰이는 웹 URI 구성 요소를 설명한다.
- Scheme: 웹 서버에 접속할 때 어떤 체계(프로토콜)을 이용할지에 대한 정보를 담고 있다.
- Host: Authority의 일부로써 접속할 웹 서버의 호스트(서버 주소)에 대한 정보를 가지고 있다.
- Port: Authority의 일부로써 접속할 웹 서버의 포트에 대한 정보를 가지고 있다.
- Path: 접속할 웹 서버의 경로에 대한 정보를 가지고 있으며 / 문자로 구분된다.
- Query: 웹 서버에 전달하는 파라미터(추가적인 정보)이며 URI에서 ? 문자 뒤에 붙는다.
- Fragment: 메인 리소스 내에 존재하는 서브 리소스에 접근할 때 이를 식별하기 위한 정보를 담고 있으며 URI에서 # 문자 뒤에 붙는다.
웹 기초 지식
- Encoding
Encoding(인코딩)은 문자 또는 기호 등의 정보, 형태를 표준화, 보안 등의 목적으로 다른 형태나 형식으로 변환 처리 혹은 그 처리 방식을 말한다. 이렇게 변환된 형태를 원래 형태로 변경하는 것을 Decoding(디코딩)이라고 한다.
Encoding(인코딩):
알고리즘이 모두 공개되어 있고 키와 같은 요소가 포함되어 있지 않아서 모두가 원래의 정보로 복원이 가능하다.
Encryption(인크립션):
양방향 암호 알고리즘이다. 일치한 알고리즘과 유효한 키를 가지고 있다면 원래의 정보로 복원이 가능하다.
웹에서 사용하는 대표적인 인코딩은 URL과 HTML Entity가 있다.
• URL Encoding(percent encoding)
URI 구조내에서 예약어(구분자)로 사용되는 문자들을 전송하고자 할 때 사용한다. 예약어는 URI 구조내에서 문법적으로 중요한 의미를 가지고 있기 때문에 문법적으로 사용하지 않을 경우에는 반드시 인코딩해 사용해야 한다.
GET 메소드로
a=?b,c=&d의 데이터를 보내기 위해서는
http://example.com/?a= b&c= d의 형태로 전송되어야 서버에서도 정상적으로 데이터를 해석하여 처리할 수 있다.
인코딩 방식은 입력된 문자를 Ascii테이블에서 매칭되는 Hex 값 앞에 % 문자를 붙이면 된다.
| 문자 | URL 인코딩 |
|---|---|
| ? | %3F |
| # | %23 |
| & | %26 |
• HTML entity Encoding
HTML 문서 내에서 사용하는 문자열들이 HTML에서 사용하는 태그로 인식하지 않도록 하기 위해 사용한다.
인코딩 방식은 입력된 문자를 Ascii테이블에서 매치되는 Hex 값 앞에 &#x를 붙이거나, 주요한 문자들에 대해서 지정되어 있는 Entity name을 사용하여 인코딩할 수 있다.
