如何阻止视频blob URL在新标签页中打开？

核心逻辑是缩短blob URL的有效生命周期、提高直接访问的门槛，以下是可落地的实现方案：

• 及时销毁生成的blob URL
  视频成功加载后立即调用URL.revokeObjectURL()销毁对应地址，此时已绑定到页面播放器的视频流不受影响，但用户复制的地址会直接失效，无法在新标签页打开。参考实现代码：

  const videoEl = document.querySelector('#your-video-player');
  const videoBlob = new Blob([获取到的视频二进制数据], { type: 'video/mp4' });
  const blobUrl = URL.createObjectURL(videoBlob);
  videoEl.src = blobUrl;
  // 视频元数据加载完成后立即销毁blob地址
  videoEl.addEventListener('loadedmetadata', () => {
    URL.revokeObjectURL(blobUrl);
  });
  

• 改用Media Source Extensions(MSE)实现分片加载
  不生成完整视频的blob URL，将视频切分为若干小分片，通过MSE接口逐段将分片数据喂给播放器，全程不对外暴露完整视频的访问地址。还可给每个分片请求添加单次有效的校验令牌，过期即无法访问，进一步提高盗刷门槛。
• 配置Content Security Policy(CSP)规则限制资源使用
  在页面响应头中添加CSP规则，限制blob资源仅可被页面内的媒体元素加载，禁止直接作为顶层页面资源打开，参考配置：

  Content-Security-Policy: media-src 'self' blob:; object-src 'none'; navigation-to 'self' https://你的域名/*;
  

• 辅助防护手段
  禁用播放器右键菜单、添加页面反调试逻辑，提高普通用户提取blob URL的难度。

注意：不存在100%可阻止视频被下载的方案，只要视频可正常播放，就可通过录屏、抓包等手段获取资源，以上方案仅可阻止普通用户直接复制blob地址下载的行为，大幅提高非技术用户的盗取门槛。

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