如何阻止视频下载APP从React网站下载视频？

前端的右键禁用、controlsList='nodownload'这类操作只能拦住普通用户，对付专门做抓流的内置浏览器APP根本没用，得从后端和内容分发层面下狠手：

• 用短时效预签名URL分发视频
  别让服务器直接返回视频文件，而是给前端生成带过期时间（比如5-10分钟）的AWS预签名URL。就算APP拿到这个URL，很快也会失效，没法反复用或者批量下载。还能把URL和用户的IP绑定，确保只有当前访问的IP能拉取视频。

• 转用HLS/DASH流媒体协议
  把视频切成10秒左右的小分片，生成.m3u8（HLS）或者DASH格式的播放列表。用户播放时，服务器每次只返回单个分片的临时访问链接，而且每个分片URL都设短时效。这类APP很难自动把所有分片拼回完整视频，大幅提高抓流门槛。

• 加请求合法性校验
  服务器返回视频前，先检查请求的Referer头是不是你的网站域名，或者校验前端请求时带的用户会话token。只有合法的、带有效会话的请求才给视频数据，那些内置浏览器APP通常不会自动带上正确的校验头，能挡住大部分非法请求。

• 动态生成视频访问路径
  别用固定的视频文件路径，用户每次点播放时，服务器生成一个随机临时路径，映射到AWS存储桶里的真实文件。播放结束后立刻废掉这个临时路径，避免被爬虫或APP缓存后反复访问。

前端辅助强化（锦上添花） #

虽然没法彻底解决，但能进一步增加抓流难度：

• 监听video元素的play事件，实时检查页面域名、用户会话是否合法，一旦异常就暂停播放。
• 用Canvas渲染视频画面，不用原生video标签。这样APP拿不到video的源地址，但会增加前端性能开销，适合对安全要求极高的场景。

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