
本文旨在解决在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):
<!-- 使用 来渲染CKEditor生成的HTML -->返回首页
重要注意事项与安全考量
虽然使用可以解决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
微信扫一扫
支付宝扫一扫