如何将Vue2Editor输出的HTML字符串转为页面可正常渲染的真实HTML

问题根因 #

默认情况下，前端框架和浏览器都会对插入的文本内容做HTML转义处理，避免XSS注入攻击，所以包含HTML标签的字符串会被当成纯文本渲染，标签不会生效。

解决方案 #

场景1：Vue项目（使用Vue2Editor的场景属于该类） #

Vue提供了v-html指令，可以直接将字符串内容当做HTML渲染：

<template>
  <div class="content-container">
    <!-- 直接用v-html绑定HTML字段即可 -->
    <div v-html="contentInfo.content_tip"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      contentInfo: {}
    }
  },
  mounted() {
    // 接口请求拿到返回数据后赋值
    this.contentInfo = {
      "id": "04c47128-de82-459c-acb5-c8d99c61bbe6",
      "content_tip": "<h3>Some random text</h3>",
      "created_at": "2021-10-17T11:53:03.000Z",
      "updated_at": "2021-10-17T11:53:03.000Z"
    }
  }
}
</script>

场景2：原生JS项目 #

直接给DOM元素的innerHTML属性赋值即可：

// 拿到接口返回的HTML内容
const contentHtml = res.data.content_tip
const container = document.querySelector('.content-container')
container.innerHTML = contentHtml

特殊情况处理 #

如果接口返回的HTML内容是经过实体转义的格式（比如<被转成了<、>被转成了>），需要先做HTML反转义再渲染：

function htmlDecode (str) {
  const ele = document.createElement('div')
  ele.innerHTML = str
  return ele.innerText || ele.textContent
}

// 处理后再赋值
const rawHtml = htmlDecode(res.data.content_tip)
// Vue项目直接把rawHtml绑定给v-html即可
// 原生项目直接赋值给innerHTML即可

注意事项 #

• v-html和innerHTML都存在XSS注入风险，仅在内容来源完全可控的场景下使用。如果内容包含用户提交的不可信内容，需要先通过XSS清洗库对HTML内容做过滤后再渲染。

内容的提问来源于stack exchange，提问作者dokichan