DataTables中安全显示纯文本内容：防止HTML标签渲染教程-html教程-PHP中文网

DataTables中安全显示纯文本内容：防止HTML标签渲染教程

聖光之護

发布： 2025-12-03 08:45:02

原创

576人浏览过

datatables中安全显示纯文本内容：防止html标签渲染教程

本教程旨在解决DataTables在加载JSON数据时自动渲染HTML标签的问题。我们将详细介绍如何利用DataTables的`columns.render`功能，结合jQuery的`parseHTML()`方法安全地提取纯文本内容，从而避免潜在的布局混乱和跨站脚本（XSS）攻击。同时，也会提供一个快速去除HTML标签的替代方案，并强调数据安全性的重要性。

在使用DataTables展示从JSON或其他数据源获取的数据时，如果数据中包含HTML标签（如<p>, <b>, <h4>, <span>，甚至<script>），DataTables默认会将这些标签作为HTML内容进行渲染。这不仅可能导致表格布局混乱，更严重的是，如果数据来源于用户输入且未经过滤，可能引入跨站脚本（XSS）攻击的风险。为了安全且规范地显示纯文本内容，我们需要在数据渲染到表格之前进行处理。

核心方法：使用 columns.render 进行安全解析

DataTables提供了强大的columns.render选项，允许我们自定义单元格的渲染逻辑。结合jQuery的parseHTML()函数，我们可以有效地将包含HTML的字符串转换为DOM节点，然后提取其纯文本内容。

1. columns.render 函数

columns.render 是一个回调函数，它在DataTables渲染每个单元格时被调用。该函数接收四个参数：

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

data: 单元格的原始数据。
type: 渲染类型（如display, filter, sort等）。
row: 当前行的数据对象。
meta: 包含行、列索引等元信息。

我们主要关注display类型，即在表格中实际显示的数据。

2. jQuery.parseHTML()

jQuery.parseHTML() 函数能够将HTML字符串解析成一个DOM节点数组。这是安全处理HTML的关键，因为它允许我们以结构化的方式访问和操作HTML内容，而不是直接将其插入到DOM中。

3. 提取纯文本内容

在将HTML字符串解析为DOM节点后，我们可以通过访问DOM节点的innerText属性来获取其包含的纯文本内容。innerText属性会返回元素及其所有子元素的文本内容，忽略所有HTML标签和样式。

4. 结合实践

为了确保即使数据不包含HTML标签也能正常工作，并且处理HTML标签可能不在字符串开头的情况，我们建议将原始数据包裹在一个<span>元素中，再进行解析。这样可以保证parseHTML()始终能得到一个可操作的父节点。

以下是实现此方法的完整示例代码：

<!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 HTML内容安全显示</h2>
        <table id="example" class="display table table-striped" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
            </thead>
        </table>
    </div>

    <script>
        $(document).ready(function() {
            var myData = [
                { "name": "<p>Jack</p>", "age": 29 },
                { "name": "<b><i>Madame Uppercut</i></b>", "age": 39 },
                { "name": "<h4 style='color:red'>Eternal Flame</h4>", "age": 45 },
                { "name": "Normal Name No HTML", "age": 45 },
                { "name": "Not <b>Normal</b> Name - HTML inside the string", "age": 45 },
                { "name": "<!-- This is a comment -->", "age": 30 } // 示例：包含HTML注释
            ];

            $('#example').DataTable({
                data: myData,
                columns: [
                    {
                        data: "name",
                        render: function(data, type, row, meta) {
                            // 确保数据始终包裹在一个HTML容器中，即使它没有HTML标签
                            // 然后解析为DOM节点，并提取innerText
                            let node = $.parseHTML('<span>' + data + '</span>')[0];
                            return node.innerText;
                        }
                    },
                    { data: "age" }
                ]
            });
        });
    </script>
</body>
</html>

登录后复制

在上述代码中，render函数接收data（即name字段的值），将其包裹在<span>标签中，然后使用$.parseHTML()解析。[0]表示获取解析后的第一个DOM节点（即我们包裹的<span>），最后通过innerText获取其纯文本内容。

音刻

AI音视频转录和笔记工具

107

查看详情

重要考量与安全警告

HTML结构完整性

上述方法假设数据中包含的HTML是格式良好的。如果HTML结构不完整或存在严重错误，parseHTML()可能无法按预期工作，或导致意外结果。

HTML注释的处理

当数据中包含HTML注释（）时，innerText会忽略这些注释内容。如果一个单元格的数据仅包含注释而无其他可见文本，那么该单元格在表格中将显示为空白。

<script>标签带来的安全风险 (XSS)

这是最关键的一点。 如果数据源中包含<script>标签，例如 <script>alert("test")</script>，即使通过parseHTML()和innerText提取，也存在潜在的安全风险。

数据源中的脚本: 理想情况下，您的数据源（尤其是来自用户输入的数据）不应该包含可执行的JavaScript脚本。这是防止XSS攻击的首要防线。
parseHTML()的行为: jQuery.parseHTML()在解析时，不会直接执行其中的脚本。然而，如果脚本内容被后续的DOM操作意外地插入到文档中（尽管innerText会避免这种情况），或者在更复杂的场景下，仍然可能构成风险。
如何处理:
- 最佳实践: 在数据进入系统之前，就应该对所有用户输入进行严格的消毒和过滤，移除或转义所有潜在的恶意HTML和JavaScript。
- 编码字符: 如果无法完全控制数据源，并且必须处理可能包含脚本的字符串，一种方法是提前对<和>字符进行HTML实体编码（例如，将<编码为）。这样，即使数据被解析，脚本标签也会被视为普通文本而不是可执行代码。
- 警告: 如果您尝试让<script>标签内的代码执行（例如，通过在数据中嵌入alert('test')），并对其进行不当处理，这几乎肯定是一个非常危险的做法，可能导致严重的安全漏洞。

替代方案：快速去除HTML标签

如果您只需要一个“快速而粗暴”的解决方案来完全剥离所有HTML标签，而不关心解析HTML结构，可以使用正则表达式进行替换。DataTables自身在某些内部处理（如排序HTML类型列）时也使用类似的方法。

render: function(data, type, row, meta) {
  // 使用正则表达式匹配并替换所有HTML标签为空字符串
  return data.replace( /<.*?>/g, '' );
}

登录后复制

这种方法简单直接，能够有效地移除大多数常见的HTML标签。然而，它的局限性在于：

不够精确: 它仅仅是基于模式匹配进行替换，可能无法处理所有复杂的HTML边缘情况，例如嵌套标签、注释中的尖括号等。
无DOM解析: 它不涉及DOM解析，因此无法像parseHTML()那样精确地提取出标签内的文本内容，只是简单地删除了标签本身。
潜在误伤: 如果数据中包含看起来像HTML标签但实际不是的文本（例如，数学表达式中的<和>），也可能被错误地移除。

对于大多数简单的需求，此方法是可行的，但对于要求更高安全性或更精确内容提取的场景，推荐使用jQuery.parseHTML()。

总结与最佳实践

在DataTables中处理包含HTML标签的数据时，推荐使用columns.render结合jQuery.parseHTML()和innerText的方法。这种方法提供了一种安全且结构化的方式来提取纯文本内容，同时避免了直接渲染HTML带来的风险。

核心建议：

优先数据源清洁: 最好的做法是在数据进入您的应用程序或数据库之前，就对其进行严格的消毒和过滤。永远不要信任来自用户或外部系统的数据，并假设它们可能包含恶意内容。
使用 jQuery.parseHTML(): 对于必须处理可能包含HTML的字符串，这是提取纯文本的安全且推荐的方式。
警惕 <script> 标签: 对任何可能包含可执行脚本的数据保持高度警惕，并采取措施（如HTML实体编码）来中和它们，或者直接拒绝包含脚本的数据。
了解替代方案: 正则表达式替换可以作为快速解决方案，但要清楚其局限性。

通过遵循这些实践，您可以确保DataTables不仅能够清晰地展示数据，还能维护应用程序的安全性。

以上就是DataTables中安全显示纯文本内容：防止HTML标签渲染教程的详细内容，更多请关注php中文网其它相关文章！