The Web Page You See Isn't a Static Document
When you open a web page, your browser doesn't simply display a file. It constructs a living, interactive structure called the Document Object Model (DOM) — a tree-like representation of every element on the page: headings, paragraphs, images, buttons, links, and more.
The DOM is what your browser actually renders. And critically, it can be changed by anyone with access to the browser — without leaving a trace on the original server.
What Is the DOM?
The DOM is a programming interface that represents an HTML document as a hierarchy of nodes. Every HTML tag becomes a node, and every piece of text, attribute, or style is part of that tree.
Here is a simplified example:
<html>
<body>
<h1>Product Listing</h1>
<p class="price">$49.99</p>
<p class="seller">Sold by: TrustedShop</p>
</body>
</html>
The browser parses this HTML into a DOM tree that it renders visually. JavaScript running on the page — or injected by the user — can modify any part of this tree in real time.
How Easy Is DOM Manipulation?
Every modern browser ships with Developer Tools (usually opened with F12 or right-click > Inspect). These tools let anyone:
- Edit text content — Change a price from "$49.99" to "$4.99" or alter a chat message
- Modify attributes — Change timestamps, usernames, or profile links
- Add or remove elements — Insert fake messages or delete incriminating ones
- Alter styles — Change colors, hide elements, or reposition content
None of these changes require programming skills. A few clicks and keystrokes are enough to transform any web page into something entirely different — and a screenshot of the modified page looks indistinguishable from the real thing.
A Practical Example
Suppose someone owes you money and sends a message saying "I'll pay you next Friday." Using Developer Tools, they could change that message to "You said you didn't need it back" — then screenshot the altered conversation as "proof." Without the original DOM data, there is no way to detect this manipulation from the image alone.
Why This Matters for Legal Evidence
Courts are increasingly aware that web page content can be trivially altered on the client side. This creates a fundamental problem: a screenshot only captures pixels, not provenance.
A screenshot cannot answer:
- Did this content actually exist on the server?
- Was the DOM modified before the capture?
- Were Developer Tools used to inject or alter elements?
This is why many jurisdictions now require additional verification beyond a simple image file when digital evidence is presented.
How DOM Snapshots Solve the Problem
A DOM snapshot is a complete copy of the page's HTML source as rendered by the browser at the moment of capture. Unlike a screenshot, a DOM snapshot preserves:
- The full HTML structure — Every tag, attribute, and text node
- Embedded scripts and styles — What code was running on the page
- Form states and dynamic content — Content loaded by JavaScript
- Resource references — Links to images, stylesheets, and external scripts
When combined with other forensic data, a DOM snapshot provides a verifiable record of what the page actually contained.
TrueSnap's Approach to DOM Preservation
TrueSnap captures the DOM in a controlled environment designed to prevent manipulation:
- Controlled browser — Developer Tools are fully disabled during capture, preventing client-side modifications
- Complete DOM snapshot — The entire HTML source is saved as a
page.htmlfile alongside the visual screenshot - Network verification — HAR (HTTP Archive) files record all server communications, confirming the content came from the actual server
- Cryptographic binding — A SHA-256 hash is computed over the entire evidence package (including the DOM snapshot), then anchored to the blockchain
This means the DOM snapshot can be cross-referenced against the network traffic and TLS certificates. If someone modified the DOM before capture, the discrepancies between the server response (in the HAR file) and the rendered DOM would be detectable.
What to Look for When Evaluating Evidence
If you receive digital evidence or need to assess its reliability, ask these questions:
- Is there a DOM snapshot? A screenshot alone proves very little.
- Are network logs included? HAR files show what the server actually delivered.
- Was the capture environment controlled? Were Developer Tools disabled?
- Is there cryptographic verification? A hash and timestamp prove the evidence hasn't been altered after capture.
Key Takeaway
The DOM is the real structure behind every web page — and it can be silently modified by anyone. Screenshots capture only the visual output, not the underlying data. For digital evidence to be trustworthy, the DOM itself must be preserved in a controlled, verifiable environment. That is the difference between a picture of a web page and actual proof of what it contained.