Node.js下Handlebars渲染CKEditor富文本显示转义标签如何解决

问题根因 #

• 当前使用的Handlebars模板引擎，默认双大括号{{ }}插值语法会自动对内容做HTML特殊字符转义，从安全层面避免恶意脚本注入。这一机制会让CKEditor存储的带格式的富文本被识别为纯文本，标签本身不会被浏览器解析为排版节点，最终出现HTML标签直接作为文本展示的异常效果。

调整实现步骤 #

• 将富文本字段的双大括号插值替换为三括号语法{{{ }}}，显式告知模板引擎跳过对这段内容的转义流程，让浏览器可以直接解析内容中的HTML标签，实现预期的排版效果。

调整后的渲染代码：

{{#each about}}
    <div class="theme-title-one">
        <h2>{{this.title}}</h2>
        <p>{{{this.description}}}</p>
    </div>
{{/each}}

补充说明：原代码中包裹description的<p>标签存在开闭合错误，第二个开标签应修正为</p>，避免引发后续布局错乱。

配套防护要求 #

• 三括号语法会跳过所有转义逻辑，直接将内容作为HTML渲染到页面，必须提前做好XSS安全防护：
  • 开启CKEditor自带的高级内容过滤（ACF）功能，配置允许展示的合法标签白名单
  • 后端在富文本内容的入库、出库环节做二次标签过滤，移除<script>标签、内联事件绑定、恶意自定义属性等危险内容，避免出现存储型XSS漏洞。

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