一、问题说明
在日常的后台系统中经常会有输入框的业务，最近有个业务是这样子的：编辑文章信息，生成可预览的文章信息卡片。我看到代码中有个信息是这样处理的：
<div v-html="title"></div>
并且title是用v-model绑定的，直接用v-html插入Dom中
巧的是测试人员很有专业素养，直接输入一段script,alert脚本，问题就出来了,直接弹出
二、问题思考
问题就出现在这个v-html的绑定，根据vue官网文档的说明：
你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
既然知道问题的原因了，就该思考怎样去避免 XSS 攻击。
三、如何解决
按照官网的说明：
原始Html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令。
应该直接实用双大括号就可以解决问题了。
<div>{{ title }}</div>
试一试，输入<script>alert('get')</script>
结果：直接显示<script>alert('get')</script>
但是这样虽然解决了问题，但是直接显示脚本代码，丑啊。再想想解决方法。
优雅的解决方案：<pre>
根据w3c的说明
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
四、延伸
通过了解还存在这样一个情况
Vue的v-html指令，为什么xss没有生效?
<template>
<div v-html="msg">
</div>
</template>
<script>
export default {
data() {
return {
msg: 'msg'
}
},
mounted() {
this.msg = "插入了一个脚本：<script>console.log(1)<\/script>"; //解释了标签，但是没有打印
var script = document.createElement('script');
script.innerHTML = 'console.log(2)';
this.$el.parentElement.appendChild(script); //打印了 2
}
}
</script>
不生效的原因是在MDN文档上找到的：
尽管这看上去像 cross-site scripting 攻击，结果并不会导致什么。HTML 5 中指定不执行由 innerHTML 插入的
附上链接：