HTML页面水印保护方法有哪些？

HTML页面水印本质上只是一种脆弱的视觉提示，而非真正的版权保护手段——无论采用background-image、伪元素、Canvas还是动态JS插入，所有方案均运行在用户可控的浏览器环境中，可被轻松禁用、删除、绕过或截图规避；跨域图片需严格配置CORS与crossOrigin属性才能避免SecurityError，而MutationObserver轮询恢复虽能延缓删除却治标不治本，更常被忽视的是打印场景下水印会原样输出，暴露版权风险。

HTML水印不是版权保护，它只是页面上的一层视觉提示，所有实现方式都运行在用户浏览器里，能被一键禁用、删除或绕过。

为什么background-image水印最容易被移除

很多人把水印塞进 body::before 或直接设 body { background-image: url(...) }，以为“铺满就安全”。实际上，审查元素里点一下那个 ::before 节点，按 Delete 键，水印立刻消失；或者在控制台执行 document.body.style.backgroundImage = ''，同样生效。

• 伪元素和背景图都是标准 DOM/CSS 层级，没有任何封装或加密
• z-index: -1 或 pointer-events: none 只影响渲染顺序和交互，不增加任何防护能力
• 如果用了外部 PNG 文件，用户还能直接访问 your-watermark.png URL 下载原始水印图
• SVG base64 方案虽免请求，但 data URL 本身明文可见，解码后文字内容一目了然

canvas.toDataURL() 报错 SecurityError 怎么办

这是跨域图片触发的典型错误：SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement'。Canvas 绘制跨域图片后，若未提前声明权限，浏览器会拒绝导出像素数据——哪怕你只是想生成带水印的背景图。

• 必须给 new Image() 实例设置 crossOrigin = 'anonymous'
• 这个属性要写在 src 赋值之前，否则无效
• 目标图片服务器需返回 Access-Control-Allow-Origin: *（或指定域名），否则仍会失败
• 本地文件（file:// 协议）下无论如何都会报错，开发时得用本地服务（如 http://localhost）

动态水印怎么防用户手动删 DOM 节点

JavaScript 插入的水印