如何防止用户通过浏览器「检查元素」修改HTML绕过付费查看服务器视频

首先要明确一个核心事实：只要你把视频资源做成了长期固定、可通过公开HTTP路径直接访问的静态文件，前端所有的隐藏路径、禁用检查元素、JS混淆操作，都防不住懂浏览器开发者工具的用户——因为前端运行在用户本地，所有HTML、JS内容用户都有完全的修改权限，哪怕你没做任何防护，只要路径正确，用户插入一个<video>标签就能直接播放。
能从根源上拦住这类绕过行为的手段，全部要落在服务端的鉴权逻辑上，没有任何纯前端方案能彻底解决这个问题。

核心防护逻辑 #

• 从文件存储层面隔离公开资源
  绝对不要把付费视频文件放在Nginx等Web服务直接映射的静态公开目录下（比如/www/site/static/videos/）。这类目录下的文件只要路径正确，不管你前端怎么隐藏，服务端都不会做权限校验，直接会把文件返回给请求者。正确的做法是把付费视频存在Web服务根目录之外的存储路径，所有对视频的请求都必须经过后端的业务接口流转。
• 所有视频流请求强制走后端鉴权
  不要让前端直接拿到指向静态视频文件的路径，前端只需要传入课程ID、课时ID两个标识，把视频请求统一指向动态接口，比如/api/play?course_id=102&lesson_id=5。
  这个接口收到请求后第一步先做三层校验：
  1. 校验当前用户的登录会话是否有效
  2. 校验当前用户是否持有对应课程/课时的访问权限（是否完成付费）
  3. 校验请求的发起上下文是否为正常的业务播放器
     任意一层校验不通过，直接返回403状态码，不返回任何视频内容。校验通过后，再由后端从非公开的存储路径读取视频流，分段返回给前端。
• 给所有临时授权的播放地址加短时效签名
  就算鉴权通过，也不要给用户返回一个永久有效的播放地址。后端生成播放地址的时候，要把过期时间、用户ID、资源ID做加密签名附在地址参数里，比如生成的播放流地址带上expire=1735690000（10分钟后的时间戳）、sign=随机加密串这类参数。服务端收到流请求的时候，先校验签名是否合法、时间有没有过期，过期的地址直接拒绝请求。
  这种机制下，哪怕用户拿到了播放地址，复制到自己写的<video>标签里，最多也只能用几分钟，过期就失效，没法长期传播或者留存直链。
• 补充防护手段（仅作为核心鉴权的补充，不能单独依赖）
  • 开启Nginx层面的防盗链校验，拦截Referer不匹配的跨域直接请求，这类防护只能拦住完全不懂技术的普通用户，因为技术用户可以手动构造请求头绕过，所以只能做辅助
  • 对视频文件做分片加密，前端使用专用的解密播放器播放，就算用户拿到了加密分片，没有绑定会话的动态解密密钥，也没法解码出可播放的视频内容。注意不要把解密密钥硬写在前端JS里，密钥必须通过每一次的鉴权接口动态返回
  • 用HTTP Range协议做流式切片传输，后端不要一次性把整个视频文件的完整流返回给浏览器，而是根据浏览器的分段请求逐段返回视频数据，增加用户抓取完整视频文件的成本。

常见的无效操作 #

下面这些操作看似能防爬，实际上对有基础技术能力的用户没有任何作用：

• 混淆前端JS、把视频路径拆成字符串拼接藏在代码里：用户打开浏览器网络面板，就能直接看到所有实际发起的视频请求地址，根本不需要去读你的混淆代码
• 禁用右键、禁用F12打开开发者工具：浏览器本身的功能用户是可以通过高级设置、启动参数关掉这些拦截的，没有任何强制效力
• 把视频路径写得特别复杂、带随机字符：只要这个路径是固定不变的，被用户抓到之后就可以永久复用

内容的提问来源于stack exchange，提问作者Devolper12345