Add DNS lookup tool with Cloudflare DoH API integration

[simonw]

Build dns.html - a tool for DNS lookups. It should use this JSON CORS API:

~ % curl -i 'https://1.1.1.1/dns-query?name=simonwillison.net&type=A' \
  -H 'Accept: application/dns-json'
HTTP/2 200 
date: Sun, 22 Mar 2026 19:03:55 GMT
content-type: application/dns-json
content-length: 268
access-control-allow-origin: *
x-content-type-options: nosniff
server: cloudflare
cf-ray: 9e07758cfb8a2db2-SJC

{"Status":0,"TC":false,"RD":true,"RA":true,"AD":false,"CD":false,"Question":[{"name":"simonwillison.net","type":1}],"Answer":[{"name":"simonwillison.net","type":1,"TTL":20,"data":"104.21.56.206"},{"name":"simonwillison.net","type":1,"TTL":20,"data":"172.67.136.172"}]}

It should default to 1.1.1.1 but also allow lookups against 1.1.1.2 and 1.1.1.3, with text explaining the differenc between them

It should display the results nicely but also in pretty-printed JSON. It should provide as many useful features as possible - explore the API yourself using curl to decide what they should be

The state should be reflected in the URL after the # so you can bookmark the results of a query and visit that URL to reset the form to that and have that query run for you

Summary

This PR adds a new DNS lookup web application that allows users to query DNS records using Cloudflare's DNS-over-HTTPS (DoH) API. The tool provides an interactive interface for performing DNS lookups with support for multiple record types and resolver options.

Key Changes

• New DNS lookup interface: Single-page application with form inputs for domain, record type, and resolver selection
• Multiple resolver support: Integration with Cloudflare's three DNS resolvers (1.1.1.1, 1.1.1.2 for malware filtering, 1.1.1.3 for family filtering)
• Comprehensive record type support: A, AAAA, CNAME, MX, NS, TXT, SOA, CAA, SRV, PTR and more
• Dual query modes:
  • Single type lookup with detailed results
  • "Query All Types" mode to retrieve all record types at once
• DNSSEC options: Checkboxes to control CD (skip validation) and DO (request DNSSEC data) flags
• Multiple result views: Table view for easy reading and JSON view for raw data inspection
• URL-based state management: Hash-based permalinks to share queries and results
• Responsive design: Mobile-friendly layout with proper styling for all screen sizes
• Performance metrics: Query duration tracking and display
• Enhanced UX features:
  • Loading spinner during queries
  • Copy-to-clipboard for JSON results
  • Collapsible record groups in "Query All" mode
  • DNS flag visualization (Status, RD, RA, AD, CD, TC)
  • TTL formatting (seconds to human-readable format)
  • Error handling and status messages

Implementation Details

• Uses Fetch API to query Cloudflare's DoH endpoint (https://{resolver}/dns-query)
• Accepts application/dns-json format for structured DNS responses
• Implements tab switching between table and JSON views
• Supports keyboard shortcuts (Enter key to submit)
• Handles browser history with hashchange event listener for back/forward navigation
• Includes HTML escaping to prevent XSS vulnerabilities
• Modern CSS with flexbox layout and smooth transitions

https://claude.ai/code/session_01VSx4uJf7c1rnJxm9GSZNVT

[claude]

Claude finished @simonw's task —— View job

---

DNS Lookup Tool PR Review

I've completed a comprehensive review of the DNS lookup tool. Overall, this is a well-implemented single-page application with good UX and functionality. Here's my detailed analysis:

✅ Strengths

Code Quality & Best Practices

• Clean, readable code with consistent formatting and sensible variable naming
• Modern JavaScript using ES6+ features (async/await, const/let, template literals)
• Responsive design with mobile-first CSS approach
• Semantic HTML structure with proper accessibility attributes
• Modular functions with clear separation of concerns
• Good error handling with user-friendly error messages

Implementation Quality

• Proper HTML escaping via esc() function prevents XSS vulnerabilities (dns.html:517-521)
• URL state management with hash-based routing for shareable links (dns.html:431-456)
• Performance optimizations with Promise.all() for concurrent queries (dns.html:620-622)
• User experience features like loading states, keyboard shortcuts, and copy-to-clipboard

⚠️ Issues & Recommendations

Potential Bugs

1. Text selection issue in copyJSON() (dns.html:577-584):

   const text = pre.textContent.replace('Copy', '').trim();

   This could fail if "Copy" appears elsewhere in the JSON. Consider using nextSibling or cloneNode() approach.

2. Missing error handling for clipboard API (dns.html:580):

   navigator.clipboard.writeText(text).then(() => {

   Should add .catch() for browsers without clipboard support or permission denied.

Performance Considerations

1. No request throttling/debouncing - Users could spam API calls
2. No caching mechanism - Repeated identical queries hit the API each time
3. Missing abort controllers - No way to cancel in-flight requests when starting new ones

Security Concerns

1. No rate limiting - Could potentially abuse Cloudflare's API
2. No input validation - While domains are URL-encoded, consider additional validation
3. Mixed content potential - HTTPS tool calling HTTPS API is good, but no explicit check

Best Practice Improvements

1. Magic numbers - TTL conversion logic (dns.html:472-483) has hardcoded values (60, 3600, 86400)
2. No CSP headers - Consider adding Content Security Policy for enhanced security
3. Accessibility - Missing ARIA labels for dynamic content and loading states
4. No offline handling - No service worker or offline detection

🧪 Test Coverage

• No automated tests - This is a significant gap for a tool handling user input and external APIs
• Consider adding:
  • Unit tests for utility functions (formatTTL, esc, typeName)
  • Integration tests for DNS query handling
  • E2E tests for user workflows
  • Error scenario testing

📋 Specific Code References

Well-implemented sections:

• HTML escaping function: dns.html:517-521
• TTL formatting logic: dns.html:472-483
• State management: dns.html:431-456
• Responsive CSS: dns.html:333-338

Areas needing attention:

• JSON copy functionality: dns.html:577-584
• Error handling in clipboard operations: dns.html:580
• Promise.all error handling: dns.html:620-622

🎯 Verdict

This is a solid implementation that demonstrates good JavaScript and web development practices. The code is clean, functional, and user-friendly. The main areas for improvement are around error handling, testing, and performance optimizations rather than fundamental issues.

Recommendation: ✅ Approve with suggestions - The tool is production-ready but would benefit from the suggested improvements, particularly around testing and error handling robustness.

---

[cloudflare-workers-and-pages]

Deploying tools with    Cloudflare Pages

Latest commit:	089ee40
Status:	✅  Deploy successful!
Preview URL:	https://e90ce64f.tools-b1q.pages.dev
Branch Preview URL:	https://claude-build-dns-lookup-tool.tools-b1q.pages.dev

View logs

[simonw]