video标签src动态赋值不绕过CSP，但media-src默认不限制data:/blob:URL，需显式声明media-src 'self' data: blob:才能生效。
video 标签的 src 动态赋值是否绕过 CSP？
很多团队以为加了 Content-Security-Policy 就能拦住投屏劫持，但实际中，video.src 被 JavaScript 动态设置为 data: 或 blob: URL 时，CSP 的 media-src 策略默认不生效——浏览器允许这类内联地址，除非显式声明 media-src 'self' data: blob:。
测试时重点验证三点：
- 修改
video.src为data:video/mp4;base64,...，观察是否仍可播放且被投屏工具捕获 - 检查响应头中
Content-Security-Policy是否包含media-src且明确放行或禁止data:/blob: - 用 Chrome DevTools → Application → Frames → Content Security Policy 查看实时策略生效范围
投屏检测 API 的调用链是否暴露在前端？
有些方案在前端调用 navigator.getDisplayMedia 或监听 screen.orientation 变化来“感知投屏”，但这类检测逻辑本身是透明的。攻击者只要禁用对应 JS 函数、重写 getDisplayMedia、或直接 patch 检测结果，就能绕过。
真实有效的检测必须依赖服务端协同：
- 前端上报设备屏幕尺寸、DPR、
navigator.hardwareConcurrency、screen.isExtended等组合特征，而非单一值 - 服务端比对历史行为画像（如该设备从未出现过 3840×2160 分辨率）触发风险标记
- 关键动作（如播放敏感视频帧）前，要求前端携带服务端签发的一次性 token，token 绑定当前页面 visibilityState 和 focus 状态
video 元素是否被 iframe 沙箱隔离？
防投屏不是只靠 JS 检测，更要阻断投屏工具的数据抓取路径。如果视频渲染在非沙箱 iframe 中，Miracast/AirPlay 类工具可能直接截取整个 tab 的 GPU 输出层。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
必须确保：
- 承载
video的 iframe 带有sandbox="allow-scripts allow-same-origin"，且**不加**allow-popups或allow-top-navigation - iframe 的
src是同源静态 HTML，避免通过srcdoc注入可执行内容 - 主页面对 iframe 发送
postMessage控制播放时，校验event.origin和event.source，防止恶意 iframe 伪造控制指令
后端返回的 video URL 是否带一次性签名？
盗录最常见路径是拿到原始 src 地址后，用 ffmpeg 或浏览器插件直接拉流。如果后端返回的 MP4/HLS 地址是长期有效的，所有防投屏前端逻辑都形同虚设。
接口安全测试要确认：
- 每个
video请求的 URL 都含时间戳 + HMAC 签名，例如/video/123.mp4?t=1734675800&sig=abc123 - 签名密钥不硬编码在前端，而是由服务端动态下发（如通过登录态 JWT payload 附带短期密钥）
- 同一 URL 在服务端仅允许被请求一次，或限制 5 分钟内最多 3 次访问
最容易被忽略的是：签名验证逻辑是否在 CDN 边缘节点完成。如果只在源站校验，CDN 缓存未命中时攻击者仍可截获有效 URL 并反复使用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
