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