Frontend Watermarks That Survive DevTools: From Canvas to Anti-Debugging

Internal admin panels displaying revenue, PII, or strategy documents are screenshot targets. A watermark that disappears in DevTools provides no deterrence and no audit trail. These techniques raise the cost of removal from a single keystroke to a debugging session, buying time for server-side attribution to work.

A `position: fixed` div with low opacity takes two minutes to write and one second to delete in DevTools. The real problem is that the DOM is inherently inspectable and mutable. Moving the watermark out of the DOM tree — into a Canvas-rendered background image — removes the simplest attack vector, but a user who knows CSS can still override `background-image`.

Layering a MutationObserver on top watches for style attribute changes and restores the watermark immediately. A polling fallback catches cases where the observer itself is disconnected. For higher-stakes internal tools, rendering the watermark through a `::before` pseudo-element with `!important` on every property makes it inaccessible to direct DOM deletion and resistant to style injection.

None of this stops a determined user from screenshotting and cropping. The watermark's real job is post-incident traceability: every leaked image carries an employee ID, and server-side logs tie the request to a specific person regardless of what happened in the browser.