v-html指令的XSS风险与防护

Tue, 04 Mar 2025 07:00:27 +0000

考察点分析

本题主要考查候选人以下能力维度：

具体技术评估点：

XSS防御机制 > 模板编译原理 > 框架设计哲学

XSS风险根源：
- v-html底层使用innerHTML直接注入原始HTML
- 恶意载荷可通过<script>执行或事件属性触发（如onerror="alert(1)"）
- 攻击向量包括用户输入、第三方接口数据等不可信源

Vue模板保护机制：

 // 普通插值自动HTML转义
{{ userInput }} => 转义为文本节点
// v-html跳过转义直接解析
<div v-html="rawHTML"></div> => 创建为DOM元素

框架设计考量：
- HTML净化需要上下文感知（如白名单规则差异）
- 安全策略可能随业务场景变化（CMS系统 vs 代码编辑器）
- 保持框架核心体积最小化原则

安全漏洞：

替代方案：

模板插值：自动HTML实体编码

 <div>{{ untrustedContent }}</div> // 自动转义< > &等字符