EJS渲染输出原始HTML代码未正常解析为页面的问题排查
问题根因
页面直接展示HTML源码的核心原因是EJS模板引入局部文件时使用了错误的输出语法:
- 你当前引入局部模板的写法为
<%= include ("./partials/messages") %>,其中<%= %>是EJS的转义输出标签,会自动将输出内容中的<、>、"等HTML特殊字符转义为对应的字符实体(比如把<div>转成<div>),浏览器会将转义后的内容识别为普通文本而非DOM节点,因此直接展示源码。 - EJS引入局部模板的正确语法是使用**非转义输出标签
<%- %>**包裹include语句,该标签不会对输出内容做转义处理,会将局部模板渲染出的HTML片段原样插入到页面中,浏览器才能正常解析为Bootstrap警告组件。
修复方案
将register.ejs中引入局部模板的代码替换为以下写法即可:
<%- include("./partials/messages") %>
EJS输出标签区别说明:
<%= variable %>:转义输出,适合渲染用户提交的普通文本内容,可防范XSS注入风险<%- variable %>:非转义原样输出,仅适合渲染开发者可控的可信HTML内容(比如自定义的局部模板、固定组件代码)
异常效果参考

内容的提问来源于stack exchange,提问作者aquile hollins
相关产品推荐
相关产品推荐

