Nuxt中不使用v-html，如何渲染来自数据库中的html内容？

Question

asyncData({ app, params }) {
    return app.$api.GetArticle(params).then((res) => {
        return { article: res.data }
    })
},

<div v-html="article.content"></div>

从数据库中拿到的数据包含许多html标签的文章内容

原本只需要v-html插入数据即可，es-lint提示有注入风险

那么有什么其他的方式渲染数据库中的html内容呢？

Answer 1

通常情况下，这种警告是不需要在意的。但是，如果你确实在意安全的话，可以在展示html内容之前先用sanitize-html“净化”一下：

npm install sanitize-html

在代码当中初始化：

Vue.prototype.$sanitize = sanitizeHTML

然后，就可以在需要用的地方：

v-html="$sanitize(html)"

参见尤大在2017年的解释。

Answer 2

一般这种东西入库前都需要关键字监测和转义