Nodejs ejs 页面直接显示 html 标签问题

Nodejs ejs 页面直接显示 html 标签问题

发现问题了有个页面是这样写的 <%= post.post %>

2 回复

Nodejs ejs 页面直接显示 HTML 标签问题

在使用 EJS（Embedded JavaScript）模板引擎时，如果你希望页面直接显示 HTML 标签而不是将其作为纯文本处理，你需要使用 <%- 语法而不是 <%=。EJS 默认会自动转义 HTML 内容以防止 XSS（跨站脚本攻击），但有时你可能需要显示原始的 HTML。

示例代码

假设你有一个简单的 Express 应用，并且你在数据库中存储了一些 HTML 内容，例如：

// app.js
const express = require('express');
const ejs = require('ejs');
const app = express();

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const post = {
        post: '<h1>Hello World</h1>'
    };
    res.render('index', { post });
});

app.listen(3000, () => console.log('Server is running on port 3000'));

在这个例子中，我们定义了一个简单的 Express 应用，并在根路由 / 上渲染一个 EJS 模板。post 对象包含一个带有 HTML 标签的字符串。

接下来，我们在 views/index.ejs 文件中编写模板代码：

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJS Example</title>
</head>
<body>
    <!-- 使用 <%- %> 显示原始 HTML -->
    <%- post.post %>
    
    <!-- 如果使用 <%= %>，则会将 HTML 转义为纯文本 -->
    <!-- <%= post.post %> -->
</body>
</html>

解释

  • <%-：这会告诉 EJS 直接输出原始 HTML，而不进行任何转义。
  • <%=：这是默认的 EJS 语法，它会将输出内容进行 HTML 转义，以防止 XSS 攻击。

如果你希望用户输入的内容能够正确地显示为 HTML，可以使用 <%-。但是，请务必确保这些内容是可信的，以避免潜在的安全风险。

通过这种方式，你可以根据需要选择合适的语法来显示 HTML 或纯文本。


在使用 EJS 模板引擎时，默认情况下 <%= ... %> 会自动转义 HTML 内容以防止 XSS 攻击。如果你希望直接显示 HTML 标签而不是将其转义为文本，可以使用 <%- ... %> 语法来实现。

示例代码

假设你有一个包含 HTML 的字符串，并且你想在 EJS 页面中直接显示这些 HTML 标签。

后端代码 (Node.js)

const express = require('express');
const app = express();
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    const post = {
        post: '<h1>Hello World</h1>'
    };
    res.render('index', { post });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

前端模板 (EJS)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EJS Example</title>
</head>
<body>
    <%- post.post %>
</body>
</html>

解释

  • <%= post.post %> 会将 post.post 中的内容作为文本输出，例如 <h1>Hello World</h1> 会被显示为 <h1>Hello World</h1>。
  • <%- post.post %> 会将 post.post 中的内容作为 HTML 输出，因此 <h1>Hello World</h1> 将被解析并显示为一个实际的 HTML 标签，即 “Hello World” 会以标题的形式显示。

注意：使用 <%- ... %> 时要确保输入内容是安全的，避免 XSS 攻击。

回到顶部