Wireshark로 내 채팅과 HTTP 보기

소켓 채팅과 HTTP 요청에서 내 데이터·IP·포트를 찾아 HTTPS로 연결합니다.

목표: 먼저 내가 보낸 채팅 한 줄, 그다음 HTTP 요청 하나를 찾아서 IP·포트·응용 데이터를 코드와 연결합니다. 처음에는 ASCII를 사용합니다. 가짜 로그인 평문 관찰은 별도 실습으로 진행합니다.

1. 인터페이스 선택

접속 대상	캡처 인터페이스
친구의 Wi-Fi IP	수업 네트워크의 Wi-Fi
같은 컴퓨터의 `127.0.0.1`	루프백. macOS는 보통 `lo0`, Windows는 Npcap 루프백 어댑터

본인이 서버 또는 클라이언트인 통신을 관찰합니다. 같은 핫스팟의 다른 학생들끼리 주고받는 모든 통신이 내 컴퓨터에 자동으로 보이는 것은 아닙니다. 루프백 통신은 핫스팟을 거치지 않습니다.

먼저 · 채팅 한 줄 찾기

03-0 소켓 채팅의 chat:lines 서버를 교사 또는 학생 한 명이 실행합니다.
서버 기기에서 수업 네트워크 인터페이스를 캡처합니다. 자기 컴퓨터의 터미널끼리 연결했다면 루프백을 선택합니다.
표시 필터 tcp.port == 4000을 넣고 학생 한 명만 S1: Hello를 보냅니다.
해당 패킷에서 Follow → TCP Stream을 열어 학생 → 서버의 S1: Hello를 찾습니다.
다른 학생과 서버 사이의 스트림에서는 서버가 중계한 [번호] S1: Hello를 찾습니다.

서버가 여러 연결에 전달해도 모두 같은 TCP 스트림은 아닙니다. 발신 학생 ↔ 서버, 서버 ↔ 수신 학생 연결을 구분합니다. 메시지가 여러 세그먼트에 나뉘면 한 패킷의 화면에서 전부 보이지 않을 수 있어 스트림으로 모아 읽습니다. 서버의 data 이벤트 수와 캡처 패킷 수를 같다고 세지 않습니다.

2. 요청 한 번 캡처

기존 8080 서버를 Ctrl+C로 종료하고 터미널 A에서 npm run http:server를 실행합니다.
Wireshark에서 올바른 인터페이스를 선택하고 캡처를 시작합니다.
위쪽 표시 필터에 tcp.port == 8080을 입력합니다.
터미널 B에서 아래 명령을 실행합니다.

npm run http:client -- http://127.0.0.1:8080/

캡처를 멈추고 해당 TCP 패킷을 선택합니다.
우클릭 → Follow → TCP Stream에서 요청과 응답을 읽습니다.

친구 서버라면 명령의 IP를 바꾸고 Wi-Fi에서 캡처합니다. 연결 전에 캡처해야 처음의 SYN도 볼 수 있습니다.

3. 헤더가 두 번 나오는 이유

HTTP 응답의 상태 줄 아래에 Content-Type: text/html이 있습니다. 이것은 HTTP 헤더이며 전송할 내용의 형식을 설명합니다.

패킷 상세의 Transmission Control Protocol 항목에는 출발지·목적지 포트, 시퀀스 번호 등이 있습니다. 이것은 TCP 헤더이며 바이트 전달에 필요한 정보입니다. JavaScript의 socket.end(...) 문자열 안에 이 TCP 헤더가 들어 있지는 않습니다.

TCP 헤더 | TCP가 운반하는 데이터
           └ HTTP 상태 줄 + HTTP 헤더 + 빈 줄 + HTML 본문

이 도식은 포함 관계입니다. 실제로 HTTP 메시지 하나가 여러 TCP 세그먼트에 걸칠 수 있습니다. 패킷 하나, data 이벤트 하나, HTTP 메시지 하나가 일대일로 대응하지 않습니다.

첫 서버는 Content-Length가 없이 연결 종료로 본문 끝을 알립니다. charset과 바이트 길이는 한글 별도 실험에서 관찰합니다.

4. 기록할 네 가지

질문	적을 내용
누가 누구에게 연결했나?	출발지·목적지 IP와 포트
무엇을 요청했나?	GET 다음의 경로
무엇을 받았나?	상태 200과 본문 일부
어떤 코드가 만들었나?	client.mjs의 request와 server.mjs의 socket.end

선택: SYN → SYN/ACK → ACK를 찾습니다. ACK는 TCP 수준의 수신 확인이며, 사용자가 페이지를 읽었다거나 앱의 처리가 끝났다는 뜻은 아닙니다.

필요한 필터만 사용하기

표시 필터	관찰 대상
`tcp.port == 4000`	에코·채팅·카운트다운 중 현재 실행한 서버
`tcp.port == 8080`	기본 HTTP 통신
`tcp.port == 8082`	나중의 UTF-8 실험
`tcp.port == 8083`	공개 가짜 로그인 HTTP 실험
`tcp.port == 8443`	04의 같은 로그인 HTTPS 실험
`tcp.flags.syn == 1`	연결 시작
`http.request`	HTTP로 분석된 요청

http.request에서 안 보이면 TCP Stream으로 먼저 읽습니다. 자동 분석이 되지 않았을 수도 있습니다. 강사와 Analyze → Decode As에서 HTTP를 지정할 수 있습니다.

캡처 옵션의 캡처 필터는 tcp port 8080처럼 문법이 다릅니다. 화면에서 이미 받은 내용을 거르는 표시 필터 tcp.port == 8080과 구분합니다.

환경이 다를 때

Wi-Fi 캡처가 Ethernet 형태로 표시될 수 있습니다. 무선 프레임 전체나 물리 신호를 관찰하는 것은 이번 미션의 필수 조건이 아닙니다. 장치 오프로딩 때문에 생긴 체크섬 경고를 곧바로 전송 손상으로 해석하지 않습니다.

수업 통신만 짧게 캡처해 captures/에 저장합니다. 캡처 권한이 없는 경우 강사의 화면과 본인의 요청·응답 로그로 같은 네 가지 항목을 찾습니다.

HTTP 요청·응답을 설명한 뒤 교사가 npm run login:observe로 별도 실험 서버를 켭니다. 공통 실습에서 학생은 자기 demo 번호로 요청을 보내고 교사 캡처 화면에서 자신의 POST 본문을 찾습니다. 학생 개인 Wireshark 캡처는 선택입니다. 실제 포털 계정 대신 실험 페이지에 공개된 가짜 값만 사용합니다. 교사 서버로 들어오는 로그인 POST 본문을 Follow TCP Stream에서 읽고, 다음 04에서는 같은 값을 HTTPS로 보냈을 때 비교합니다. 포트는 8083이며 표시 필터는 tcp.port == 8083입니다. 로그인 관찰 학생 실습의 캡처 순서를 따릅니다. 비밀번호 입력란의 점 표시와 POST 방식 자체는 전송 내용을 암호화하지 않습니다.

HTTPS를 비교할 때는 일반 캡처에 TLS 복호화 키를 제공하지 않습니다. 브라우저 개발자 도구와 서버는 통신의 양 끝이므로 HTTPS에서도 원래 입력을 알 수 있다는 차이를 함께 확인합니다.

공식 참고: 스트림 따라가기, 루프백 캡처.

다음: 가짜 로그인 관찰 · 같은 로그인의 HTTPS 비교.