DataTables：安全显示富文本内容，避免HTML渲染-html教程-PHP中文网

DataTables：安全显示富文本内容，避免HTML渲染

霞舞

发布： 2025-12-02 12:24:30

原创

834人浏览过

DataTables：安全显示富文本内容，避免HTML渲染

本教程旨在解决datatables在加载包含html标签的数据时，意外渲染这些标签的问题。我们将探讨如何利用datatables的`columns.render`回调函数，结合jquery的`$.parsehtml`和dom元素的`innertext`属性，安全地提取纯文本内容并显示，从而防止恶意脚本执行和布局混乱。同时，也会介绍一种快速去除html标签的正则表达式方法，并强调数据源安全净化的重要性。

当DataTables加载包含HTML标签（如<p>, <b>, <h4>，甚至<script>）的数据时，默认行为是直接将其作为HTML内容渲染到表格单元格中。这可能导致多种问题，包括：

布局混乱：HTML标签的样式和结构可能与表格的预期布局冲突。
安全漏洞（XSS）：如果数据来源于用户输入且未经过滤，恶意脚本标签（<script>）可能被执行，造成跨站脚本攻击。
数据展示不一致：希望显示纯文本而非渲染后的HTML。

本教程将提供两种主要方法来解决这些问题，并给出相应的代码示例和注意事项。

方法一：使用 columns.render 结合 $.parseHTML 提取纯文本

最推荐的方法是利用DataTables的columns.render选项，结合jQuery的$.parseHTML函数来安全地解析包含HTML的字符串，并提取其纯文本内容。这种方法能够有效防止HTML标签被渲染，同时也能抵御大部分XSS攻击。

工作原理

columns.render: DataTables提供了一个render回调函数，允许你在数据被显示到单元格之前对其进行处理。
$.parseHTML( '<span>' + data + '</span>' ): jQuery的$.parseHTML函数可以将一个HTML字符串解析成DOM节点数组。为了确保无论原始数据是否包含HTML，都能得到一个有效的DOM结构，我们建议将原始数据包裹在一个<span>标签中。这样做可以处理以下情况：
- 数据本身没有HTML标签。
- 数据只在字符串中间包含HTML标签。
- 数据以HTML标签开头或结尾。
node.innerText: 解析后的DOM节点数组的第一个元素（即我们包裹的<span>节点）可以通过innerText属性安全地获取其包含的所有纯文本内容，而忽略所有HTML标签。

示例代码

首先，确保你的HTML页面包含了DataTables和jQuery的必要库。

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html>
<head>
    <title>DataTables HTML 渲染控制</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>DataTables 纯文本显示示例</h2>
        <table id="example" class="display table table-striped" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
        </table>
    </div>

    <script>
    $(document).ready(function() {
        var myData = [
            { "name": "<p>杰克</p>", "age": 29 },
            { "name": "<b><i>玛德琳夫人</i></b>", "age": 39 },
            { "name": "<h4 style='color:red'>永恒之焰</h4>", "age": 45 },
            { "name": "普通姓名无HTML", "age": 45 },
            { "name": "包含<b>内部</b>HTML的姓名", "age": 45 },
            { "name": "<!-- 这是一个注释 -->隐藏内容", "age": 50 },
            { "name": "<script>alert('危险脚本!');</script>潜在风险", "age": 55 }
        ];

        $('#example').DataTable({
            data: myData,
            columns: [
                {
                    data: "name",
                    render: function(data, type, row, meta) {
                        // 使用 $.parseHTML 解析数据，并用 <span> 包裹以确保结构完整
                        let node = $.parseHTML('<span>' + data + '</span>')[0];
                        // 返回解析后的纯文本内容
                        return node.innerText;
                    }
                },
                { data: "age" }
            ]
        });
    });
    </script>
</body>
</html>

登录后复制

在上述示例中，render函数会处理name列的数据。即使name字段包含p、b、h4或script等标签，最终显示在表格中的都将是这些标签内的纯文本内容。

注意事项

安全性增强：这种方法能有效阻止恶意脚本的执行，因为innerText只会提取文本，而不会执行脚本。
HTML注释处理：对于HTML注释（如），innerText会忽略注释内部的内容，只显示注释外的文本。
数据源净化：尽管此方法在客户端提供了保护，但最佳实践仍然是在数据源头（服务器端）对用户输入进行严格的净化和验证，以防止不安全的数据进入系统。

方法二：正则表达式快速去除HTML标签

如果你的需求仅仅是简单地去除所有HTML标签，并且对安全性要求不是极高（因为正则表达式可能无法完全覆盖所有复杂的HTML或恶意注入场景），可以使用正则表达式进行快速替换。DataTables自身在处理HTML类型列的排序时也采用了类似的方法。

工作原理

使用JavaScript的String.prototype.replace()方法结合正则表达式/ <.*? >/g来匹配并移除所有HTML标签。

大师兄智慧家政

58到家打造的AI智能营销工具

查看详情

/ <.*? >/g: 这是一个正则表达式。
- <: 匹配开头的左尖括号。
- .*?: 匹配任意字符（.）零次或多次（*），但尽可能少地匹配（?，非贪婪模式），直到遇到下一个模式。
- >: 匹配结尾的右尖括号。
- g: 全局匹配标志，确保替换所有匹配项。

示例代码

在DataTables的初始化中，修改name列的render函数：

$(document).ready(function() {
    var myData = [
        { "name": "<p>杰克</p>", "age": 29 },
        { "name": "<b><i>玛德琳夫人</i></b>", "age": 39 },
        { "name": "<h4 style='color:red'>永恒之焰</h4>", "age": 45 },
        { "name": "普通姓名无HTML", "age": 45 },
        { "name": "包含<b>内部</b>HTML的姓名", "age": 45 },
        { "name": "<script>alert('危险脚本!');</script>潜在风险", "age": 55 }
    ];

    $('#example').DataTable({
        data: myData,
        columns: [
            {
                data: "name",
                render: function(data, type, row, meta) {
                    // 使用正则表达式去除所有HTML标签
                    return data.replace(/<.*?>/g, '');
                }
            },
            { data: "age" }
        ]
    });
});

登录后复制

注意事项

简便性：这种方法代码简洁，易于实现。
局限性：
- 安全性较低：正则表达式在处理复杂或嵌套的HTML结构，以及防范所有XSS变体方面不如DOM解析器（如$.parseHTML）健壮。例如，它可能无法正确处理某些畸形的HTML或特殊编码的攻击。
- 可能误删内容：如果数据中包含类似HTML标签的非HTML文本（例如<name>作为XML数据的一部分），它也会被删除。
- 不处理HTML实体：此方法只会删除标签，不会解码HTML实体（如

最佳实践与总结

在处理DataTables中包含HTML的数据时，选择合适的方法至关重要：

首选 $.parseHTML + innerText：
- 安全性高：能够有效防止XSS攻击，因为它只提取纯文本。
- 鲁棒性好：基于DOM解析，对HTML结构的处理更为准确。
- 推荐场景：当你需要从富文本中提取纯文本进行显示，并且数据可能包含用户输入时。
谨慎使用正则表达式：
- 适用于简单场景：如果数据源可信，且HTML结构简单，仅需快速去除标签，可以考虑。
- 不作为主要安全措施：不应将其作为防范XSS攻击的主要手段。
源头净化是关键：
- 无论客户端采取何种措施，最根本且最安全的做法是在数据进入系统时（通常在服务器端）就对其进行严格的净化和验证。移除或转义所有潜在的恶意HTML和脚本标签，确保存储和传输的数据是安全的。