Skip to content
Computing Medium #nat#p2p#webrtc

NAT Traversal: Hole Punching

Two peers behind NATs synchronize via a rendezvous server, then connect directly.

A free, animated nat traversal: hole punching you can read here or embed on any website, from Scrollchart.

NAT Traversal: Hole Punching

NAT Traversal: UDP Hole PunchingTwo peers behind NATs discover public endpoints via STUN, then open a direct path with simultaneous packets.Peer A10.0.0.1:5000(behind NAT A)STUN / Signalpublic server203.0.113.1:3478Peer B192.168.1.2:6000(behind NAT B)NAT A: 203.0.113.10:44200NAT B: 198.51.100.22:55301Binding Request (src: 10.0.0.1:5000)NAT A rewrites source to 203.0.113.10:44200Binding Response: mapped = 203.0.113.10:44200Peer A now knows its public endpointBinding Request (src: 192.168.1.2:6000)NAT B rewrites source to 198.51.100.22:55301Binding Response: mapped = 198.51.100.22:55301Peer B now knows its public endpointSignaling (via server): exchange mapped endpointsA tells B its mapped address; B tells A its mapped addressSimultaneous UDP punch: A->B' and B->A' at same momentEach outbound UDP creates a NAT mapping; inbound now acceptedDirect P2P path open (no relay server required)Why it worksFull-cone NATs: any external host may send once a mapping exists.Symmetric NATs: mapping is per-destination, punch fails without relay.Real-world stack (WebRTC)ICE collects STUN (srflx) and TURN (relay) candidates. Candidatesexchanged via SDP offer/answer; connectivity checks select best path.

Two peers behind NATs each contact a STUN server to learn their public mapped endpoints. They exchange those via signaling, then both send simultaneous outbound packets. Each NAT now has an outbound mapping permitting the inbound, and a direct path opens.

Good for

  • WebRTC and peer-to-peer networking explainers
  • Gaming backend architecture content on direct client connections
  • VoIP and video-call infrastructure deep dives

Source & accuracy

This nat traversal: hole punching is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

The NAT barrier to direct connections

Network Address Translation (NAT) rewrites packet headers so devices behind a router can share a public IP. The router tracks outgoing connections and forwards responses back to the originator. Incoming connections are a problem: if a device inside NAT tries to accept a connection from the outside, the router has no rule for forwarding it, so the connection dies. This isolates peer-to-peer applications like file sharing or voice calls.

Hole punching through a rendezvous server

Hole punching (also called UDP hole punching) works around NAT using a public rendezvous server. Peer A contacts the server and says 'I am at 192.168.1.10:5000 internally, port 54321 externally'. Peer B does the same. The server tells each peer the other's external address. Both peers then send UDP packets to each other's external addresses. The outgoing packet from each peer punches a hole in its NAT (creating a mapping), and the packets pass through. Subsequent packets use this hole and connect directly.

When hole punching fails

Some NATs are symmetric: they assign a different external port for each destination, making the hole from A to B useless for A talking to C. Others are cone-shaped: one external port for all destinations. STUN (Session Traversal Utilities for NAT) detects the NAT type, and applications choose the right strategy. If hole punching fails (symmetric NAT, overly restrictive firewall), applications fall back to a relay server: both peers send traffic through the server, defeating peer-to-peer but ensuring connectivity.

Embed this diagram

Add this animated nat traversal: hole punching to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated nat traversal: hole punching for any website.
Who uses it
Developer blogs, DevOps / SRE sites.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="nat-traversal" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "NAT Traversal: Hole Punching" for my website?
Scrollchart provides "NAT Traversal: Hole Punching" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I embed a nat traversal: hole punching in a developer or tech blog?
Copy the one-line snippet from the Scrollchart diagram page and paste it into your post HTML. It works in any static site generator, CMS, or hand-coded HTML page. The embed is a thin loader, not an iframe, so the content is fully in your DOM.