XSS，即跨站脚本攻击，是将恶意脚本注入到网页中的一种网络攻击手段，它发生的根本原因是浏览器将用户数据误解析为可执行代码。
我们如何防范这种攻击呢？
一 输出编码与转义(最核心的防护手段)
不管是前端还是后端向浏览器输出内容时，一般有三种方式避免XSS攻击。
（1）优先使用 textContent 而非 innerHTML
innerHTML会读写元素内部完整HTML源码，解析字符串里的HTML标签，渲染页面，有XSS跨站脚本攻击的风险。
textContent只读写纯文本，完全忽略所有HTML标签。
<body>
<div id="app"></div>
<script>
var app = document.getElementById('app');
app.innerHTML = '<img src=x onerror="alert(1)">'; // 方式一
app.textContent = '<img src=x onerror="alert(1)">'; // 方式二
</script>
</body>
使用innerHTML，显示结果是：弹出alert框
使用textContent，显示结果是：展示一串字符
（2）将 < 转为 <，> 转为 >，" 转为 " 等
app.innerHTML = '<img src=x onerror="alert(1)">'; // 方式三
得到的效果和方式二一样，这样的转义会消除字符的html语法功能，只保留字面显示效果。
原理是：浏览器扫描到实体字符，翻译成'<'、'>'等普通字符，但翻译完成后，此时内容已经被浏览器判定为一段纯文本内容，不会二次扫描识别标签。
（3）使用 encodeURIComponent() 对 URL 参数进行编码
二 输入验证与过滤
对输入的数据(比如邮箱、手机号、用户名等)进行格式校验，比如使用正则表达式严格匹配，前后端都要有。
总结
vue框架对插值语法有默认转义，但v-html底层是innerHTML，有XSS风险，谨慎使用。
网站上对用户输入的要传给后端的内容，一定要做验证与过滤，而由后端或前端输出到页面上的代码一定要进行编码和转义。
