揭秘Vue中v-html的XSS风险：如何安全使用HTML插入？
v-html指令能让网页显示带格式的内容，但也可能成为黑客攻击的入口。Vue官方很早就警告过：动态渲染任意HTML非常危险，容易导致XSS攻击。这条警告应该被当作安全红线，而不是普通建议。
一、v-html为什么危险
它直接把HTML代码塞进网页，跳过了Vue的安全检查。就像让陌生人直接进你家，根本不知道他带了什么东西。如果这段HTML里有恶意脚本，浏览器会乖乖执行。黑客能偷用户登录信息，甚至控制整个网页。
真实案例：某购物网站用v-html显示用户评论。黑客上传了这段代码：
```html
<img src="x" onerror="偷取用户Cookie的代码">
```
用户打开页面时，图片加载失败自动运行恶意代码，把用户登录信息发到黑客服务器。
二、常见误区
很多人以为<script>标签会被浏览器拦截就安全了。其实像onclick、onerror这些事件属性里的代码照样能运行。这就像只锁了大门却开着窗户，小偷照样能进来。
三、安全解决方案
1. 安装“HTML安检仪”
DOMPurify这个工具专门过滤危险代码。它能去掉恶意脚本，只留下安全的HTML。在Vue里用起来很简单：
```javascript
import DOMPurify from 'dompurify';
const cleanHtml = DOMPurify.sanitize;
<div v-html="cleanHtml"></div>
```
2. 设置允许名单
比如只允许加粗、斜体这些基础格式：
```javascript
DOMPurify.sanitize;
```
这样既保留了基本排版功能，又堵住了漏洞。
3. 多层防护更保险
- 前后端都要过滤：用户输入时过滤一次，存数据库前再过滤一次
- 设置内容安全策略：告诉浏览器只加载可信来源的脚本
- 给Cookie上锁：加上HttpOnly属性，让JavaScript读不到敏感信息
四、要躲开的坑
别轻信“可信内容”。某公司内部系统觉得管理员输入很安全，结果黑客骗到管理员账号后注入了恶意代码。第三方组件也可能有风险，比如富文本编辑器生成的代码同样需要过滤。
安全工具要常更新。DOMPurify平均三个月升级一次，及时修补新发现的漏洞。就像门锁旧了要换新，别给黑客留机会。
五、安全第一
网页安全没有百分之百，但多一道防护就少一分风险。当你想用v-html时，先问自己三个问题：这内容可信吗？我过滤了吗？还有没有更安全的做法？记住技术总监那句警告：“每用一次v-html，就等于给黑客递了一把钥匙”。