如何让从数据库取出的带HTML标签的文本渲染出对应HTML效果

根本原因 #

为了防范XSS跨站脚本攻击，几乎所有前端框架、模板引擎默认都会对插入页面的字符串内容做转义处理，把<、>等HTML标记字符转换成<、>这类实体字符，浏览器只会将其当做普通文本展示，不会解析为HTML标签渲染样式。 #

可行解决思路 #

• 使用框架提供的原生HTML渲染能力
  各主流技术栈都开放了跳过转义、直接渲染HTML的专用API，常见场景用法如下：
  • Vue 系列：使用v-html指令绑定富文本内容

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

  • React 系列：使用dangerouslySetInnerHTML属性传入富文本内容

    <div dangerouslySetInnerHTML={{__html: richTextContent}} />
    

  • 原生JavaScript / jQuery：直接操作DOM的innerHTML属性

    // 原生写法
    document.querySelector('#content-box').innerHTML = richTextContent
    // jQuery写法
    $('#content-box').html(richTextContent)
    

• 先排查内容是否被二次转义
  如果调用上述API后还是展示标签原文，需要确认后端返回的内容是否被重复转义：如果拿到的原始数据是<p>Hello</p>这种格式，需要先做HTML实体解码，把转义后的实体字符还原为正常的HTML标记后再渲染。
• 必须做好XSS安全防护
  直接渲染用户输入的HTML存在注入恶意脚本的风险，建议在两个环节增加过滤逻辑：
  1. 内容存入数据库前，使用XSS过滤工具清除<script>、onclick、onerror等危险标签和属性，仅保留TinyMCE支持的合法富文本标记
  2. 内容取出渲染前，再做一次XSS过滤，实现双重防护

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