EYEN
knock-on 1주차 TIL 본문
1) 웹이란?
1. 웹이란?
웹(Web)은 정보를 검색하고 상호작용하는 시스템
2. 웹과 인터넷
웹: 웹은 HTTP 프로토콜을 통해 서버와 클라이언트 간에 데이터를 주고받습니다
인터넷(Internet): 전 세계적으로 연결된 컴퓨터 네트워크의 시스템
3. 웹서버
- 웹서버는 인터넷이나 인트라넷에서 사용자 요청을 받아들여, 이를 처리하고 적절한 웹페이지를 반환하는 서버
- 웹서버 소프트웨어 예) Apache, Nginx, IIS
4. 웹브라우저
- 웹브라우저는 사용자가 웹서버에 요청을 보내고, 받은 웹페이지(HTML, CSS, JavaScript)를 화면에 표시하는 소프트웨어
- 웹브라우저 예) 크롬, 파이어폭스, 사파리, 엣지
5. 서버, 클라이언트
서버(Server): 데이터를 저장하고, 클라이언트의 요청을 처리하는 컴퓨터 또는 시스템
클라이언트(Client): 서버에 요청을 보내고, 응답을 받아 처리하는 컴퓨터나 프로그램
2) protocol
1. OSI 7계층, 프로토콜
OSI 7계층: 통신 프로토콜의 표준 모델로, 7개의 계층(물리 계층, 데이터 링크 계층, 네트워크 계층, 전송 계층, 세션 계층, 표현 계층, 응용 계층)으로 구성
2. TCP와 UDP
- TCP(Transmission Control Protocol): 연결 지향적인 프로토콜
: 데이터 전송 전 연결 설정, 전송 후 데이터의 정확성을 확인=> 신뢰성 있는 통신 보장
- UDP(User Datagram Protocol): 비연결형 프로토콜
: 데이터를 전송 시 연결 설정 안 함. 신뢰도는 낮으나 속도가 빠름. 주로 실시간 통신에 사용
3. TCP와 IP의 연계
- IP(Internet Protocol): 네트워크에서 데이터를 목적지까지 전송하는 규약
- IP는 데이터를 목적지 주소로 전달하는 역할
- TCP: 데이터를 여러 개의 패킷으로 나누어 전송, 다시 올바르게 재조합하여 수신자가 원래 데이터를 재구성할 수 있도록 함.
IP는 이 패킷들을 각 목적지로 전달하는 역할.(데이터의 라우팅)
TCP는 신뢰성 있는 데이터 전송 역할
4. 3 Way-Handshake
TCP 연결 설정 시, 클라이언트와 서버 간에 3번의 신호 교환을 통해 연결을 확립하는 과정
(1) 클라이언트가 서버에게 연결 요청.
(2) 서버 응답을 보냄, 클라이언트에게 연결을 승인
(3) 클라이언트 서버의 응답을 받아들임, 연결 확립
5. 4 Way-Handshake
TCP 연결을 종료 시 4-way handshake를 사용
(1) 연결을 종료하려는 측이 FIN 패킷을 보냄
(2) 상대방이 ACK 응답을 보냄
(3) 상대방도 연결 종료 요청을 보냄
(4) 종료 요청 측이 ACK 응답을 보냄, 연결 종료
6. IPv4, IPv6
IPv4: 32비트 주소 체계
IPv6: IPv4가 부족해질까봐 나온 128비트 주소 체계
7. DNS (Domain Name System)
도메인 이름을 IP 주소로 변환하는 시스템
사용자가 도메인 이름(예: www.google.com)을 입력하면, DNS 서버가 해당 도메인에 맞는 IP 주소를 찾아서 반환
8. 포트
네트워크 통신에서 특정 프로세스나 서비스를 식별하기 위한 숫자.
예) HTTP 포트: 80번/HTTPS 포트: 443번
9. 포트포워딩
외부 네트워크에서 특정 포트로 들어오는 트래픽을 내부 네트워크의 지정된 서버로 전달하는 기술. 주로 라우터나 방화벽에서 설정, 특정 서비스에 접근할 수 있도록 허용합니다.
3) HTTP/HTTPS
- HTTP란?
- HyperText Transfer Protocol: 클라이언트(브라우저)와 서버 간에 데이터를 주고받기 위한 프로토콜
- 상태 비저장(stateless) 방식
2. HTTP와 HTTPS
- HTTP: 암호화 X → 도청, 변조 위험 있음
- HTTPS: SSL/TLS를 이용한 암호화 HTTP → 보안 강화됨 (HTTPS = HTTP + SSL)
3. HTTP 헤더, 바디의 구조
- 헤더(Header): 요청/응답 정보 (메타데이터)
- 바디(Body): 실제 데이터 (HTML, JSON 등)
4. HTTP method
- GET: 데이터 요청
- POST: 데이터 전송
- PUT: 데이터 수정
- DELETE: 데이터 삭제
- 그 외 PATCH, OPTIONS 등
5. HTTP 상태코드
- 1xx: 정보
- 2xx: 성공 (200 OK)
- 3xx: 리다이렉션 (301, 302)
- 4xx: 클라이언트 오류 (404 Not Found)
- 5xx: 서버 오류 (500 Internal Server Error)
6. SSL인증서
- 웹사이트의 신원을 증명하고 데이터 암호화를 제공
- CA(인증기관)에서 발급됨
7. curl을 이용하여 HTTP요청 직접 보내보기
curl -v https://www.naver.com
curl -X POST -d "id=test&pw=1234" https://example.com/login8. 웹 브라우저 개발자 도구를 사용하여 웹 사이트의 HTTP 통신을 살펴보기
- F12 → [Network] 탭에서 요청/응답 헤더, 바디, 상태코드 등 확인 가능
4) 쿠키와 세션
1. 쿠키와 세션
- 쿠키: 클라이언트에 저장되는 작은 데이터 (브라우저에 저장)
- 세션: 서버에 저장되는 사용자 정보
2. 쿠키와 세션의 발전 과정
- 쿠키 기반 로그인
- 세션 ID → 쿠키에 저장
- JWT(JSON Web Token) 등장
3. JWT
- 사용자 인증을 위한 토큰 방식
- 헤더 + 페이로드 + 서명 으로 구성
- 자체적으로 사용자 정보와 인증 상태 포함
4. 브라우저 저장소
- 쿠키: 작은 용량, 자동 전송
- LocalStorage / SessionStorage: JS로만 접근 가능, 수동 전송
5. 네이버 접속 시 사용되는 쿠키들 확인해보기
6. 위에서 얻은 쿠키를 변조한 후 결과 분석하기
다른 건 괜찮았는데 NID_AUT를 고치니 로그인이 풀렸다.
5) 패킷
1. 패킷이란? 데이터를 전송하기 위해 나눈 작은 단위의 데이터 조각
2. 패킷
- 용도: 대용량 데이터를 작은 조각으로 나눠 효율적 전송
- 필요성: 손실 시 일부만 재전송 가능
3. 패킷의 구조
- 헤더: 송/수신 정보 (IP, 포트, 프로토콜 등)
- 바디: 실제 데이터
4. Wireshark : 패킷 분석 툴 (네트워크 트래픽 실시간 감시)
5. Wireshark를 사용하여 Naver접속 시 사용된 패킷 필터링하기
- Wireshark 실행
- 필터: http 또는 ip.addr == naver.com
6. Wireshark를 사용하여 자신의 DNS 서버 정보 확인해보기
- 필터: dns
- 패킷 클릭 → Domain Name System 섹션 확인
6) 프록시
1. 프록시란? 클라이언트와 서버 사이에서 중계 역할을 하는 서버
2. 웹 프록시 툴 : Burp Suite, Fiddler, Charles Proxy 등
3. 프록시 서버 : 우회 접속, 캐시 제공, 로깅 등
4. VPN vs Proxy
- VPN: 전체 트래픽 암호화 및 우회
- Proxy: 특정 트래픽만 중계
5. 웹프록시 툴 설치하기 - burpsuite, fiddler 등등
6. 웹프록시 툴을 이용하여 패킷 변조해보기
- Burp Suite로 HTTP 요청 가로채기 → 헤더나 바디 변경 → 전송
7. http://war.knock-on.org:10001 실습하기
8. Burp로 사이트 접속 후 요청 분석, 조작
7) HTML,CSS, JS
1. HTML, CSS, JS의 기본 개념, 용도, 사용방법, 관계 등등
- HTML: 구조 (뼈대)
- CSS: 디자인 (색상, 폰트, 배치)
- JS: 동작 (인터랙션, 동적 처리)
2. 웹 페이지 제작에 필요한 기본적인 HTML 태그들
<html>
<head><title>My Page</title></head>
<body>
<h1>Hello</h1>
<p>This is a paragraph.</p>
<a href="https://naver.com">Go to Naver</a>
</body>
</html>필수 태그 설명
| 태그 | 설명 |
| <html> | 문서 전체를 감싸는 태그 |
| <head> | 문서 정보, 스타일, 스크립트 포함 (사용자 눈에 안 보임) |
| <title> | 브라우저 탭에 표시되는 제목 |
| <body> | 실제 웹 페이지에 보이는 콘텐츠 영역 |
콘텐츠 태그들
| 태그 | 설명 |
| <h1> ~ <h6> | 제목 태그. 숫자가 클수록 작아짐 |
| <p> | 단락(문단) 텍스트 |
| <a href=""> | 하이퍼링크. 다른 페이지로 이동 |
| <img src=""> | 이미지 표시 |
| <ul>, <ol>, <li> | 리스트 (순서 없는 / 순서 있는) |
| <div> | 콘텐츠 묶음. 레이아웃 정리용 |
| <span> | 텍스트 강조용 인라인 묶음 |
3. 스타일링을 위한 CSS의 기본적인 문법과 속성들
🔹 기본 문법
선택자 {
속성: 값;
}주요 선택자
| 선택자 | 설명 |
| h1 | 태그 이름 선택 |
| .className | 클래스 이름 선택 |
| #idName | 아이디 이름 선택 |
자주 쓰는 CSS 속성
| 속성 | 설명 |
| color | 글자색 |
| background-color | 배경색 |
| font-size | 글자 크기 |
| font-weight | 글자 굵기 |
| text-align | 정렬 (left, center, right) |
| margin | 바깥 여백 |
| padding | 안쪽 여백 |
| border | 테두리 |
4. 웹 페이지의 동적 기능을 위한 JS의 기본적인 문법과 함수들
기본 문법
변수 선언
let name = "홍길동";
const age = 20;함수 정의
function sayHello() {
alert("안녕하세요!");
}이벤트 연결
<button onclick="sayHello()">인사하기</button>
DOM 조작 (문서 객체 제어)
document.getElementById("title").innerHTML = "변경된 제목!";
5. 코드 1
<!-- 다음을 이해해 봅시다 -->
<!-- HTML5 문서임을 선언 -->
<!DOCTYPE html>
<!-- HTML 문서의 시작 -->
<html>
<!-- 문서의 정보(head 부분)를 담는 부분 -->
<head>
<!-- 내부에 직접 CSS를 작성 -->
<style>
/* body 태그의 배경색을 연한 파란색(puderblue)으로 설정 */
body {background-color: powderblue;}
/* h1 태그의 글자색을 파란색으로 설정 */
h1 {color: blue;}
/* p 태그의 글자색을 빨간색으로 설정 */
p {color: red;}
</style>
</head>
<!-- 실제 화면에 보이는 내용을 담는 부분 -->
<body>
<!-- 제목을 나타내는 h1 태그 -->
<h1>h1태그</h1>
<!-- 단락을 나타내는 p 태그 -->
<p>p 태그</p>
<!-- 클릭하면 배경색을 바꾸는 버튼. 클릭 시 changeColor() 함수 실행 -->
<button onclick="changeColor()">배경색 변경</button>
<!-- JavaScript 코드가 들어가는 부분 -->
<script>
// changeColor 함수 정의
function changeColor() {
// document.body는 body 태그를 의미
// 해당 요소의 배경색을 노란색으로 변경
document.body.style.backgroundColor = "yellow";
}
</script>
</body>
<!-- HTML 문서의 끝 -->
</html>
6. 코드2
<!-- 다음을 이해해 봅시다 -->
<!-- HTML5 문서임을 선언 -->
<!DOCTYPE html>
<!-- HTML 문서의 시작 -->
<html>
<!-- 브라우저에 보여질 내용을 담는 본문 시작 -->
<body>
<!-- h2 태그: 두 번째 크기의 제목으로 "배열 이해하기"라는 제목 표시 -->
<h2>배열 이해하기</h2>
<!-- p 태그: id가 demo인 단락. 자바스크립트로 여기 안에 내용을 채움 -->
<p id="demo"></p>
<!-- JavaScript 코드 시작 -->
<script>
// 배열 선언: 문자열을 요소로 갖는 cars 배열 생성
var cars = ["Saab", "Volvo", "BMW"];
// id가 'demo'인 HTML 요소(p 태그)를 찾아 그 안의 내용을 cars 배열로 설정
// 배열을 문자열로 변환하여 "Saab,Volvo,BMW" 형태로 출력됨
document.getElementById("demo").innerHTML = cars;
</script>
<!-- 본문 종료 -->
</body>
<!-- HTML 문서 종료 -->
</html>7. 자신을 소개하는 페이지를 작성해 봅시다(형식 자유)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>자기소개 페이지</title>
<style>
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 30px auto;
display: flex;
flex-direction: column;
gap: 20px;
}
.section {
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
background-color: white;
}
.profile {
background-color: #e0f7fa;
text-align: center;
}
.profile img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 15px;
border: 3px solid #00acc1;
}
.info-box {
text-align: left;
max-width: 700px;
margin: 0 auto;
}
.info-box p {
margin: 8px 0;
font-size: 16px;
}
.education h2 {
color: #00796b;
text-align: center;
margin-bottom: 20px;
}
.edu-section {
margin-bottom: 20px;
}
.edu-section h3 {
color: #0097a7;
margin-bottom: 5px;
}
.edu-section ul {
list-style-type: disc;
padding-left: 20px;
}
@media (max-width: 600px) {
.container {
border-radius: 0;
box-shadow: none;
}
}
</style>
</head>
<body>
<div class="container">
<div class="section profile">
<img src="C:\Users\owner\Desktop\내얼굴.png" alt="내 사진" />
<div class="info-box">
<p><strong>이름:</strong> 이예은</p>
<p><strong>생일:</strong> 2002-11-21</p>
<p><strong>학교:</strong> 서울여자대학교</p>
<p><strong>전공:</strong> 정보보호학</p>
<p><strong>학번:</strong> 2021120168</p>
</div>
</div>
<!-- 아래쪽: 교육 및 프로젝트 정보 -->
<div class="section education">
<h2>교육 및 프로젝트</h2>
<div class="edu-section">
<h3>학교 교육</h3>
<ul>
<li>부경대학교 컴퓨터공학과 2학년 수료 2021.02~2023.12</li>
<li>서울여자대학교 정보보호학과 재학 2024.02~2025.12</li>
</ul>
</div>
<div class="edu-section">
<h3>프로젝트</h3>
<ul>
<li>🌐 C/C++ 윈도우 프로텍터 개발, 백엔드 담당 </li>
<li>📱 모바일 앱 버그바운티, 취약점 분석 자동화 프로그램 </li>
<li>🤖 공유기 대상 취약점 분석 </li>
<li>📱 그래프 기반 트랜스포머 악성APK 분류 모델 개발 </li>
<li>🤖악성코드 패밀리별 분석 인텔리전스 보고서 5회 </li>
<li>🌐윈도우 응용 프로그램 취약점 분석 퍼저 개발 </li>
</ul>
</div>
</div>
</div>
</body>
</html>
8. 간단한 계산기 페이지를 만들어 봅시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>간단한 계산기</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 40px;
background-color: #f5f5f5;
text-align: center;
}
.calculator {
background-color: white;
display: inline-block;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input[type="text"] {
width: 200px;
padding: 10px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
margin-left: 10px;
font-size: 16px;
background-color: #2196F3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.result {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="calculator">
<h2>간단한 계산기</h2>
<input type="text" id="expression" placeholder="예: 3+5 또는 3x5" />
<button onclick="calculate()">계산</button>
<div class="result" id="result">결과: </div>
</div>
<script>
function calculate() {
let input = document.getElementById("expression").value;
let resultBox = document.getElementById("result");
// 공백 제거
input = input.replace(/\s+/g, "");
let result;
try {
// x 또는 X를 *로 바꾸기
input = input.replace(/x/gi, "*");
// 안전하게 숫자와 연산자만 허용
if (/^[0-9+\-*/.()]+$/.test(input)) {
result = eval(input);
} else {
throw new Error("올바르지 않은 입력입니다.");
}
} catch (e) {
result = "계산 오류!";
}
resultBox.innerText = "결과: " + result;
}
</script>
</body>
</html>