Skip to content

feat: Add Domain Information Card - closes #184#185

Open
M0izz wants to merge 1 commit into
Mrinalray:mainfrom
M0izz:feature/domain-info-card-184
Open

feat: Add Domain Information Card - closes #184#185
M0izz wants to merge 1 commit into
Mrinalray:mainfrom
M0izz:feature/domain-info-card-184

Conversation

@M0izz

@M0izz M0izz commented Jul 7, 2026

Copy link
Copy Markdown

Closes #184

Summary

Adds a Domain Information Card to the URL scanner page that parses the scanned URL client-side and displays a structural breakdown alongside the existing scan-result card.

Changes

File Type Description
domain-info-card.js NEW URL parsing via native URL API + render logic
domain-info-card.css NEW Dark monospace "packet inspector" styles
index.html +3 lines CSS link, #domainInfoCard mount div, script tag
script.js +2 lines renderDomainInfoCard(url) after if/else, renderDomainInfoCard('') in catch

Acceptance Criteria

  • Parse URL using browser-native URL API - no third-party parser
  • - [x] Display all 8 fields: Protocol, Hostname, Subdomain, Domain, TLD, Path, Query, Fragment
  • - [x] Missing/empty fields render as - (em dash), not blank/null/undefined
  • - [x] Card auto-updates on every new scan - single hoisted call in checkSecurity()
  • - [x] Idle state shown before first scan: "Scan a URL to see its structural breakdown."
  • - [x] Error state for malformed URLs - no dashboard crash
  • - [x] Responsive layout: <=420px switches to column layout
  • - [x] Dark + light mode support via existing .light-mode class on <html>
  • - [x] prefers-reduced-motion guard disables animations for accessibility

Verified Edge Cases

Input Result
https://mail.google.com/search?q=security#results protocol=HTTPS, subdomain=mail, domain=google, tld=.com, path=/search, query=q=security, fragment=results
http://example.com subdomain=-, query=-, fragment=-
https://localhost:3000/test subdomain=-, domain=localhost, tld=-
not a url Error state - no crash

Known Limitation (follow-up)

The splitHostname function uses a last-label heuristic and does not consult the Public Suffix List. Compound TLDs (.co.uk, .com.au) split incorrectly. A proper fix via psl or tldts is a deliberate follow-up - not a silent workaround.

Closes Mrinalray#184

Add a client-side Domain Information Card that parses the scanned URL
and displays a structural breakdown (protocol, hostname, subdomain,
domain, TLD, path, query, fragment) alongside the existing scan-result
card. The card auto-updates on every scan via a single renderDomainInfoCard()
call hoisted after the if/else block in checkSecurity().

Changes
- domain-info-card.js (new): URL parsing via native URL API, splitHostname
  heuristic, three render states (idle / error / success), exposes
  window.renderDomainInfoCard() for script.js integration
- domain-info-card.css (new): dark monospace packet-inspector aesthetic,
  #35d8c8 cyan for populated values, #a8894f amber for missing (—)
  placeholders, 420px responsive breakpoint, prefers-reduced-motion guard,
  light-mode overrides via .light-mode class
- index.html: +3 lines (CSS link, #domainInfoCard mount, script tag)
- script.js: +2 lines (renderDomainInfoCard(url) after if/else,
  renderDomainInfoCard('') in catch)

Known limitation: splitHostname uses a last-label heuristic and does NOT
consult the Public Suffix List. Compound TLDs (.co.uk, .com.au) will
split incorrectly. A proper fix via psl/tldts is deferred to a follow-up.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Request: Add Domain Information Card to Threat Dashboard

1 participant