html5视频嵌入本身安全，但poster、onerror等属性若直接拼接用户输入会引发xss；须校验url协议与后缀、禁用内联事件、启用csp、服务端html净化，并优先采用上传id或iframe等安全封装方式。
HTML5 视频嵌入本身是安全的，但关键在于如何使用 <video></video> 及其子标签（如 <source></source>）和属性。不规范的写法会引入 XSS 风险，尤其当视频相关属性被用户可控输入影响时。
避免危险属性直接拼接用户输入
poster、onerror、onload 等属性若直接插入未经处理的用户数据，极易触发脚本执行。例如：<video poster="javascript:alert(1)"></video> 或<source onerror="alert(1)"></source> 都会在加载失败或解析时立即运行 JS。
- poster 属性只应接受合法图片 URL（如
https://example.com/cover.jpg），禁止接受javascript:、data:或其他可执行协议 - onerror、onload 等事件属性不应由用户控制；服务端渲染时必须移除或禁用这类内联事件
- 若需动态设置 poster，应先校验 URL 协议（仅允许 http/https）、后缀（.jpg/.png/.webp 等）并做白名单过滤
使用内容安全策略（CSP）限制执行上下文
CSP 是防御视频标签 XSS 的核心防线，它能阻止危险属性生效或脚本注入。
- 在 HTTP 响应头中设置
Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none'; base-uri 'self' - 明确禁止
unsafe-inline和unsafe-eval，防止内联脚本和动态执行 - 对 poster 中的图片资源，可通过
img-src单独限定来源，例如img-src 'self' https:
服务端过滤与前端净化双保险
仅靠前端校验不可信，所有用户提交的 HTML 片段（如富文本编辑器插入的 video 标签）都必须经过服务端清洗。
- 使用成熟库（如 DOMPurify）对 HTML 进行净化，配置白名单：只保留
video、source、track标签，且仅允许src、controls、autoplay、loop等安全属性 - 自动剥离
onerror、onload、onplay等事件处理器，以及formaction、autofocus等可被滥用的 HTML5 属性 - 对 poster、src 等 URL 类属性，统一做协议检查 + 域名白名单 + 路径规范化，防止绕过
替代方案：优先使用安全的封装方式
直接暴露 <video></video> 标签给用户输入风险高，建议采用更可控的交互模式。
- 提供视频上传功能，由后端生成唯一 ID 和可信 CDN 地址，前端仅通过 ID 渲染，不拼接任意 HTML
- 若需支持外部链接（如 YouTube），改用 iframe + sandbox 属性，并限制
allow-scripts以外的能力 - 对需要自定义封面图的场景，单独提供「封面图上传」字段，而非允许用户填 poster URL
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
