本文旨在解决在EJS模板中显示由CKEditor等富文本编辑器生成的HTML内容时，内容被默认转义为纯文本的问题。通过详细阐述EJS的HTML转义机制，并提供正确的解决方案——使用“而非“，确保富文本内容能以预期的格式渲染。同时，文章强调了在处理用户生成HTML内容时的安全考量，特别是跨站脚本攻击（XSS）的防范措施。
在现代Web应用开发中，富文本编辑器（如CKEditor）是创建博客、新闻或内容管理系统不可或缺的工具。它们允许用户以所见即所得的方式编辑内容，生成包含各种HTML标签（如、、
等）的字符串。然而，当我们将这些HTML字符串存储到数据库并在Node.js/Express应用中使用EJS作为视图引擎进行渲染时，常常会遇到一个问题：内容以原始HTML字符串的形式显示，而不是浏览器解析后的样式。本教程将深入探讨这一问题的原因，并提供一个简洁而安全的解决方案。
理解EJS中的HTML转义机制
EJS（Embedded JavaScript）是一个流行的模板引擎，它默认会对输出的内容进行HTML转义。这意味着，当你在EJS模板中使用语法来显示一个字符串时，所有潜在的HTML特殊字符（如、&、”、’）都会被转换成对应的HTML实体（如、&、”、’）。
这种默认行为是出于安全考虑，主要是为了防止跨站脚本攻击（XSS）。如果用户在富文本编辑器中输入了恶意脚本（例如alert(‘XSS!’);），并且这些脚本未经转义直接渲染到页面上，那么访问该页面的用户就会执行这些恶意代码。通过转义，这些脚本会被当作普通文本显示，从而避免了攻击。
立即学习“前端免费学习笔记（深入）”；
问题示例：
假设你有一个Node.js/Express应用，使用CKEditor收集用户输入的博客内容，并将其存储为HTML字符串。在EJS模板中，你可能这样尝试显示它：
文章详情
如果content变量包含以下HTML字符串：
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae maxime dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?
那么在浏览器中，你看到的结果将是：
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae maxime dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?
这显然不是我们想要的效果，因为HTML标签被当作普通文本显示，而不是被浏览器解析并应用样式。
解决方案：使用不转义的输出
EJS提供了一种特殊的语法来指示模板引擎不要对内容进行HTML转义，直接将其作为原始HTML渲染。这个语法就是。
正确的使用方式：
将你的EJS模板中的内容输出语句从修改为：
文章详情
通过这个简单的修改，当content变量包含HTML字符串时，EJS将不再对其进行转义，而是将其直接插入到HTML文档中。浏览器会解析这些HTML标签，并按照预期应用样式和结构。
预期输出效果：
Supermoon
The AI-Powered Inbox for Growing Teams
126 查看详情
Lorem ipsum dolor sit amet, consectetur adipisicing elit.Quae maxime dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?
完整示例代码
为了更好地理解，我们提供一个包含CKEditor表单提交和EJS渲染的简化Node.js/Express应用示例。
1. Express应用 (app.js):
const express = require('express');const bodyParser = require('body-parser');const ejs = require('ejs');const app = express();const port = 3000;app.set('view engine', 'ejs');app.use(bodyParser.urlencoded({ extended: true }));app.use(express.static('public')); // 假设你的CKEditor和CSS文件在public目录下// 存储文章内容的简单模拟let posts = [];// 首页 - 显示所有文章app.get('/', (req, res) => { res.render('index', { posts: posts });});// 发布新文章的表单页面app.get('/compose', (req, res) => { res.render('compose');});// 处理新文章提交app.post('/compose', (req, res) => { const newPost = { title: req.body.postTitle, content: req.body.postBody // CKEditor生成的HTML内容 }; posts.push(newPost); res.redirect('/');});// 查看单篇文章页面app.get('/posts/:id', (req, res) => { const postId = req.params.id; if (postId { console.log(`Server started on port ${port}`);});
2. CKEditor表单页面 (views/compose.ejs):
撰写新文章 ClassicEditor .create(document.querySelector('#editor')) .then(editor => { console.log(editor); }) .catch(error => { console.error(error); });撰写新文章
3. 文章详情页面 (views/post.ejs):
重要注意事项与安全考量
虽然使用可以解决HTML渲染问题，但这是一个潜在的安全风险点，尤其是在处理用户生成的内容时。
1. 跨站脚本攻击 (XSS) 风险：如果你的应用允许用户提交任意HTML内容，并且你直接使用进行渲染，那么恶意用户就可以注入XSS攻击代码。例如，用户可以输入：
我的文章
alert('您被攻击了！');
如果这段内容未经处理直接渲染，那么访问该页面的其他用户就会看到一个弹窗，甚至更严重的攻击（如窃取Cookie、重定向到恶意网站等）。
2. 内容净化 (HTML Sanitization)：为了安全地显示用户生成的HTML内容，强烈建议在服务器端对内容进行净化（Sanitization）。净化是指移除HTML字符串中所有不安全或不必要的标签和属性，只保留安全的、允许的HTML结构。
常用的HTML净化库包括：
DOMPurify (Node.js版本): 一个非常强大和安全的HTML净化库，可以在服务器端使用。js-xss: 另一个流行的HTML净化库，提供了高度可配置的白名单机制。
净化流程建议：
用户通过CKEditor提交内容。在Express路由中接收到req.body.postBody后，不要直接存储。使用HTML净化库对req.body.postBody进行处理，移除所有潜在的恶意内容。将净化后的HTML内容存储到数据库。从数据库读取内容后，在EJS模板中使用进行渲染。此时，由于内容已经过净化，可以相对安全地直接渲染。
示例（使用DOMPurify）：
首先安装DOMPurify：
npm install dompurify jsdom
然后在Express路由中：
const express = require('express');const bodyParser = require('body-parser');const ejs = require('ejs');const { JSDOM } = require('jsdom'); // 用于DOMPurify的JSDOM环境const createDOMPurify = require('dompurify');const window = new JSDOM('').window;const DOMPurify = createDOMPurify(window);// ... 其他代码 ...app.post('/compose', (req, res) => { const rawContent = req.body.postBody; // 净化HTML内容 const cleanContent = DOMPurify.sanitize(rawContent, { USE_PROFILES: { html: true } // 允许标准的HTML标签 // 可以根据需求配置允许的标签和属性 }); const newPost = { title: req.body.postTitle, content: cleanContent // 存储净化后的HTML内容 }; posts.push(newPost); res.redirect('/');});// ... 其他代码 ...
总结
在EJS模板中显示由CKEditor等富文本编辑器生成的HTML内容时，核心在于理解EJS的HTML转义机制。使用语法可以确保HTML内容被正确解析和渲染。然而，为了构建一个安全可靠的Web应用，务必在服务器端对用户生成的所有HTML内容进行严格的净化处理，以防范潜在的XSS攻击。遵循“输入验证，输出净化”的原则，将有效提升应用的安全性。
以上就是在EJS中正确渲染CKEditor生成的HTML内容的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/914766.html
微信扫一扫 
支付宝扫一扫 
