Nodejs express，jade可否指定显示时转义的HTML标签

Nodejs express，jade可否指定显示时转义的HTML标签

输出一段内容，内有标签，有几个标签想直接输出的，其它的都转义，有什么简单方法吗，不想自己去处理标签，有类似白名单的最好，谢谢

3 回复

当然可以！在使用 Node.js 和 Express 框架结合 Jade（现在称为 Pug）模板引擎时，你可以通过一些配置来实现指定标签的转义或直接输出。Jade/Pug 提供了一些内置的方法来帮助你实现这一点。

示例代码

假设我们有一个简单的 Express 应用，并且希望在渲染页面时，某些标签直接输出而其他标签被转义。

  1. 安装依赖

    如果你还没有安装 express 和 pug，可以通过以下命令安装：

    npm install express pug

  2. 创建一个简单的 Express 应用

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

// 设置视图引擎为 Pug
app.set('view engine', 'pug');

// 定义路由
app.get('/', (req, res) => {
    const data = {
        content: '<div>这是一段内容</div>',
        safeContent: '<a href="https://example.com">这是一个链接</a>'
    };
    res.render('index', { data });
});

app.listen(3000, () => {
    console.log('App is running on http://localhost:3000');
});

  3. 创建 Pug 模板文件

    在 views 文件夹中创建一个 index.pug 文件：

    doctype html
html
    head
        title Node.js Express with Pug
    body
        h1 示例
        p 不安全的内容: #{data.content}
        p 安全的内容: !{data.safeContent}

解释

  • #{variable}：这种语法会自动对变量进行 HTML 转义。
  • !{variable}：这种语法表示不进行转义，直接输出变量中的内容。

在这个例子中，data.content 中的内容会被自动转义，而 data.safeContent 中的内容则不会被转义，直接输出 <a href="https://example.com">这是一个链接</a>。

白名单机制

如果你需要更复杂的白名单机制，可以考虑在后端进行过滤处理。例如，在将数据传递给前端之前，先检查并确保只有允许的标签被输出。

const allowedTags = ['a', 'strong', 'em'];
const sanitizeHtml = require('sanitize-html');

app.get('/', (req, res) => {
    const content = '<div>这是一段内容</div>';
    const safeContent = '<a href="https://example.com">这是一个链接</a>';

    // 使用 sanitize-html 进行过滤
    const filteredContent = sanitizeHtml(content, { allowedTags });
    
    const data = {
        content: filteredContent,
        safeContent: safeContent
    };

    res.render('index', { data });
});

这里我们使用了 sanitize-html 库来过滤 HTML 内容，只允许特定的标签通过。

这样你就可以灵活地控制哪些标签应该被转义，哪些标签可以直接输出了。


- var me = "<b>jjjj</b>"
p #{me}

out:

<p>&lt;b&gt;jjjj&lt;/b&gt;</p>

推荐node.js高级课程 《Node.js web服务器开发实战》

传授开发web服务器框架经验，深入底层原理分析，而不只是使用框架。成为Node.js真正高手！

在使用 Node.js 的 Express 框架配合 Jade（现更名为 Pug）模板引擎时，如果你希望在渲染时对某些特定的 HTML 标签进行转义，而其他标签则直接输出，可以通过自定义过滤器或函数来实现。这里有一个简单的示例，展示如何通过 Pug 的自定义过滤器来实现这一需求。

示例代码

首先，确保你的项目中已经安装了 Express 和 Pug：

npm install express pug

然后，在你的 Express 应用中设置 Pug 并创建一个自定义过滤器：

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

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

// 自定义过滤器，用于转义 HTML
function escapeHtml(html) {
    return html.replace(/&/g, '&amp;')
               .replace(/</g, '&lt;')
               .replace(/>/g, '&gt;')
               .replace(/"/g, '&quot;')
               .replace(/'/g, '&#39;');
}

app.get('/', (req, res) => {
    const content = '<p>This is a <strong>test</strong> paragraph.</p>';
    res.render('index', { 
        safeContent: escapeHtml(content),
        directContent: '<strong>Strong tag should appear bold</strong>'
    });
});

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

在这个例子中，我们创建了一个 escapeHtml 函数来手动转义 HTML 字符串。然后在路由处理函数中，我们将内容传递给视图，同时提供一个经过转义的版本 (safeContent) 和一个未转义的版本 (directContent)。

接下来，我们在 Pug 模板中使用这两个变量：

// views/index.pug
doctype
html
  head
    title Safe HTML Rendering
  body
    div!= safeContent  // 使用 != 来不转义内容
    div= directContent  // 使用 = 来显示内容

在这个 Pug 模板文件中，!= 指令用于不转义变量中的内容，而 = 指令则会自动转义内容。

解释

  • escapeHtml 函数用于手动转义字符串中的 HTML 特殊字符。
  • 在路由处理中，我们为视图提供了两个版本的内容：一个转义过的 (safeContent) 和一个未转义的 (directContent)。
  • 在 Pug 模板中，我们通过不同的指令（=, !=）来控制内容是否被转义。

这种方法允许你在不手动处理每个标签的情况下，选择性地控制哪些内容需要转义。

回到顶部