避免使用 vue 的 v-html 指令

一、问题说明

在日常的后台系统中经常会有输入框的业务，最近有个业务是这样子的：编辑文章信息，生成可预览的文章信息卡片。我看到代码中有个信息是这样处理的：

<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 插入的

附上链接：

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML#%E5%AE%89%E5%85%A8%E9%97%AE%E9%A2%98