Lab Spec: NET-101 TLS 1.3 Handshake Replay Interactive

Phase-2 interactive that extends the Phase-1 TCP handshake replay into TLS 1.3. Same pcap-tools replay-mode substrate; new state-machine overlay; new authored callouts. The engineering implementation landed in the same round as the spec; this document captures the authoring contract for future curriculum review and for the worksheet that will follow this round.

Section 1: Educational scenario

When a browser opens an HTTPS connection, the TCP handshake students just learned (Week 6) is followed immediately by a TLS 1.3 handshake. Six packets, one round trip. The student steps through each packet and watches the client and server state machines advance from START to CONNECTED.

TLS 1.3 specifically (not 1.2) because TLS 1.3 is the modern default on the public web (over 80% of HTTPS in 2026 per the Mozilla TLS telemetry); the handshake is simpler (1 RTT not 2); and the encryption boundary moves earlier in the flight, which makes the encrypted-flight pedagogy of content_type 0x17 more concrete.

Relationship to the static diagram. The static sequence diagram for TLS 1.3 shipped 2026-05-13 (net-101-tls-13-handshake.svg) shows the same six packets as a sequence diagram with annotated record types. This interactive is that diagram with a Step button and a state-machine overlay on each endpoint.

Why this interactive, at this point in the course. Week 10 introduces TLS and the certificate-chain trust model. Lab 10-1 asks students to capture an HTTPS handshake from their own browser (using curl --tls-max 1.3 -k against a local openssl server, plus tcpdump on loopback) and identify each step. This replay sits between the lecture and Lab 10-1: it gives the student an annotated step-through against a clean academy capture before they generate their own.

Section 2: Learning objectives

After stepping through the replay, a student can:

1. Identify which TLS handshake messages are plaintext on the wire (ClientHello and ServerHello only) and which are encrypted under handshake-traffic keys (everything from EncryptedExtensions onward).
2. Explain why legacy_version reads 0x0303 (TLS 1.2) instead of 0x0304 (TLS 1.3) on the record layer, and where the real version is negotiated.
3. Name both endpoints' TLS states after each packet is played, per RFC 8446 Appendix A.
4. Distinguish the four sub-messages in the server flight (EncryptedExtensions, Certificate, CertificateVerify, Finished) and explain what each one carries.
5. Articulate why TLS 1.3 collapsed the TLS 1.2 2-RTT handshake to 1 RTT by moving key_share into ClientHello and ServerHello.
6. Connect the encrypted-flight wrapping (content_type 0x17) to the design goal of hiding handshake-message types from on-path observers.

Section 3: Fixture

The packets carry the correct TLS record-layer framing (content_type, version, length) so any TLS-aware parser (Wireshark, tshark, the academy's pcap-tools wasm core) reads them as legitimate TLS 1.3 records. The encrypted-payload bytes are deterministic placeholders (0xee, 0xc1, 0xcf, 0xff patterns by packet) because the pedagogy here is the state-machine progression, not cryptographic correctness. A real-kernel variant via openssl s_server + tcpdump is preserved in the recipe script's closing comment block for operators who want authentic-kernel bytes.

Section 4: Per-step pedagogy

Authored verbatim in pcap-tools/static/replay-mode.js as the TLS_13_CALLOUTS table. Six steps plus the initial state and a summary screen. Each step's callout body covers two layers:

1. Wire layer: what the bytes look like, what record types are involved, what extensions matter.
2. Crypto layer: what keys exist by this point, what each side can verify.

The wire view at each step is also reproduced in the replay-mode arithmetic box (analogous to the TCP replay's seq/ack arithmetic box) so students see the literal field values that the on-wire bytes encode.

Summary of the six steps

The state-name choices follow RFC 8446 Appendix A (WAIT_SH, WAIT_EE, WAIT_CERT_CR, WAIT_CV, WAIT_FINISHED, CONNECTED for the client; START, RECVD_CH, NEGOTIATED, WAIT_FLIGHT2, WAIT_FINISHED, CONNECTED for the server). The server's WAIT_FLIGHT2 state collapses into NEGOTIATED in the pedagogy because the student sees only the wire packets, not the server's internal kernel transitions during the encrypted flight.

Section 5: Engineering implementation

Implemented in the same round as this spec authoring.

Files touched:

• pcap-tools/static/replay-mode.js: added TLS_13_CALLOUTS table; calloutsForType dispatcher updated; stateClass extended to map CONNECTED / START / TLS transient-states to existing CSS classes; replay-panel title updated.
• pcap-tools/fixtures/curated-12-manifest.json: bumped to v9; added net-101-academy-tls13 entry with the replay_mode block per the tls_handshake_13 type.
• pcap-tools/fixtures/academy-original/academy-tls13.pcap + .meta.yaml sidecar: scapy-synthesized fixture.
• pcap-tools/fixtures/_capture-recipes/capture-tls13.sh: deterministic regeneration script + sidecar metadata writer.
• pcap-tools/backend/tutor/prompts/overlays/tls-13-replay-context.md: AI-tutor context overlay per the TCP-3way overlay shape.
• pcap-tools/tests/playwright/test_tls_13_replay.py: Playwright tests (4+) covering panel mount + state-machine transitions + summary screen.

Same UI conventions as the TCP replay:

• Replay panel mounts above the standard 3-pane workspace
• State pills above the stack-of-packets show the two endpoints' current states; color-coded per stateClass
• Per-step authored callout text (verbatim from TLS_13_CALLOUTS)
• Arithmetic / wire-view box where applicable
• Standard pcap-tools view (packet table + protocol tree + hex dump) stays visible throughout; the replay drives the table selection

Section 6: Cross-references

Section 7: Authoring notes

Voice register. Callout text in TLS_13_CALLOUTS is written at the NET-101 / SEC-101 cross-pollination register: the student has finished the TCP handshake replay (Week 6) and the certificate-chain-validation lecture (Week 9), and is now meeting TLS as the protocol that ties them together. No middlebox-internals digressions; no QUIC asides (QUIC ships in Week 13).

No metaphors. TLS is a protocol with packets and keys. The callouts describe what bytes go where and what keys exist when. The student does not need a "TLS as a sealed envelope" metaphor; they need to see the actual record format.

Editor discipline. No em-dashes, no en-dashes used as pauses, no phrase-blacklist terms. Final-pass audits clean across replay-mode.js, the overlay markdown, this spec, and the manifest entry.

Lab spec authored 2026-05-13 under R-INTERACTIVE-NET-101-TLS-HANDSHAKE-REPLAY-2026-05-13. Companion Tier-1 worksheet (predict-then-verify drills paired with the replay) is queued for a follow-on round per the brief's "OPTIONAL THIS ROUND" qualifier.