本文详细介绍了在使用EJS模板引擎渲染CKEditor生成的富文本内容时，如何避免HTML标签被转义而显示为纯文本的问题。通过对比EJS的两种输出标签`

在使用富文本编辑器（如CKEditor）创建内容时，我们通常期望最终在网页上看到的是经过格式化的文本，而不是带有HTML标签的原始字符串。然而，当将这些HTML内容传递给视图引擎（如EJS）进行渲染时，如果不了解视图引擎的默认行为，可能会遇到HTML标签被转义（escaped）的问题，导致页面上直接显示

Lorem ipsum...

问题根源：EJS的默认HTML转义行为

EJS（Embedded JavaScript）作为一种流行的模板引擎，其设计哲学之一是默认情况下提供安全的输出。这意味着，当你使用标准的语法来输出变量内容时，EJS会自动对内容中的HTML特殊字符进行转义。例如，会被转义为youjiankuohaophpcn，&会被转义为&等。这种机制有效地防止了跨站脚本攻击（XSS），因为恶意脚本不会被浏览器解析执行。

然而，对于从CKEditor等富文本编辑器中获取的、本身就包含合法HTML标签的内容，这种默认的转义行为就成了障碍。编辑器生成的HTML字符串，例如：

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae maxime dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?

在使用输出后，在浏览器中会变成：

zuojiankuohaophpcnpyoujiankuohaophpcnzuojiankuohaophpcnstrongyoujiankuohaophpcnLorem ipsumzuojiankuohaophpcn/strongyoujiankuohaophpcn dolor sit amet, consectetur adipisicing elit.zuojiankuohaophpcniyoujiankuohaophpcn Quae maximezuojiankuohaophpcn/iyoujiankuohaophpcn dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?zuojiankuohaophpcn/pyoujiankuohaophpcn

浏览器将这些转义后的字符视为普通文本，因此页面上会直接显示带有尖括号的原始HTML标签。

解决方案：使用EJS的非转义输出标签

EJS提供了一个专门用于输出未转义HTML内容的标签：。这个标签告诉EJS，将变量内容作为原始HTML直接插入到模板中，而无需进行任何转义处理。

因此，要正确渲染CKEditor生成的富文本内容，只需将EJS模板中的输出语法从更改为。

示例代码：

假设你的Node.js/Express应用在路由中将CKEditor提交的内容存储在postBody变量中，并将其传递给EJS模板：

易通企业网站系统(cmseasy)4.5 build 20120315 UTF-8 For PHP5.3

易通企业网站系统也称易通企业网站程序，是易通公司开发中国首套免费提供企业网站模板的营销型企业网站管理系统，系统前台生成html、完全符合SEO、同时有在线客服、潜在客户跟踪、便捷企业网站模板制作、搜索引擎推广等功能的企业网站系统。 易通企业网站系统(cmseasy) v4.5 UTF-8 For PHP5.3更新内容[修正] 内容链接重叠和权重问题[修正] tag添加问题[新增] 财付通担保交易接

下载

// app.js (或相关路由文件)
app.get('/post/:id', (req, res) => {
    // 假设从数据库或其他地方获取到包含HTML的postContent
    const postContent = "
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae maxime dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?
";
    res.render('post', { content: postContent });
});

在你的EJS模板文件（例如post.ejs）中，正确的写法应该是：

    
    
    
    


    

        
文章标题
        

            <%- content %>
        
    

使用后，浏览器会正确解析并渲染postContent中的HTML标签，呈现出带有粗体、斜体等格式的富文本内容。

注意事项与安全考量

虽然解决了富文本内容的渲染问题，但使用它时必须格外小心，尤其当内容来源于用户输入时。直接输出未经处理的用户输入HTML，会带来严重的安全风险，主要是跨站脚本攻击（XSS）。

恶意用户可能会在CKEditor中输入包含JavaScript代码的HTML，例如：

@@##@@

如果这些内容被直接用输出到页面，浏览器会执行这些恶意脚本，可能导致：

• 窃取用户Cookie和会话信息。
• 篡改网页内容。
• 重定向用户到恶意网站。

安全最佳实践：

1. 内容消毒（Sanitization）： 在将用户提交的HTML内容保存到数据库之前，或在将其传递给EJS模板之前，务必进行严格的消毒处理。这意味着你需要使用一个可靠的HTML消毒库（例如dompurify for Node.js）来移除或过滤掉所有潜在的恶意标签和属性，只保留安全的HTML结构和样式。

   const createDOMPurify = require('dompurify');
   const { JSDOM } = require('jsdom');
   
   const window = new JSDOM('').window;
   const DOMPurify = createDOMPurify(window);
   
   // 在保存到数据库或渲染前
   const cleanHTML = DOMPurify.sanitize(userSubmittedHTML);
   // 然后将 cleanHTML 传递给 EJS 模板
   res.render('post', { content: cleanHTML });

2. 权限控制： 仅允许受信任的用户（例如管理员）发布未经严格消毒的富文本内容。对于普通用户，即使使用CKEditor，也应该对其输入进行严格的消毒。

总结

在EJS模板中渲染CKEditor等富文本编辑器生成的HTML内容时，关键在于理解EJS的两种输出标签：

• ：默认行为，对内容进行HTML转义，适用于显示纯文本或防止XSS攻击。
• ：非转义输出，将内容作为原始HTML直接插入，适用于渲染已确认安全的富文本内容。

为了确保安全，当内容来源于用户输入时，务必在输出前对HTML内容进行严格的消毒处理，以防范潜在的XSS攻击。正确选择和使用EJS的输出标签，是构建功能完善且安全的Web应用的关键一步。