[WEB] 웹페이지 접속 과정 살펴보기 with WireShark 🦈

yeonjiyooo·2025년 9월 23일
0

브라우저에 도메인 주소를 입력했을 때의 내부 동작 과정을 정리해보았습니다.
틀린 부분에 대한 지적과 조언은 언제든 환영입니다! 🙇🏻‍♀️

브라우저에 www.kakao.com을 입력하면 어떤 과정을 거쳐 접속할 수 있을까?

  1. URL 입력 및 처리
  • 브라우저 주소창에 www.kakao.com 입력
  • 리다이렉트 확인 초기 요청을 받은 서버가 URL을 다른 위치로 자동으로 보내게 설정되어 있을 수 있음
    ex. http:// 로 시작된 요청이 https://로 리다이렉트 될 수 있음
  • 공유 캐시 확인
    대규모 웹 서비스의 경우 네트워크 내에 공유 캐시(캐시 서버) 존재할 수 있음
    자주 요청되는 리소스를 사용자와 물리적으로 가까운 웹 캐시 서버에 보관
  1. DNS 조회
  • www.kakao.com 의 IP 주소를 찾기 위해 DNS 조회
  • 로컬 DNS 캐시 조회 후 정보 확인 → 캐시에 정보가 없다면 DNS 서버에 조회 요청
  • 필요에 따라 여러 DNS 서버를 거칠 수 있음
  1. Forward Proxy 포워드 프록시 (선택적)
  • 같은 내부망에 존재하는 클라이언트의 요청을 받아 외부 서버에서 가져온 데이터로 응답

  • www.kakao.com 에 접속하려고 할 때 프록시 서버가 대신 리소스를 받아와 클라이언트에게 응답

  • 자주 사용되는 리소스를 캐싱해두어 성능 향상

    +) Reverse Proxy 리버스 프록시

    클라이언트가 웹 서버에 접근시 해당 웹 서버에 직접 요청하는 것이 아닌 프록시로 요청
    → 프록시가 배후(reverse)의 서버로부터 데이터를 가져옴

  1. TCP 연결 3-way handshake
  • 3-way handshake 클라이언트 ↔ 서버 연결을 위해 3개의 패킷 사용

    • C → S: SYN
      SYN segment: 데이터 채널을 위한 연결 파라미터 값을 실어 나름
      아직 연결 전이므로 데이터는 없고 헤더만 존재
    • S → C: SYN + ACK
      TCP는 reliable delivery를 해야하므로 받았으면 받았다는 확인을 해줘야 함
      서버 측에서 클라이언트에게 연결에 필요한 새로운 파라미터 값 정보인 SYN +
      앞선 클라이언트로부터 온 SYN을 잘 받았다는 ACK 정보도 함께 보냄
      두 데이터 채널이 함께 묶여 만들어질 수 밖에 없음 like 2인3각
      BUT 나중에 끊을 떄는 각각 끊을 수 있음
    • C → S: ACK
      S → C 채널을 위한 세 값을 헤더에 싣고 온 SYN에 대한 ACK
      별도의 ACK를 전송하지 않고 ACK 내용을 헤더에 표현한 뒤 ACK = 1로 설정해도 됨
  1. HTTPS 보안 설정

  • TCP 연결이 되면 HTTPS로 통신하기 위한 TLS handshaking 수행
    - ClientHello (C): 클라이언트가 지원하는 TLS, 암호화 제품군, 무작위 바이트 문자열 등을 전달
    - ServerHello (S): TLS 인증서, 서버가 가능한 암호화 방식, 서버 무작위 바이트 문자열, 세션 아이디 전달
    - 서버 인증서 검증 (C): 서버가 보낸 TLS 인증서 검증
    대부분의 브라우저에는 공신력있는 CA가 만든 공개키가 이미 설치되어 있음

         서버가 보낸 TLS 인증서가 CA가 만든 것이 맞는지 내장된 CA 공개키로 암호화된 인증서 복호화
         → 실제 인증서에 명시된 서버인지, 해당 도메인 소유자인지, 유효기간이 지나지 않았는지 확인
           
       정상적으로 진행되었다면 사이트 **공개키 및 정보 획득**
           
     - **Client Premaster Secret 생성 (C)**: premaster secret 무작위 48바이트 문자열 전송
       → 인증서로부터 전달받은 서버의 공개키로 암호화, 서버의 개인키로만 복호화 가능
     - **Server Premaster Secret 복호화 (S)**: 서버가 개인키로 복호화하여 master secret 으로 저장
           → 이것을 사용하여 **session key** 생성 
           
     - **Client Ready (C) & Server Ready (S)**: 세션 키로 암호화된 완료 메세지 전송

    ⇒ handshaking 완료 , 세션키를 이용해 암호화된 통신 진행

    TLS handshaking 이후 모든 HTTP 요청과 응답은 session key로 암호화


🔽 WireShark 패킷 예시

[407] SYN: 클라이언트가 서버에게 TCP 연결 요청

[414] SYN + ACK: 서버측에서 이전 SYN에 대한 응답 ACK와 연결을 위한 정보 SYN을 보냄

[415] ACK: 서버로부터 받은 SYN에 대한 응답 ACK를 보냄

[417] ClientHello: 클라이언트가 서버에게 TLS 세션 시작 요청

[438] ServerHello: 서버의 응답 (실제 사용할 Cipher suite 선택, 키 교환을 위한 초기데이터 포함)

[438] Change Cipher Spec: 암호화 전환 준비

[439] Application Data: 서버 쪽에서 암호화된 데이터 전송 시작
(TLS 1.3에서는 인증서도 Application Data 안에서 암호화된 상태로 전송)

[441] Change Cipher Spec, ApplicatIon Data: 클라이언트도 암호화 모드로 전환


✚ TLS (Transport Layer Security)

인터넷 상의 커뮤니케이션을 위한 개인 정보와 데이터 보안을 용이하게 하기 위해 설계된 보안 프로토콜
SSL (Secure Sockets Layer) 라는 이전의 암호화 프로토콜에서 발전한 것

TLS 의 역할

  • 암호화: 제3자로부터 전송되는 데이터를 숨김
  • 인증: 정보를 교환하는 당사자가 요청된 당사자임을 보장
  • 무결성: 데이터가 위조되거나 변조되지 않았는지 확인

HTTPS: 암호화되어 데이터를 볼 수 없음

HTTP: 요청과 응답에 담긴 데이터를 볼 수 있음

profile
1 ^ 365 = 1 이지만 1.01 ^ 365 = 37쩜 어쩌고... 이다!

1개의 댓글

comment-user-thumbnail
2025년 9월 24일

와 정리 잘하셨네요..! 직접 와이어샤크로 찍은 메시지를 보니 이해가 더 잘되는 것 같아요.
덕분에 지식 얻고 가요. 감사합니다~

답글 달기