如何用EJS渲染MongoDB中存储的Summernote HTML内容？

这问题我碰到过好多次，核心原因其实很直白：EJS默认会自动转义HTML内容，所以你用<%= %>输出时，<h1>这类标签会被转成<h1>，自然没法被浏览器正常解析渲染。下面给你几个可行的解决办法，按优先级排序：

方法一：用EJS的非转义输出标签（最推荐） #

直接把EJS模板里的<%= %>换成<%- %>标签就行——这个标签会跳过转义步骤，直接输出原始HTML内容。

假设你从MongoDB取出的Summernote内容存在article.content变量里，模板里这么写：

<div class="summernote-display">
  <%- article.content %>
</div>

页面渲染时，HTML标签就会被浏览器正确识别并展示格式了。

方法二：前端JS手动解码转义内容（备选） #

如果因为某些限制没法修改后端EJS模板，只能在前端处理的话，可以写个简单的解码函数，把转义后的实体字符转回原始HTML。

先给容器加个ID：

<div id="summernote-target">
  <%= article.content %>
</div>

然后用JS解码并重新渲染：

// 解码HTML实体的工具函数
function decodeHtmlEntities(str) {
  const textarea = document.createElement('textarea');
  textarea.innerHTML = str;
  return textarea.value;
}

// 拿到转义后的内容，解码后插入容器
const escapedContent = document.getElementById('summernote-target').textContent;
document.getElementById('summernote-target').innerHTML = decodeHtmlEntities(escapedContent);

不过这种方法多了一层前端处理，效率不如方法一，而且复杂实体可能有解码遗漏，所以优先用方法一。

重要提醒：XSS安全风险 #

不管用哪种方法，都要注意XSS攻击风险——如果Summernote的内容是用户提交的，直接输出原始HTML可能会被注入恶意脚本。建议在后端存数据或输出前，用XSS过滤库（比如sanitize-html）处理一下，只保留安全的HTML标签和属性：

比如Node.js后端处理示例：

const sanitizeHtml = require('sanitize-html');

// 过滤不安全的HTML内容
const safeContent = sanitizeHtml(rawContent, {
  allowedTags: ['h1', 'h2', 'p', 'b', 'i', 'u', 'em', 'strong', 'a'],
  allowedAttributes: {
    'a': ['href', 'target'],
    'b': ['style']
  }
});

// 将safeContent传给EJS模板使用

这样既能正常渲染Summernote的格式，又能保证页面安全。

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