Nodejs 前台页面如何显示超链接

Nodejs 前台页面如何显示超链接

我在后台传入一个参数testres.render(‘index.ejs’,{title:“首页”,messages:messages,users:users,subjects:subjects,test:"<a>test</a>"});，前台页面会将尖括号转义为&lt;和&gt;求解，我想输出一个超链

4 回复

Node.js 前台页面如何显示超链接

在使用 EJS 模板引擎时，默认情况下会对插入的内容进行 HTML 转义以防止 XSS（跨站脚本攻击）。因此，当你尝试直接在模板中插入一个包含 HTML 的字符串时，它会被转义成 < 和 >。

为了在 EJS 模板中正确地渲染 HTML 超链接，你可以使用 EJS 的 <%- %> 语法，这会告诉 EJS 不要对插入的字符串进行转义。下面是具体的步骤和示例代码。

示例代码

  1. 后端代码：

    在你的 Node.js 后端代码中，传递数据给前端模板时，确保你已经正确设置了模板引擎，并且将数据传递到模板中。

    const express = require('express');
const app = express();
const ejs = require('ejs');

// 设置模板引擎
app.set('view engine', 'ejs');

// 处理路由
app.get('/', (req, res) => {
    const messages = ["Hello", "World"];
    const users = ["Alice", "Bob"];
    const subjects = ["Math", "Science"];

    // 渲染模板并传递数据
    res.render('index.ejs', {
        title: "首页",
        messages: messages,
        users: users,
        subjects: subjects,
        test: "<a href='https://example.com'>测试链接</a>"
    });
});

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

  2. 前端代码：

    在 EJS 模板文件 index.ejs 中，使用 <%- %> 语法来插入未转义的 HTML。

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

    <!-- 使用 <%- %> 语法插入未转义的 HTML -->
    <div><%- test %></div>

    <!-- 其他内容 -->
    <ul>
        <% for (let message of messages) { %>
            <li><%= message %></li>
        <% } %>
    </ul>
</body>
</html>

解释

  • 后端代码：我们通过 res.render 方法将数据传递给 index.ejs 模板。这里传递了一个名为 test 的变量，其值是一个包含 HTML 的字符串。

  • 前端代码：在 EJS 模板中，我们使用 <%- %> 语法来插入未转义的 HTML 字符串。这样，<a> 标签不会被转义，而是作为实际的 HTML 超链接显示在页面上。

通过这种方式，你可以在 Node.js 的 EJS 模板中正确地显示超链接。


你肯定是没把<%- %><%=%>作用搞清楚

嗯，可否指点一下

要在Node.js的前端页面（例如EJS模板）中正确地显示超链接，你需要确保HTML标签不会被自动转义。在EJS模板引擎中，默认情况下，变量内容会被转义以防止XSS攻击。你可以使用<%- 语法来告诉EJS不要转义特定的变量内容。

以下是一个简单的示例：

示例代码

假设你有一个EJS文件index.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>

    <!-- 使用 <%- 来渲染不转义的内容 -->
    <div>
        <%= test %>
    </div>
    
    <!-- 或者直接在JavaScript代码中插入HTML -->
    <div>
        <%- test %>
    </div>
</body>
</html>

后端代码

在你的Node.js后端代码中，确保传递给EJS的数据是正确的：

app.get('/', (req, res) => {
    const messages = [];
    const users = [];
    const subjects = [];
    const test = '<a href="https://example.com">Test Link</a>';

    res.render('index.ejs', { 
        title: "首页", 
        messages: messages, 
        users: users, 
        subjects: subjects,
        test: test 
    });
});

解释

  • <%= test %>: 这里的内容会被转义，因此如果test包含HTML标签，它们会被转义成文本。
  • <%- test %>: 这里的内容不会被转义，因此可以正确显示HTML标签，如超链接。

这样，当用户访问页面时，<a>标签会被正确解析并显示为超链接。

如果你使用的是其他模板引擎（如Pug），方法类似，只需找到相应的方法来禁用自动转义即可。

回到顶部