How is a web application firewall (WAF) built into a DMZ so that it really protects the web servers behind it?

The WAF is placed between the internet and the web servers or web-application servers, and all traffic must be routed through it, so that only the WAF is reachable from the internet. The public IP addresses, the TLS/SSL certificates and the public DNS entries live on the WAF, not on the web servers, and the rest of the network is built with private addresses.

* Only the WAF carries public addresses, certificates and DNS names; the web servers behind it are private. *

A quick recap: a DMZ is the separate zone for servers that offer services to the internet, and a WAF is a gateway that inspects HTTP(S) requests and responses for attacks such as injection or cross-site scripting. Putting the one inside the other only works if the WAF is the only door. In the reference picture, web server A and web application B each have a private address (ip-a, ip-b); the WAF publishes them under the public addresses ip1 and ip2, each with its own URL and certificate (url-a/zert-a, url-b/zert-b). The firewall in front of the DMZ says:

• internet -> waf: allow http(s)
• internet <-> dmz: deny all

Because the certificate sits on the WAF, the encrypted connection ends there, which is what lets the WAF read and inspect the requests at all. Keeping everything else private is the security-in-depth part: even if a firewall rule were wrong, a server without a public address has no route from the internet.

Go deeper:

• OWASP — Web Application Firewall — what a WAF inspects and where it sits in front of an application.
• Defense in depth (computing) — Wikipedia — why a second, independent barrier (private addressing) backs up the first.