当在node.js express应用中使用ejs作为视图引擎并集成ckeditor生成富文本内容时，一个常见问题是ejs的默认`<%= %>`语法会转义html标签，导致页面显示原始html代码而非渲染后的内容。本教程将详细阐述如何利用ejs的非转义输出语法`<%- %>`来正确渲染ckeditor生成的html内容，确保所有格式和样式都能按预期呈现。
理解问题：CKEditor与EJS的HTML渲染挑战
在使用富文本编辑器如CKEditor时，用户输入的内容会被转换为包含各种HTML标签（如<p>, <strong>, <em>等）的字符串。例如，用户输入“Lorem ipsum dolor sit amet”，CKEditor会将其转换为<p><strong>Lorem ipsum</strong> dolor sit amet</p>。
在基于Node.js和Express框架构建的网站中，如果选择EJS作为视图引擎来渲染这些HTML字符串，开发者可能会遇到一个普遍的问题：EJS的默认输出机制会将这些HTML标签作为普通文本进行转义。这意味着，当页面加载时，用户看到的是带有尖括号的原始HTML代码，而不是经过浏览器解析和渲染的富文本内容。
例如，期望的输出是： Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae maxime dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?
但实际输出却是： <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit.<i> Quae maxime</i> dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?</p>
这种现象的根本原因在于EJS为了安全考虑，默认对通过<%= %>输出的所有内容进行HTML实体转义，以防止跨站脚本攻击（XSS）。
EJS的输出语法：转义与非转义
EJS提供了两种主要的输出标签，用于控制内容是否被转义：
立即学习“前端免费学习笔记（深入）”；
<%= variable %> (带转义的输出) 这是EJS的默认行为。它会将variable中的所有HTML特殊字符（如<, >, &, ", '）转换为对应的HTML实体（如, &）。这种机制旨在提高安全性，防止恶意用户通过注入HTML或JavaScript代码来攻击网站。
<%- variable %> (不带转义的原始输出) 这个标签告诉EJS直接输出variable的原始值，不进行任何HTML实体转义。当确定内容是安全且需要作为HTML结构进行渲染时，应使用此标签。例如，当从CKEditor接收到的内容就是预期要渲染的HTML时，就需要使用<%- %>。
问题复现与解决方案
为了更清晰地说明，我们来看一个典型的场景，包括客户端的CKEditor集成、服务端的数据处理以及视图层的渲染。
客户端（CKEditor集成）
在前端页面中，通常会有一个表单，其中包含一个textarea元素，并由CKEditor进行初始化。
<form action="/compose" method="post">
<div class="form-group">
<label>文章内容</label>
<textarea name="postBody" id="editor">在这里开始写作。</textarea>
</div>
<button type="submit" class="btn btn-primary">发布</button>
</form>
<script src="https://cdn.ckeditor.com/ckeditor5/41.2.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
console.log('CKEditor initialized', editor);
})
.catch(error => {
console.error('CKEditor initialization failed:', error);
});
</script>当用户在CKEditor中输入内容并提交表单时，postBody字段将包含由CKEditor生成的HTML字符串。
服务端（Node.js Express）
在Express应用中，服务端会接收到这个HTML字符串，并将其存储或直接传递给EJS模板进行渲染。
// 假设这是Express路由文件中的一部分
const express = require('express');
const router = express.Router();
router.post('/compose', (req, res) => {
const postContent = req.body.postBody; // 获取CKEditor提交的HTML内容
// 在这里通常会将postContent保存到数据库
// ...
// 然后，将内容传递给一个展示页面
res.render('postPage', { content: postContent });
});
router.get('/post/:id', (req, res) => {
// 假设从数据库获取了文章内容
const fetchedContent = "<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit.<i> Quae maxime</i> dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?</p>"; // 示例数据
res.render('postPage', { content: fetchedContent });
});
module.exports = router;视图层（EJS模板）
现在，关键在于EJS模板如何渲染这个content变量。
错误示例：使用<%= content %>
如果使用默认的转义输出，页面将显示原始HTML标签：
<!-- postPage.ejs -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文章详情</title>
</head>
<body>
<h1>我的文章</h1>
<div>
<%= content %>
</div>
</body>
</html>渲染结果：
<div>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit.<i> Quae maxime</i> dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2143" title="ImgGood"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680175245875.png" alt="ImgGood" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2143" title="ImgGood">ImgGood</a>
<p>免费在线AI照片编辑器</p>
</div>
<a href="/ai/2143" title="ImgGood" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>浏览器会直接显示这些转义后的字符，而不是渲染它们。
正确示例：使用<%- content %>
要正确渲染CKEditor生成的HTML内容，必须使用非转义输出标签：
<!-- postPage.ejs -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文章详情</title>
</head>
<body>
<h1>我的文章</h1>
<div>
<%- content %>
</div>
</body>
</html>渲染结果：
<div>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit.<i> Quae maxime</i> dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?</p>
</div>此时，浏览器会正确解析并显示加粗、斜体等格式，达到预期的富文本效果。
注意事项与安全考量
虽然<%- %>解决了HTML渲染问题，但使用它时务必谨慎，因为它直接输出了原始HTML，这引入了潜在的安全风险，特别是跨站脚本攻击（XSS）。
XSS风险： 如果content变量来自不受信任的用户输入，恶意用户可能会注入<script>标签或其他HTML代码，从而在其他用户浏览器中执行恶意脚本。
内容来源信任度： 在本教程的场景中，CKEditor内容通常由博客作者或管理员撰写，他们是网站的“信任”用户。在这种情况下，使用<%- %>的风险相对较低，因为内容是受控的。
-
HTML净化： 即使内容来自“信任”用户，或者在任何可能接收用户生成HTML的场景中，强烈建议在将HTML内容保存到数据库之前或渲染到页面之前，对其进行HTML净化（Sanitization）。HTML净化库（如DOMPurify）可以帮助移除潜在的恶意标签和属性，只保留安全的HTML结构。
例如，在服务端可以这样处理：
const DOMPurify = require('dompurify')(require('jsdom').JSDOM); // 需要jsdom环境 router.post('/compose', (req, res) => { const rawContent = req.body.postBody; const cleanContent = DOMPurify.sanitize(rawContent); // 净化HTML res.render('postPage', { content: cleanContent }); });通过净化，可以确保即使使用<%- %>，输出的HTML也是安全的。
总结
在Node.js Express应用中使用EJS渲染CKEditor生成的HTML内容时，核心解决方案是理解EJS的两种输出语法：<%= %>用于带转义的安全输出，而<%- %>用于不带转义的原始HTML输出。为了正确显示富文本内容，应将EJS模板中的<%= content %>替换为<%- content %>。同时，务必牢记使用原始HTML输出可能带来的XSS安全风险，并根据内容来源的信任度，考虑实施HTML净化措施以增强应用的安全性。
