在使用ejs模板引擎渲染由ckeditor等富文本编辑器生成的html内容时，常遇到内容显示为原始html字符串而非渲染后样式的问题。本文将详细解释ejs默认的html转义机制，并提供正确的解决方案，即使用``语法进行内容输出，同时强调在处理用户生成html时必须注意的安全风险及相应的防范措施，确保页面功能与安全性兼顾。
理解EJS的HTML转义机制
当我们在Node.js和Express.js环境中构建Web应用，并使用EJS作为视图引擎时，经常会集成CKEditor这样的富文本编辑器来允许用户输入格式化的内容。CKEditor的输出是标准的HTML标记，例如<p><strong>Lorem ipsum</strong></p>。
EJS模板引擎为了防止跨站脚本攻击（XSS），默认会对通过<%= variable %>语法输出的内容进行HTML实体转义。这意味着，如果content变量包含<p>Hello</p>，EJS会将其转换为
Hello
。浏览器接收到这些转义后的字符时，会将其识别为纯文本，因此在页面上看到的是原始的HTML标签字符串，而不是被浏览器渲染后的粗体、斜体等效果。例如，如果您的EJS模板中包含：
<!-- 错误示例：内容将被转义为原始HTML字符串 -->
<div class="post-content">
<%= content %>
</div>当content变量的值是<p><strong>Lorem ipsum</strong> dolor sit amet.</p>时，页面上实际显示的效果会是：
立即学习“前端免费学习笔记（深入）”；
<p><strong>Lorem ipsum</strong> dolor sit amet.</p>
这显然不是我们期望的，我们希望看到的是加粗的“Lorem ipsum”以及其他格式化效果。
正确渲染CKEditor生成HTML内容的方法
为了让EJS将HTML内容作为实际的HTML标记进行渲染，而不是进行转义，我们需要使用EJS提供的另一种输出语法：<%- variable %>。
<% - %>（带连字符）语法指示EJS不要对内容进行HTML实体转义，而是将其作为原始HTML直接输出到页面。因此，对于CKEditor或其他富文本编辑器生成的HTML内容，应始终使用此语法。
以下是正确的EJS模板代码示例：
<!-- 正确示例：内容将作为HTML元素被浏览器渲染 -->
<div class="post-content">
<%- content %>
</div>通过将<%= content %>更改为<%- content %>，当content变量的值为<p><strong>Lorem ipsum</strong> dolor sit amet.</p>时，浏览器会正确解析并渲染这些HTML标签，从而在页面上呈现出带有加粗效果的文本：
Lorem ipsum dolor sit amet.
安全注意事项
尽管<%- content %>解决了HTML内容渲染的问题，但直接输出用户提供的HTML内容存在严重的安全风险，特别是跨站脚本攻击（XSS）。恶意用户可能会在他们的输入中注入恶意脚本，这些脚本在您的网站上执行时可能窃取用户信息、劫持会话或进行其他破坏。
因此，在服务器端处理用户提交的HTML内容时，强烈建议采取以下安全措施：
-
服务器端净化（Sanitization）：在将用户提交的HTML内容保存到数据库之前，务必对其进行净化。这意味着移除所有潜在的恶意标签和属性（如<script>标签、onerror属性等），只保留安全的HTML结构。
- Node.js库推荐：可以使用如xss、sanitize-html或dompurify（在Node.js环境中运行）等库在服务器端对HTML内容进行严格的净化。
-
示例（使用xss库）：
const xss = require('xss'); // ... app.post('/compose', (req, res) => { const rawPostBody = req.body.postBody; // 对用户提交的HTML内容进行净化 const sanitizedPostBody = xss(rawPostBody, { whiteList: { p: [], strong: [], em: [], i: [], b: [], u: [], // 允许的标签及其属性 a: ['href', 'title', 'target'], img: ['src', 'alt'], // ... 更多允许的标签和属性 }, stripIgnoreTag: true, // 过滤所有不合法的HTML标签 stripIgnoreTagBody: ['script'] // 过滤script标签及其内容 }); // 将净化后的内容保存到数据库 // ... });
- 内容安全策略（CSP）：通过设置HTTP响应头中的Content-Security-Policy，可以进一步限制浏览器加载和执行页面中的资源，从而降低XSS攻击的风险。例如，可以限制脚本只能从特定的源加载。
总结
在EJS模板中渲染由CKEditor等富文本编辑器生成的HTML内容时，核心在于正确使用EJS的输出语法。<%= variable %>用于安全地输出纯文本（HTML实体转义），而<%- variable %>则用于输出原始HTML内容。虽然<%- %>解决了显示问题，但务必牢记其带来的安全隐患，并通过服务器端净化等手段对用户输入进行严格处理，以确保应用程序的健壮性和安全性。遵循这些最佳实践，您将能够构建功能丰富且安全的Web应用。
