Building a DNS Client in the Browser from Scratch

How we encode and decode real DNS packets locally while using DNS-over-HTTPS as the browser-safe network transport.

July 29, 20264 min read

A webpage cannot open UDP or TCP port 53, and compiling code to WebAssembly does not escape that networking sandbox. Our DNS client therefore implements the protocol locally while sending its packet bytes through DNS-over-HTTPS.

This distinction matters: packet construction, compression-safe parsing, CNAME decisions, caching, and DNSSEC inspection happen on the device. An external recursive resolver still transports the query; this is not direct authoritative recursion.

Encoding a QNAME

Each label is prefixed by one length byte and the root is terminated by zero.

for (const label of name.split('.')) {
  packet.push(label.length, ...encoder.encode(label));
}
packet.push(0);

What remains external

Google or Cloudflare transports and recursively resolves the packet. The browser locally constructs, parses, caches, and analyzes it; it does not directly contact root or authoritative servers.

Why would you want to do this?

Files often need to move between formats, people, and systems. This task helps you create a result that is easier to edit, share, submit, or archive. Common reasons include:

Understand the DNS wire format instead of delegating parsing to provider JSON.
Preserve DNSSEC flags and record data.
Keep resolver decisions auditable in a small browser implementation.

How to do it step by step

1
Encode the 12-byte header and QNAME labels with DataView.
2
Append an EDNS OPT record and request DNSSEC data.
3
POST application/dns-message bytes to a DoH resolver.
4
Decode all sections and safely follow compression pointers.
5
Follow CNAMEs locally and cache answers until TTL expiry.

Which tools can you use?

Desktop software can work, but it may require an installation, paid plan, or account. A browser tool is more convenient for a quick task. Easy File Tools keeps the workflow direct: open the tool, choose your file, make the change, and download the result. Everything happens locally in your browser and nothing is uploaded.

The easy option: Easy File Tools

No account, no complicated setup, and a consistent interface across useful file tools.

Use DNS Lookup free

Tips for a better result

Reject labels over 63 bytes and names over 255 bytes.
Track visited offsets to stop malicious compression loops.
Differentiate NXDOMAIN, NODATA, SERVFAIL, REFUSED, timeout, and transport errors.

Common mistakes to avoid

Claiming WASM enables raw port 53 networking in a webpage.
Calling delegation reconstruction a direct iterative lookup.
Trusting RDATA lengths or compression pointers without bounds checks.

How this compares to Smallpdf, iLovePDF and Adobe

JSON DoH is convenient, but provider-specific JSON performs the interesting parsing elsewhere. Wire-format DoH lets the browser build and interpret the actual protocol message while respecting browser network limits.

Comparison of Easy File Tools with Smallpdf, iLovePDF, and Adobe Acrobat online
Criterion	Smallpdf	iLovePDF	Adobe Acrobat online	Easy File Tools
Where your file is processed	Uploaded to their servers	Uploaded to their servers	Uploaded to Adobe's cloud	In your browser, so the file never leaves your device
Account or sign-in	Prompted quickly, and required to continue past the free allowance	Optional for small jobs, required for larger ones	An Adobe ID is needed for most online tools	Never required
Usage limits	A small number of free tasks before an upgrade prompt	Daily task and file-count limits on the free tier	Free web tools act as a preview of a paid plan	No task counters and no daily caps
File size ceiling	Free tier caps the upload size	Free tier caps the upload size	Cloud upload limits apply	Up to 100 MB on the tools that set a limit, with no paid tier needed to reach it
Works without a connection	No, the server does the work	No, the server does the work	No, the cloud does the work	Yes for browser-based tools, once the page has loaded
Cost	Paid subscription for full access	Paid subscription for full access	Paid Acrobat subscription for full access	Free, with every tool available to everyone

Third-party plans and limits change often, so this table describes the general shape of each offer rather than exact prices. Check each provider for current terms.

Frequently asked questions

Is this a fully recursive resolver?

No. Browser networking cannot directly contact arbitrary port 53 servers. It is a local DNS protocol engine over an external DoH transport.

Does DNS data go to the application backend?

No. The browser contacts the selected DoH resolver directly.