说在前面

>>>

河边贴上‘禁止游泳’的标识，并阻止不了真正想去游泳的人；前端禁止用户截图，可以制造一定的障碍，但无法抵挡用户层出不穷的手段。

前端能做什么？

CSS加水印

body::after {
  content: "禁止截图-禁止截图-禁止截图";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(45deg, rgba(255, 0, 0, 0.1) 0px 30px, transparent 30px 60px);
  pointer-events: none;
  text-align: center;
  line-height: 100vh;
  color: rgba(248, 8, 8, 0.5);
  font-size: 40px;
}

Canvas动态水印

const watermark = (userID) => {
  const canvas = document.createElement('canvas');
  canvas.width = 200;
  const ctx = canvas.getContext('2d');
  ctx.font = '15px Arial';
  ctx.fillStyle = 'rgba(200,0,0,0.2)';
  ctx.rotate(-20 * Math.PI/180);
  ctx.fillText(userID + ' ' + Date.now(), 10, 70);
  document.body.style.backgroundImage = `url(${canvas.toDataURL()})`;
}
setInterval(watermark("我是水印"), 1000); // 每秒更新水印

DRM加密技术

• 使用Widevine/PlayReady加密视频流，需搭配EME（Encrypted Media Extensions）实现，Netflix等流媒体平台已成熟应用

为什么无法完全阻止？

系统级漏洞

• 物理设备拍照：无法拦截手机/相机拍摄
  
  

• 虚拟机穿透：通过虚拟机直接截取宿主机的显存数据
  
  

软硬件辅助

• 显卡数据采集卡直接捕获HDMI输出信号
  
  

• 屏幕镜像工具（如ApowerMirror）绕过软件检测
  
  

哪些场景可以合法使用？

这些操作可能让公司被告

（2023-2025典型诉讼案分析）

• 《反不正当竞争法》风险
• 案例：某工具类App因屏蔽系统截屏功能，被用户起诉「侵害设备正常功能」败诉（2024京互终字第372号）
• 合规建议：在用户协议中明确约定限制条款（需弹窗二次确认）
• 国际合规差异
• 欧盟GDPR规定：水印中的时间戳属于个人数据，需提供删除接口
• 美国加州CCPA要求：必须支持「不跟踪水印」的隐私选项

平衡安全与体验

分层防护策略

• 敏感数据层：使用Canvas/WebGL渲染核心内容
• 展示层：叠加动态水印与半透明遮罩
• 传输层：启用CORS+HTTPS严格模式

用户体验优化

• 提供合法导出通道（如付费下载带数字签名PDF）
• 对用户提示："您正在访问受版权保护内容，截图将包含追踪信息"