vue 标签转为html?

Question

后台返回字段如下

content: "<h3 class="descTitle"><i class="titleFlag"></i>岗位职责</h3><p class="descItem">1、负责部门所辖会计师注册内容；</p>

需要转为html如下图

但是我用v-html，效果不对,我的写法

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

Answer 1

先把特殊字符转义再 v-html 试试，你这个应该是做了安全过滤

function htmlDecode(iStr) {
    let sStr = iStr;
    sStr = sStr.replaceAll("&", '&');
    sStr = sStr.replaceAll(">", '>');
    sStr = sStr.replaceAll("&lt;", '<');
    sStr = sStr.replaceAll("&quot;", '"');
    sStr = sStr.replaceAll("&#39;", '\'');
    return sStr;
}

v-html="htmlDecode(content)"

Answer 2

content得先转成带尖括号的html内容

Answer 3

先对这个html字符反转义一次，可以看看DOMParser

Answer 4

清楚什么是 XSS 和怎么预防的前提下，可以转义下（可考虑使用计算属性），再放到v-html 指令里。