[Layer7] 2026년 8월 10일 웹 해킹 1차시 과제

Web이란?#

Web은 인터넷 상에서 여러가지 정보를 나누는 공간을 웹이라고 칭하고 있어요.

Browser란?#

Browser는 웹을 볼 수 있는 프로그램을 말합니다. 대표적으로 Chrome, Edge, Firefox, Safari 등이 있어요.

Client & Server#

클라이언트란 요청자를 말하고, 서버란 요청을 받으면 그 요청에 응답해주는 응답자를 서버라고 칭해요.

예를 들면, 음식점에서 손님이 음식을 주문하는 사람이 클라이언트이고, 그 주문을 받아서 요리를 해서 제공해주는 사람이 서버라고 생각하시면 됩니다.

URL이란?#

URL은 Uniform Resource Locator의 약자로, 인터넷 상에서 다양한 자원의 위치를 나타내는 주소를 말합니다.

URL의 구성#

URL은 크게 3가지로 나눌 수 있습니다.

지금 보고 있는 이 블로그 URL로 예시를 들어볼게요.

이 블로그는 놀랍게도 최첨단 블로그여서 여러분들이 사용하면서 Protocol, Domain, Path, Parameter, Fragment까지 모두 경험할 수 있어요.

포트는 대강 0~1023까진 대부분 예약되어 있고, 1024~49151까지는 등록된 포트, 49152~65535까지는 동적/사설 포트라고 합니다.

HTTP / HTTPS란?#

HTTP란?#

HTTP는 HyperText Transfer Protocol의 약자로, 웹에서 데이터를 주고받을 때 사용하는 통신 규약입니다. HTTP는 클라이언트와 서버 간의 요청과 응답을 통해 데이터를 전송하며, 주로 텍스트, 이미지, 동영상 등의 다양한 형식의 데이터를 전달할 수 있습니다.

HTTPS란?#

HTTPS는 HyperText Transfer Protocol Secure의 약자로, HTTP에 보안 기능을 추가한 통신 규약입니다. HTTPS는 SSL/TLS 프로토콜을 사용하여 데이터를 암호화하고, 클라이언트와 서버 간의 통신을 보호해요. 이를 통해 데이터의 무결성과 기밀성을 유지할 수 있으며, 중간자 공격을 하는 해커가 행복해해요.

Cookie란?#

Cookie는 웹 브라우저와 서버 간의 비연결성을 보완하려고 만들어진 상태 정보를 저장하는 작은 데이터 조각이에요.
Cookie는 사용자의 세션 정보, 로그인 상태, 사용자 선호 설정 등을 저장하는 데 보통 사용되며, 클라이언트 측에서 관리해요.
Cookie는 서버가 클라이언트에게 전달하고, 클라이언트는 이후 요청 시 해당 Cookie를 서버에 다시 전송하여 상태를 유지할 수 있어요.

Session이란?#

Session은 정보를 서버쪽에서 저장하는 방식을 Session이라고 한다.
주로 로그인을 유지하거나 요즘 반사회적 기업들이 사용자를 추적하기 위해 사용해요.
Session은 서버에서 고유한 세션 ID를 생성하고, 클라이언트는 해당 세션 ID를 Cookie에 저장하여 이후 요청 시 서버에 전송함으로써 상태를 유지할 수 있어요.

Same Origin Policy란?#

Same Origin Policy는 웹 브라우저에서 보안상의 이유로 적용되는 정책으로, 서로 다른 출처 간의 상호작용을 제한하는 규칙이에요. 출처는 프로토콜, 도메인, 포트 번호를 기준으로 판단하고, 동일한 출처에서만 리소스에 접근할 수 있도록 제한해요.

https://mizuki.guru:443 - / -> https://api.imnya.ng:443/mitda/miku -> nono
https://mizuki.guru:443 -----> https://mizuki.guru:443/api/mitda/miku -> good

Cross-Origin Resource Sharing(CORS)란?#

이건 말이 안돼요.

좋은 예외 정책이라곤 생각하지만 개발할 때는 귀찮은 정책이에요.

그러니까 이게 뭘 하는거나면 출처가 다른 서버에서 리소스를 요청할 때, 서버가 명시적으로 허용한 경우에만 접근을 허용하는 정책이에요.
저는 mizuki.guru와 imnya.ng의 2개의 도메인을 소유하고 있는데 mizuki.guru에서 api.imnya.ng을 요청하고 싶을 때 api.imnya.ng 서버에서 mizuki.guru를 허용해주면 mizuki.guru에서 api.imnya.ng의 리소스를 요청할 수 있어요.

Header#

HTTP Header는 HTTP 요청과 응답에 포함되는 메타데이터로, 클라이언트와 서버 간의 통신을 제어하고 정보를 전달하는 데 사용돼요.
HTTP Header는 요청 헤더(Request Header)와 응답 헤더(Response Header)로 나뉘며, 각각의 역할이 있어요.

대강 HTTP Header에는 대표적으로 이런 값들이 있어요.

HTTP Request 구조#

--------------
| Start Line |
--------------
|            |
|   Header   |
|            |
--------------
| Blank Line |
--------------
|    Body    |
--------------

Start Line에는 Method, URL, HTTP Version이 들어가고 Header에는 위에서 설명한 것들이 들어가요.
Blank Line은 Header와 Body를 구분하는 역할을 하고, Body에는 요청/응답 본문이 들어가요.

Method#

Method란 GET, POST, PUT, DELETE 등과 같이 HTTP 요청의 종류를 나타내는 용어입니다.

HTML 문법#

p tag#

p tag에 대해 말씀드리겠습니다.1
. p tag란 paragraph tag의 약자로, HTML에서 문단을 나타내는 태그입니다. p tag는 텍스트를 블록 단위로 구분하여 문서의 구조를 명확하게 해줍니다.

그냥 이렇게 생겼습니다. 간단하죠?

<p>그냥 이렇게 생겼습니다. 간단하죠?</p>

a tag#

a tag는 anchor tag의 약자로, HTML에서 하이퍼링크를 생성하는 태그입니다. a tag를 사용하면 다른 웹 페이지나 특정 위치로 이동할 수 있는 링크를 만들 수 있습니다.

<a href="https://layer7.kr">이 링크를 클릭하면 layer7.kr로 이동합니다.</a>

img tag#

img tag는 image tag의 약자로, HTML에서 이미지를 삽입할 때 사용하는 태그입니다. img tag는 src 속성을 통해 이미지 파일의 경로를 지정하며, alt 속성을 통해 이미지가 로드되지 않을 경우 대체 텍스트를 제공할 수 있습니다.

<img src="https://api.imnya.ng/mitda/miku" alt="밋다미쿠" width="150" height="150" />

div tag#

div tag는 division tag의 약자로, HTML에서 블록 레벨 요소를 그룹화할 때 사용하는 태그입니다. div tag는 스타일링이나 레이아웃을 적용할 때 유용하게 사용됩니다.

<div style="background-color: lightblue; padding: 10px;">
    이건 div인데요. CSS 없이 쓰면 그냥 아무것도 없는 느낌입니다.
</div>

span tag#

span tag는 inline 요소를 그룹화할 때 사용하는 태그입니다. span tag는 주로 텍스트의 특정 부분에 스타일을 적용하거나, JavaScript와 함께 사용할 때 유용합니다.

<span>이건 span인데요.</span>

br tag#

br tag는 line break tag의 약자로, HTML에서 줄바꿈을 할 때 사용하는 태그입니다. br tag는 단독으로 사용되며, 텍스트를 다음 줄로 이동시킵니다.

우와

이건 br인데요. 그냥 줄바꿈만 해줍니다.

<br/>이건 br인데요. 그냥 줄바꿈만 해줍니다.

ul tag#

ul tag는 unordered list tag의 약자로, HTML에서 순서 없는 목록을 만들 때 사용하는 태그입니다. ul tag 안에는 li(tag) 요소를 사용하여 각 항목을 정의합니다.

• 첫 번째 항목
• 두 번째 항목
• 세 번째 항목

<ul>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ul>

ol tag#

ol tag는 ordered list tag의 약자로, HTML에서 순서 있는 목록을 만들 때 사용하는 태그입니다. ol tag 안에는 li(tag) 요소를 사용하여 각 항목을 정의하며, 기본적으로 숫자 순서로 표시됩니다.

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

table tag#

table tag는 HTML에서 표를 만들 때 사용하는 태그입니다. table tag 안에는 tr(tag) 요소를 사용하여 행을 정의하고, th(tag) 요소를 사용하여 헤더 셀을 정의하며, td(tag) 요소를 사용하여 데이터 셀을 정의합니다.

<table border="1">
  <tr>
    <th>헤더 1</th>
    <th>헤더 2</th>
    <th>헤더 3</th>
  </tr>
  <tr>
    <td>데이터 1</td>
    <td>데이터 2</td>
    <td>데이터 3</td>
  </tr>
  <tr>
    <td>데이터 4</td>
    <td>데이터 5</td>
    <td>데이터 6</td>
  </tr>
</table>

center tag#

center tag는 HTML에서 텍스트나 요소를 가운데 정렬할 때 사용하는 태그입니다. center tag는 블록 레벨 요소를 가운데로 정렬하며, 주로 텍스트나 이미지 등을 중앙에 배치할 때 사용됩니다.

<center>
  <p>이 텍스트는 가운데 정렬되어 있습니다.</p>
</center>

hr tag#

hr tag는 horizontal rule tag의 약자로, HTML에서 수평선을 삽입할 때 사용하는 태그입니다. hr tag는 문서 내에서 구분선을 나타내며, 시각적으로 콘텐츠를 구분하는 데 사용됩니다.

<hr/>

input tag#

input은 HTML에서 사용자로부터 데이터를 입력받기 위해 사용하는 태그입니다. input tag는 다양한 타입을 지원하며, 텍스트 입력, 비밀번호 입력, 체크박스, 라디오 버튼 등 다양한 형태의 입력 필드를 생성할 수 있어요.

로그인 상태 유지
남
여

<input type="text" name="username" placeholder="사용자 이름">
<input type="password" name="password" placeholder="비밀번호">
<input type="checkbox" name="remember" value="yes"> 로그인 상태 유지
<input type="radio" name="gender" value="male"> 남
<input type="radio" name="gender" value="female"> 여

textarea tag#

textarea tag는 HTML에서 여러 줄의 텍스트 입력을 받을 수 있는 폼 요소를 만들 때 사용하는 태그입니다. textarea tag는 사용자가 긴 텍스트를 입력할 수 있도록 제공하며, rows와 cols 속성을 통해 크기를 조절할 수 있어요.

<textarea name="message" rows="4" cols="50" placeholder="메시지를 입력하세요"></textarea>

button tag#

button tag는 HTML에서 버튼을 생성할 때 사용하는 태그입니다. button tag는 클릭 이벤트를 처리하거나 폼을 제출하는 등의 동작을 수행할 수 있어요.

<button type="submit">제출</button>

form tag#

form tag는 HTML에서 사용자 입력을 받을 수 있는 폼을 만들 때 사용하는 태그입니다. form tag 안에는 다양한 input 요소를 포함하여 사용자가 데이터를 입력하고 제출할 수 있도록 구성할 수 있습니다.

<form method="POST">
    <input name="name" placeholder="이름"><br><br>
    <textarea name="message" placeholder="메시지"></textarea><br><br>
    <button>전송</button>
</form>

form에는 method와 action이라는 속성이 있어요. method는 보통 GET과 POST가 있고, action은 데이터를 전송할 URL을 지정해요.

왜 input이 form 태그 내에서 주로 사용되나요?#

input이 form 태그 내에서 주로 사용되는 이유는 form이 사용자 입력을 수집하고 서버로 전송하는 역할을 하기 때문이에요.
form 태그는 데이터를 그룹화하고, 제출 버튼을 통해 데이터를 서버로 전송할 수 있는 구조를 제공해요.
input 요소는 사용자가 텍스트, 비밀번호, 체크박스 등 다양한 형태의 데이터를 입력할 수 있도록 도와주며, 이러한 입력 필드들은 form 태그 안에 배치되어야만 서버로 올바르게 전송될 수 있어요.

script tag#

script tag는 HTML에서 JavaScript 코드를 삽입할 때 사용하는 태그입니다. script tag를 사용하면 웹 페이지에 동적인 기능을 추가하거나 사용자와 상호작용할 수 있는 기능을 구현할 수 있어요.

<button type="button" onclick="showTime()">시간을 보는 혁신적 버튼</button>
<p id="time"></p>

<script>
    function showTime() {
        document.getElementById('time').innerHTML = Date()
    }
</script>

DOM이란?#

DOM은 Document Object Model의 약자로, HTML 문서를 JavaScript가 접근하고 수정할 수 있도록 객체 형태로 표현한 구조예요.

예를 들어 이런 HTML이 있다면,

<h1 id="title">Hello</h1>
<p>안녕하세요.</p>

브라우저는 각각의 태그를 객체처럼 다룰 수 있도록 DOM을 만들어요.

그래서 JavaScript에서 다음과 같이 HTML 요소를 가져오거나 수정할 수 있어요.

document.getElementById("title").textContent = "Hello JavaScript"

즉 DOM을 이용하면 JavaScript로 HTML의 내용, 속성, 스타일 등을 변경할 수 있습니다.

JavaScript 기본 문법#

과제를 주신 강의 자료를 안보고 해서 Javascript 부분은 그냥 제가 생각나는 대로 적었습니다.

변수#

JavaScript에서는 let, const를 사용해서 변수를 만들 수 있어요.

let name = "mizuki"
const age = 17

let은 값을 다시 변경할 수 있고, const는 한 번 지정한 값을 다시 대입할 수 없어요.

let count = 1
count = 2

자료형#

대표적인 자료형은 다음과 같아요.

let text = "Hello"     // 문자열
let number = 123       // 숫자
let bool = true        // Boolean
let nothing = null
let value

배열과 객체도 자주 사용합니다.

let users = ["miku", "mizuki", "ena"]

let user = {
    name: "mizuki",
    age: 17
}

배열의 값은 번호로 접근할 수 있어요.

console.log(users[0])

객체의 값은 다음과 같이 접근합니다.

console.log(user.name)

연산자#

let a = 10
let b = 5

console.log(a + b)
console.log(a - b)
console.log(a * b)
console.log(a / b)

비교할 때는 ===를 주로 사용해요.
==와 ===의 차이가 있다면 ===는 type까지 검사해요.

console.log(a === 10)
console.log(a !== 5)
console.log(a > b)

조건문#

let age = 20

if (age >= 20) {
    console.log("안어린사람")
} else {
    console.log("어린사람")
}

반복문#

for (let i = 0; i < 5; i++) {
    console.log(i)
}

배열을 반복할 때는 이런 식으로도 사용할 수 있어요.

const users = ["miku", "mizuki", "ena"]

for (const user of users) {
    console.log(user)
}

함수#

함수는 여러 코드를 하나로 묶어서 필요할 때 실행할 수 있게 해줍니다.

function hello(name) {
    console.log("Hello " + name)
}

hello("mizuki")

화살표 함수라는 문법도 있어요.

const hello = (name) => {
    console.log("Hello " + name)
}

이벤트#

JavaScript에서는 버튼 클릭 등의 사용자 동작을 처리할 수 있어요.

<button id="button">클릭</button>

<script>
    document.getElementById("button").addEventListener("click", () => {
        alert("버튼을 눌렀습니다.")
    })
</script>

DOM 요소 가져오기#

가장 간단한 방법은 getElementById입니다.

<p id="text">Hello</p>

const text = document.getElementById("text")

CSS 선택자 방식으로 가져올 수도 있어요.

document.querySelector("#text")
document.querySelector(".item")
document.querySelector("p")

여러 개를 가져오려면 querySelectorAll을 사용합니다.

const items = document.querySelectorAll(".item")

DOM 내용 변경#

const text = document.getElementById("text")

text.textContent = "변경되었습니다."

HTML 자체를 넣고 싶다면 innerHTML도 사용할 수 있어요.

text.innerHTML = "<b>굵은 글씨</b>"

단, 외부에서 받은 값을 그대로 innerHTML에 넣으면 XSS 취약점이 생길 수 있으므로 주의해야 해요.

DOM 스타일 변경#

const text = document.getElementById("text")

text.style.fontSize = "30px"
text.style.display = "none"

속성 변경#

const image = document.querySelector("img")

image.src = "image.png"
image.alt = "wow"

setAttribute를 사용할 수도 있어요.

image.setAttribute("src", "image.png")

-----BEGIN SSH SIGNATURE-----
U1NIU0lHAAAAAQAAADMAAAALc3NoLWVkMjU1MTkAAAAg4c/dn4BitGH1/xNjKoKEp97I2b
eU57QXvkDBEdNNrEMAAAATYmxvZy5pbW55YS5uZy9wb3N0cwAAAAAAAAAGc2hhNTEyAAAA
UwAAAAtzc2gtZWQyNTUxOQAAAEA9ZebAD1D4iMue6PEkmDBF8iz5LrnbA9XqQStHr38CPZ
72cxjMOuEbWP6JotJz8yTIKhVVuQHaTE65DWsiCfQK
-----END SSH SIGNATURE-----