EJS中渲染CKEditor生成HTML内容的正确方法及注意事项-html教程-PHP中文网

EJS中渲染CKEditor生成HTML内容的正确方法及注意事项

聖光之護

发布： 2025-11-02 12:40:01

原创

856人浏览过

EJS中渲染CKEditor生成HTML内容的正确方法及注意事项

在使用ejs模板引擎渲染由ckeditor等富文本编辑器生成的html内容时，常遇到内容显示为原始html字符串而非渲染后样式的问题。本文将详细解释ejs默认的html转义机制，并提供正确的解决方案，即使用``语法进行内容输出，同时强调在处理用户生成html时必须注意的安全风险及相应的防范措施，确保页面功能与安全性兼顾。

理解EJS的HTML转义机制

当我们在Node.js和Express.js环境中构建Web应用，并使用EJS作为视图引擎时，经常会集成CKEditor这样的富文本编辑器来允许用户输入格式化的内容。CKEditor的输出是标准的HTML标记，例如Lorem ipsum。

EJS模板引擎为了防止跨站脚本攻击（XSS），默认会对通过<%= variable %>语法输出的内容进行HTML实体转义。这意味着，如果content变量包含Hello，EJS会将其转换为

Hello

。浏览器接收到这些转义后的字符时，会将其识别为纯文本，因此在页面上看到的是原始的HTML标签字符串，而不是被浏览器渲染后的粗体、斜体等效果。

例如，如果您的EJS模板中包含：

<!-- 错误示例：内容将被转义为原始HTML字符串 -->
<div class="post-content">
    <%= content %>
</div>

登录后复制

当content变量的值是Lorem ipsum dolor sit amet.时，页面上实际显示的效果会是：

立即学习“前端免费学习笔记（深入）”；

<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变量的值为Lorem ipsum dolor sit amet.时，浏览器会正确解析并渲染这些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应用。

以上就是EJS中渲染CKEditor生成HTML内容的正确方法及注意事项的详细内容，更多请关注php中文网其它相关文章！