在使用ejs模板引擎渲染由ckeditor等富文本编辑器生成的html内容时，常遇到内容显示为原始html字符串而非渲染后样式的问题。本文将详细解释ejs默认的html转义机制，并提供正确的解决方案，即使用“语法进行内容输出，同时强调在处理用户生成html时必须注意的安全风险及相应的防范措施，确保页面功能与安全性兼顾。
理解EJS的HTML转义机制
当我们在Node.js和Express.js环境中构建Web应用，并使用EJS作为视图引擎时，经常会集成CKEditor这样的富文本编辑器来允许用户输入格式化的内容。CKEditor的输出是标准的HTML标记，例如
Lorem ipsum
。
EJS模板引擎为了防止跨站脚本攻击（XSS），默认会对通过语法输出的内容进行HTML实体转义。这意味着，如果content变量包含
Hello
，EJS会将其转换为
Hello
。浏览器接收到这些转义后的字符时，会将其识别为纯文本，因此在页面上看到的是原始的HTML标签字符串，而不是被浏览器渲染后的粗体、斜体等效果。
例如，如果您的EJS模板中包含：
当content变量的值是
Lorem ipsum dolor sit amet.
立即学习“前端免费学习笔记（深入）”；
时，页面上实际显示的效果会是：
Lorem ipsum dolor sit amet.
这显然不是我们期望的，我们希望看到的是加粗的“Lorem ipsum”以及其他格式化效果。
正确渲染CKEditor生成HTML内容的方法
为了让EJS将HTML内容作为实际的HTML标记进行渲染，而不是进行转义，我们需要使用EJS提供的另一种输出语法：。
（带连字符）语法指示EJS不要对内容进行HTML实体转义，而是将其作为原始HTML直接输出到页面。因此，对于CKEditor或其他富文本编辑器生成的HTML内容，应始终使用此语法。
以下是正确的EJS模板代码示例：
通过将更改为，当content变量的值为
Lorem ipsum dolor sit amet.
时，浏览器会正确解析并渲染这些HTML标签，从而在页面上呈现出带有加粗效果的文本：
Lorem ipsum dolor sit amet.
安全注意事项
尽管解决了HTML内容渲染的问题，但直接输出用户提供的HTML内容存在严重的安全风险，特别是跨站脚本攻击（XSS）。恶意用户可能会在他们的输入中注入恶意脚本，这些脚本在您的网站上执行时可能窃取用户信息、劫持会话或进行其他破坏。
因此，在服务器端处理用户提交的HTML内容时，强烈建议采取以下安全措施：
服务器端净化（Sanitization）：在将用户提交的HTML内容保存到数据库之前，务必对其进行净化。这意味着移除所有潜在的恶意标签和属性（如标签、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的输出语法。用于安全地输出纯文本（HTML实体转义），而则用于输出原始HTML内容。虽然解决了显示问题，但务必牢记其带来的安全隐患，并通过服务器端净化等手段对用户输入进行严格处理，以确保应用程序的健壮性和安全性。遵循这些最佳实践，您将能够构建功能丰富且安全的Web应用。
以上就是EJS中渲染CKEditor生成HTML内容的正确方法及注意事项的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1591281.html
微信扫一扫 
支付宝扫一扫 
