2023/03/08 Web Hacking 1주차 이론
Background: Web
HTTP를 이용하여 정보를 공유하는 서비스
제공자: Web Server ↔ 이용자: Web Client
ex) 서빙(Server) ↔ 고객(Client) at 식당
웹의 발전과 웹 보안의 중요성
웹에서 처리하는 정보를 안전하게 보관하고 처리해야 함.
ex) 주소, 카드 번호
웹 서비스, 프론트엔드와 백엔드
Front-end: 이용자의 요청을 받는 부분 → Web Resource로 구성됨
Back-end: 이용자의 요청을 처리하는 부분
웹 리소스
웹에 갖춰진 정보 자산
https://a.com/index.html
→ a.com에 존재하는 /index.html 경로의 리소스를 가져오라는 의미
모든 웹 리소스는 URI(Uniform Resource Indicator)를 가지며 이를 통해 식별됨.
- Hyper Text Markup Language(HTML)태그&속성을 통한 구조화된 문서 작성
- ‘뼈와 살’
- Cascading Style Sheets(CSS)브라우저가 이를 참고하여 웹 문서를 시각화한다
- ‘생김새’
- JavaScript(JS)이용자의 브라우저에서 실행됨→Client-Side Script
- ‘동작을 정의’
- 그 외
- 문서, 이미지, 동영상, 폰트 등
Background: HTTP/HTTPS
인코딩
인코딩 표준→ ex) Ascii, Unicode
ASCII
7bit 데이터에 대한 인코딩 표준
cons) 문자권마다 고유의 인코딩 표준을 사용함→호환성 문제
Unicode
Uni(하나의)
한 문자를 최대 32bit로 표현
한글, 한자, 히라가나, 가타카나, 알파벳, 이모지 등 포함
통신 프로토콜
규격화된 상호작용에 적용되는 약속
문법에 어긋나는 메시지는 무시됨
TCP/IP(네트워크 통신의 기초), HTTP, FTP 등
HTTP
HTTP
서버↔클라이언트의 데이터 교환을 Request와 Response 형식으로 정의한 프로토콜
포트로 데이터를 교환하는 방식: Transport Layer(전송 계층)
0~1023: Well-known port(Privileged port)
0~65535
HTTP 메시지
HTTP요청, HTTP응답
HTTP 요청
서버에게 특정 동작을 요구하는 msg
서버) 실현 가능한지, 권한 검토 → if 적절 → 처리
시작 줄
Method, Request-URI, HTTP 버전 으로 구성됨(띄어쓰기로 구분)
- 메소드리소스를 가져오라리소스로 데이터를 보내라
- POST
- GET
- 요청 URI
- 메소드의 대상
- HTTP 버전
- 클라이언트가 사용하는 HTTP 프로토콜의 버전
HTTP 응답
HTTP 요청에 대한 결과 반환
수행 여부, 이유(상태 정보), 클라이언트에게 전송할 리소스
시작 줄
HTTP 버전, Status Code, Reason Phrase
- HTTP 버전
- 서버에서 사용하는 HTTP 프로토콜의 버전
- 상태 코드RFC 2616 표준
- 처리 결과를 세 자릿수로
- 처리 사유
- 상태 코드가 발생한 이유 짧게 기술
HTTPS
HTTPS
HTTP의 응답과 요청은 ‘평문’으로 전달됨
→MITM에 취약함
HTTP over Secure socker layer는 Transport Layer Security 프로토콜을 도입하여 이를 보완함
서버↔클라이언트 사이에 오가는 HTTP메시지 암호화
Wireshark 보는 법
요청 응답
Background: Web Browser
웹 페이지의 문제점을 찾기 위해서는 브라우저의 역할에 대해 자세히 알고 있어야 함!
웹 브라우저
서버와 HTTP통신을 대신 해주고, 수신한 리소스를 시각화
URL
Uniform Resource Locator, 웹에 있는 리소스의 위치를 표현
ref)RFC 3986
Domain Name
nslookup 명령어
웹 렌더링
서버로부터 받은 리소스를 시각화
브라우저별로 웹 렌더링 엔진이 다름.
사파리→Webkit, 크롬→Blink, 파이어폭스→Gecko
Background: Browser DevTools
For Dev: 웹 서비스 진단
For Attacker: Exploit에 이용
개발자 도구
F12
요소 검사
디바이스 툴바
브라우저 화면 비율, User-Agent 변경
Elements
코드를 선택한 채로 F2 or 더블클릭
Console
FE의 JS코드에서 발생한 에러msg 출력, JS코드 입력 및 실행
console.log
// "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
페이지를 구성하는 웹 리소스들 확인 가능
Debug
코드 라인을 눌러 BP 설정
Network
로그 옵션
- Preserve log: 새로운 페이지로 이동해도 로그를 삭제하지 않음
- Disable cache: 이미 캐시된 리소스도 서버에 요청함
Copy
로그 우클릭→Copy
Copy as fetch로 HTTP Request를 복사하고 Console패널에 Ctrl+v하여 실행하면 동일한 요청을 서버에 재전송
Application
쿠키, 캐시, 이미지, 폰트, 스타일시트 등의 웹 애플리케이션과 관련된 리소스 조회
Console Drawer
개발자 도구 화면에서 ESC키
기타 브라우저 기능
페이지 소스 보기
Windows/Linux: Ctrl+U
macOS: Cmd+Opt+U
Secret browsing mode
방문 기록, 쿠키, 사이트 데이터, 양식에 입력한 정보, 웹사이트에 부여된 권한이 브라우저 종료 시 사라짐
시크릿 모드로 생성한 탭은 쿠키를 공유하지 않음→탭마다 다른 계정으로 로그인 가능
Windows/Linux: Ctrl+Shift+N
macOS: Cmd+shift+N
