웹해킹_1주차

22-2학기 (SISS)/웹해킹

웹해킹_1주차

road23 2022. 9. 10. 12:29

https://dreamhack.io/lecture/roadmaps/1

Web Hacking

웹 해킹을 공부하기 위한 로드맵입니다.

dreamhack.io

1주차 (9/5~9/11) : Stage 1,2

Stage1 : Introduction

1. 소개

W31c0m3, w3b h4ck3rs!

웹은 우리의 삶과 밀접한 핵심 기술 중 하나이다.

사람들은 웹을 이용하여 필요한 정보를 검색하고, 게임을 하며, 온라인으로 쇼핑을 하기도 한다. 이러한 웹 서비스들은 관련 기술이 발전하여 그 종류 또한 다양해졌다. 웹을 기반으로 한 금융, 길 찾기, 쇼핑, 협업 등의 서비스들은 일상의 한 부분이 되었다.

웹 기술에 대한 의존성이 높아진 만큼, 웹 서비스를 안전하게 구현하고, 관리하는 것이 매우 중요한 과제가 되었다.

이 강의는 안전한 웹 서비스의 구현을 위해 반드시 알아둬야 할 웹 해킹의 기초적인 지식과 기술을 전달하는 것을 목표로 한다.

이 강의에서는 Flask, NodeJS, Spring 중 한가지 프레임워크로 작성된 웹 소스를 읽고, 이해할 수 있어야 한다.

Stage2 : Background - Web (1/2)

1.웹 기본상식

[Background: HTTP/HTTPS]

1.들어가며

1)인코딩

컴퓨터의 모든 데이터는 0과 1로 구성된다. 0과 1로 우리의 문자를 표현하는 것은 일종의 약속인 인코딩(Encoding) 표준 덕분이다. 이 인코딩에는 대표적으로 아스키(Ascii)와 유니코드(Unicode)가 있다.

아스키는 7비트 데이터에 대한 인코딩 표준이다. 아스키를 이용하면 알파벳과 특수 문자 등을 표현할 수 있다.

컴퓨터가 개발된 초기에는 각 문자권마다 고유의 인코딩 표준을 사용했었다. 영어는 아스키, 한글은 CP-949, EUC-KR 등을 사용했었다. 그런데 이러한 방식은 호환성 측면에서 국제 소프트웨어를 개발하려는 회사에 큰 부담이 됐었다.

(예- 가끔 소프트웨어를 실행했을 때 글자가 --- 등으로 출력되는 것이 인코딩이 호환되지 않아 발생하는 문제이다.)

-> 이러한 어려움을 해결하고자 유니코드라는 새로운 표준이 만들어졌다.

"Uni(하나의)"라는 접두사가 나타내듯, 유니코드는 모든 언어의 문자를 하나의 표준에 담겠다는 목표로 제정되었다. 유니코드에서 한 문자는 최대 32개의 비트로 표현된다. 32비트로 표현할 수 있는 정보의 가짓수는 2^32, 대략 42억 개이다. 아주 아주 넓은 공간이다. 그래서 최근에는 한글, 한자, 히라가나, 가타카나, 알파벳과 같은 문자 외에 각종 이모지(Emoji)들도 유니코드에 포함되고 있다.

-> 인코딩을 이용하면 우리의 문장을 컴퓨터에 저장하고, 표현할 수 있다. 그리고 네트워크를 이용하면 인코딩한 정보를 다른 사람들과 쉽게 교환할 수도 있다.

2)통신 프로토콜

웹 서버에 있는 리소스를 클라이언트가 받아보려면 클라이언트는 웹에게 특정 리소스를 지정하여 제공해달라고 요청해야 한다. 그러면 서버가 해당 요청을 이해하고, 대응되는 동작을 통해 클라이언트에게 리소스를 반환한다. 여기서 클라이언트의 행위를 요청(Request), 서버의 행위를 응답(Response)이라고 한다.

프로토콜(Protocol)은 규격화된 상호작용에 적용되는 약속을 이른다. 일상생활의 상호작용은 대부분 관습 또는 에티켓이라는 형태의 느슨한 프로토콜을 따른다. 일상에서 사람과 사람이 통신할 때는 관습을 따르되 약간의 융통성을 발휘해도 정보를 교환하는 데 큰 문제가 발생하지 않는다.

반면, 컴퓨터와 통신할 때는 비교적 엄격한 프로토콜을 사용해야 한다. 왜냐하면, 컴퓨터가 해석의 융통성을 발휘하게 하는 것은 매우 어렵고, 이 과정에서 오히려 통신 오류가 발생할 가능성을 높일 수 있기 때문이다.

그래서 많은 컴퓨터 통신 프로토콜은 각 통신 주체가 교환하는 데이터(이하 메시지)를 명확히 해석할 수 있도록 문법(Syntax)을 포함한다. 일반적으로 이 문법에 어긋나는 메시지는 잘못 전송된 것으로 취급하여 무시된다.

제정된 표준 통신 프로토콜에는 네트워크 통신의 기초가 되는 TCP/IP, 웹 애플리케이션이 사용하는 HTTP, 파일을 주고받을 때 사용하는 FTP 등 매우 많은 종류가 있다.

2.HTTP

1)HTTP

HTTP(Hyper Text Transfer Protocol)란 서버의 클라이언트의 데이터 교환을 요청(Request)과 응답(Response) 형식으로 정의한 프로토콜이다. 팀 버너스 리(Team Berners-Lee)와 그의 팀이 제정한 이후, 현대 웹 서비스의 바탕이 되는 프로토콜로 자리 잡았다.

HTTP의 기본 메커니즘은 클라이언트가 서버에게 요청하면, 서버가 응답하는 것이다. 웹 서버는 HTTP 서버를 HTTP 서비스 포트에 대기시킨다. 클라이언트가 서비스 포트에 HTTP 요청을 전송하면, 이를 해석하여 적절한 응답을 반환한다.

2)HTTP 메시지

HTTP 메시지에는 클라이언트가 전송하는 HTTP 요청, 그리고 서버가 반환하는 HTTP 응답이 있다.

-HTTP 헤드

: HTTP 헤드의 각 줄은 CRLF로 구분되며, 첫 줄은 시작 줄(Start-line), 나머지 줄은 헤더(Header)라고 부른다. 헤드의 끝은 CRLF 한 줄로 나타낸다. 시작 줄의 역할은 요청과 응답에서 큰 차이가 있다. 헤더는 필드와 값으로 구성되며 HTTP 메시지 또는 바디의 속성을 나타낸다. 하나의 HTTP 메시지에는 0개 이상의 헤더가 있을 수 있따.

-HTTP 바디

: HTTP 바디는 헤드의 끝을 나타내는 CRLF 뒤, 모든 줄을 말한다. 클라이언트나 서버에게 전송하려는 데이터가 바디에 담긴다.

3) HTTP 요청

HTTP 요청은 서버에게 특정 동작을 요구하는 메시지이다. 서버는 해당 동작이 실현 가능한지, 클라이언트가 그러한 동작을 요청할 권한이 있는지 등을 검토하고, 적절할 때만 이를 처리한다.

-시작 줄

HTTP 요청의 시작 줄은 메소드(Method), 요청 URI(Request-URI), 그리고 HTTP 버전으로 구성된다. (각각은 띄어쓰기로 구분한다.)

메소드는 URI가 가리키는 리소스를 대상으로, 서버가 수행하길 바라는 동작을 나타낸다.

GET은 리소스를 가져오라는 메소드이다. 이용자가 브라우저에 웹 서버의 주소를 입력하거나 하이퍼링크를 클릭하면, 새로운 페이지를 렌더링하기 위해 리소스가 필요하다. 이때 브라우저는 GET 요청을 서버에 전송하여 리소스를 받아온다. 반대로, POST는 리소스로 데이터를 보내는 메소드이다. 전송할 데이터는 보통 HTTP 바디에 포함된다.

(로그인할 때 입력하는 ID와 비밀번호, 게시판에 작성하는 글 등이 POST로 서버에 보내진다.)

4) HTTP 응답

HTTP 응답은 HTTP 요청에 대한 결과를 반환하는 메시지이다. 요청을 수행했는지, 하지 않았는지, 안 했다면 이유는 무엇인지와 같은 상태 정보(Status), 그리고 클라이언트에게 전송할 리소스가 포함된다.

-시작 줄

: HTTP 응답의 시작 줄은 HTTP 버전, 상태 코드(Status Code), 그리고 처리 사유(Reason Phrase)로 구성된다. (각각은 띄어쓰기로 구분된다.)

HTTP 버전은 서버에서 사용하는 HTTP 프로토콜의 버전을 나타낸다. 상태 코드는 요청에 대한 처리 결과를 세 자릿수로 나타낸다.

5) HTTP Reauest & Response

원하는 메소드를 선택하여 요청은 전송하면 전송된 요청 및 응답의 구조를 확인할 수 있다.

3. HTTPS

HTTP의 응답과 요청은 평문으로 전달된다. 만약 누군가 이를 가로챈다면 중요한 정보가 유출될 수 있다.

HTTPS는 TLS 프로토콜을 도입하여 이런 문제점을 보완한다. TLS는 서버와 클라이언트 사이에 오가는 모든 HTTP 메시지를 암호화한다. 공격자가 중간에 메시지를 탈취하더라도 이를 해석하는 것은 불가능하며, 결과적으로 HTTP 통신이 도청과 변조로부터 보호된다.

4. 마치며

거의 모든 현대 웹 서비스는 HTTP/HTTPS 프로토콜들을 기반으로 한다. 그런데 우리는 웹 페이지를 방문하기 위해 HTTP 요청을 보내지도, 응답을 받아 해석하지도 않는다. 이는 크롬, 사파리, 파이어폭스로 대표되는 웹 브라우저(Web Browser) 덕분이다.

[Background: Web]

1. 들어가며

과거에는 시간과 거리의 제약을 받아 먼 거리의 상대와 소통하기 어려웠지만, 현대에는 기술이 발전하여 전 세계에 걸친 통신망을 바탕으로 다양한 나라의 사람들과 실시간으로 통신할 수 있게 되었다.

웹(World Wide Web, W3, Web)은 현대 정보 통신을 대표하는 통신 수단 중 하나이다. 웹이란, 인터넷이라는 통신망을 활용하여 구현된 전 지구적 정보 공간이다. 시간과 장소에 구애받지 않고 인터넷에 접속할 수만 있다면, 웹에서 정보를 구하거나 공유할 수 있다.

2. 웹

1) 웹

인터넷을 기반으로 구현된 서비스 중 HTTP를 이용하여 정보를 공유하는 서비스를 웹이라고 한다. 여기서 정보를 제공하는 주체를 웹 서버(Web Server), 정보를 받는 이용자를 웹 클라이언트(Web Client)라고 한다. 여기서, HTTP란 웹상에서 서로 통신을 하기 위해 정해둔 일종의 규칙이다.

-웹의 발전과 웹 보안의 중요성

: 웹과 관련된 기술이 발전하면서 웹 서비스는 금융, 쇼핑, 협업 등 다양한 분야에서 이용자에게 편의를 주는 복잡한 서비스로 진화했다.

웹에서 처리하는 정보 자산들이 많아짐에 따라 이들을 안전하게 보관하고 처리해여 할 필요성도 함께 증가하였다. 웹을 통한 정보의 교환 과정에서 이러한 민감한 정보들이 유출되거나 악용되지 않도록 보호하는 웹 보안의 중요성이 대두하고 있다.

-웹 서비스, 프론트엔드와 백엔드

: 웹 서비스는 다양한 기능을 수행하는 형태로 발전했다. 이전의 웹 서비스가 이용자가 요청하는 정보를 제공하기만 하는 수동적인 형태의 서비스였다면, 현재는 이용자의 요청을 해석하고 가공하여 필요한 정보와 기능을 제공하는 능동형 서비스에 가깝다.

이런 서비스 구조에서, 이용자의 요청을 받는 부분을 프론트엔드 (Front-end), 요청을 처리하는 부분을 백엔드 (Back-end)라고 부른다. (호텔 프론트에 이런저런 서비스를 요청하면 뒤의 공간에서 고객 모르게 복잡한 일들이 벌어지는 것과 비슷하다.)

프론트엔드는 이용자에게 직접 보여지는 부분으로, 웹 리소스 (Web Resource)라는 것으로 구성된다. 페이지가 보여주고 있는 정보들은 모두 웹 리소스에 명시되어 있다. 페이지에 담기는 글, 글자들의 색깔과 모양, 배경 색상, 이미지의 크기나 투명도 등이 관련 언어로 적혀있다.

2) 웹 리소스

웹 리소스란 웹에 갖춰진 정보 자산을 의미한다. 모든 웹 리소스는 고유의 Uniform Resource Indicator(URI)를 가지며, 이를 이용하여 식별된다. 웹의 프론트엔드를 구성하는 대표적인 웹 리소스들은 다음과 같다.

-Hyper Text Markup Language(HTML)

: 웹 문서의 뼈와 살을 담당한다. 태그와 속성을 통한 구조화된 문서 작성을 지원한다.

-Cascading Style Sheets(CSS)

: 웹 문서의 생김새를 지정한다. 웹 리소스들의 시각화 방법을 기재한 스타일 시트이다. 글자의 색깔이나 모양, 배경, 색상, 이미지의 크기나 위치 등을 CSS로 지정할 수 있다. 브라우저는 이를 참고하여 웹 문서를 시각화한다.

-JavaScript(JS)

: 웹 문서의 동작을 정의한다. 이용자가 버튼을 클릭했을 때, 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS로 구현할 수 있다. JS는 이용자의 브라우저에서 실행되는데, 클라이언트가 실행하는 코드라고 하여 Client-Side Script라고도 부른다.

-그 외

: 문서, 이미지, 동영상, 폰트 등

3) 웹 리소스 편집

html, css, javascript를 수정하면서 웹 리소스의 역할을 이해할 수 있다.

4) 웹 클라이언트와 서버의 통신

웹 서비스의 통신 과정을 간략화하면 아래와 같다.

3. 마치며

[퀴즈 : 웹]

[퀴즈 : HTTP/HTTPS]

Stage2 : Background - Web (2/2)

2.웹 브라우저

[Background: Web Browser]

1.들어가며

도구로서의 소프트웨어는 반복적인 작업을 자동화하여 일의 능률을 높이고, 복잡한 기능을 쉽게 사용할 수 있도록 단순하고 직관적인 인터페이스를 제공한다.

현대의 워드 프로세서에서는 굵기, 이탤릭체, 밑줄 긋기 등의 다양한 기능을 단축키로 쉽게 사용할 수 있도록 지원한다. 원고지에 글을 작성하거나, 타자기로 글을 찍어낼 때보다 훨씬 쉽고, 편리하게 글을 쓸 수 있게 됐다.

소프트웨어는 발전할수록 이용자 친화적인 인터페이스를 제공하면서 사용법은 쉬워지고, 다양한 기능을 제공한다. 그만큼 소프트웨어는 내부에서 처리하는 연산이 점점 많아지고 복잡해질 수밖에 없다. 이는 물에 떠 있는 오리가 물밑에서는 발을 열심히 구르고 있는 것과 같다. 대표적인 소프트웨어로 웹 브라우저(Web Browser)가 있다.

2. 웹 브라우저

1) 웹 브라우저

웹은 인터넷이라는 글로벌 네트워크 위에 구현되어 있으며, 정해진 프로토콜을 기반으로 통신한다. 개발자가 아닌 일반 이용자가 이러한 규칙을 이해하고 인터넷을 사용하기는 매우 어렵다.

20세기에 등장한 웹 브라우저는 서버와 HTTP 통신을 대신해주고, 수신한 리소스를 시각화하여 위와 같은 문제를 해결했다. 웹 브라우저는 뛰어난 이용자 경험(User eXperience, UX)을 제공하는 소프트웨어 중 하나로, 이용자는 브라우저를 이용하여 쉽게 정보를 검색하고, 동영상을 보고, 파일을 내려받지만 내부에서 어떠한 연산이 일어나는지는 전혀 알지 못한다.

최근에는 브라우저가 보안과 개발에 필요한 다양한 도구들도 제공하고 있다.

2) URL

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

URL은 Scheme, Authority (Userinfo, Host, Port), Path, Query, Fragment 등으로 구성되고, 이 중 자주 사용되는 요소는 아래와 같다.

3) Domain Name

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

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

Domain Name을 Host 값으로 이용할 때, 브라우저는 Domain Name Server(DNS)에 Domain Name을 질의하고, DNS가 응답한 IP Address를 사용한다. (Domain Name에 대한 정보는 MacOS/Linux/Windows에서 nslookup 명령어를 사용해 확인할 수 있다.)

4) 웹 렌더링

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

웹 렌더링은 웹 렌더링 엔진에 의해서 이뤄지는데, 브라우저별로 서로 다른 엔진을 사용한다. 사파리는 웹킷(Webkit), 크롬은 블링크(Blink), 파이어폭스는 개코(Gecko) 엔진을 사용한다.

3. 마치며

[Tools : Browser DevTools]

1. 들어가며

웹 개발을 할 때는 프론트엔드의 자바스크립트나 백엔드 API에서 버그가 발생하는 경우가 잦고, 적용한 CSS가 맘에 들지 않을 때가 많다. 이런 경우에는 코드 에디터로 원하는 부분을 수정하고 브라우저로 결과를 확인해야 하는데, 만족스럽지 않으면 에디터와 브라우저를 오가며 수정을 반복해야 한다. 브라우저 개발자 도구(Devtools)는 이러한 불편함을 대폭 감소시켜준다. HTML과 CSS 코드를 브라우저에서 수정하고 결과를 바로 확인할 수 있고, 자바스크립트 코드를 대상으로 디버거도 제공한다. 서버와 오가는 HTTP 패킷도 상세히 보여주므로 프로토콜 상에서 발생하는 문제도 쉽게 발견할 수 있다.

2. 개발자 도구

1) 개발자 도구

브라우저를 열고 F12를 누르면 개발자 도구를 실행할 수 있다. 그러면 개발자 도구 창이 나타난다.

아래에서 개발자 도구의 간단한 레이아웃 정보를 확인할 수 있다.

2) 요소 검사

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

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

3) 디바이스 툴바

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

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

4) Elements

-(1) HTML 읽기 : 현재 페이지를 구성하는 HTML의 코드를 읽을 수 있다.

-(2) HTML 수정 : 코드를 선택한 상태로 단축키 F2를 누르거나 더블 클릭하면, 이를 수정할 수 있다. 요소 검사 기능을 같이

활용하면 수정할 코드를 빠르게 선택할 수 있다.

5) Console

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

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

콘솔을 사용하면 브라우저에서 자바스크립트를 실행하고 결과를 바로 확인할 수 있다.

6) Sources

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