深入理解 WordPress `wp_kses()` 函数的源码：如何通过白名单机制过滤 HTML 以防止 XSS 攻击。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

WordPress `wp_kses()`：HTML 净化大师的幕后故事

大家好，我是今天的主讲人，各位可以叫我老码农。今天要跟大家聊聊 WordPress 里一个非常重要的函数，也是 Web 安全领域里经常会碰到的问题：跨站脚本攻击（XSS）以及如何防范它。而我们今天的主角，就是 WordPress 用来抵御 XSS 的一把利剑：wp_kses() 函数。

想象一下，你正在搭建一个博客，允许用户发表评论。用户兴高采烈地写了一段评论，里面包含了一段 JavaScript 代码，这段代码一旦被执行，就能窃取其他用户的 Cookie，甚至控制整个网站。这可不是闹着玩的！这就是 XSS 攻击的威力。

那么，如何避免这种悲剧发生呢？答案就是：在将用户提交的 HTML 内容显示到页面之前，对其进行严格的过滤。而 wp_kses() 就是 WordPress 为我们提供的这个 HTML 净化工具。

wp_kses() 是什么？

简单来说，wp_kses() 函数的作用就是根据预先设定的白名单，过滤掉 HTML 代码中所有不在白名单内的标签、属性和属性值。只有符合白名单规则的 HTML 代码才能被保留下来，其余的都会被无情地删除。

听起来是不是有点像机场安检？你只能携带符合规定的物品登机，违禁品一律没收。

wp_kses() 的基本用法

wp_kses() 函数的基本语法如下：

<?php
$safe_html = wp_kses( $string, $allowed_html, $allowed_protocols );
?>

$string: 需要过滤的 HTML 字符串。
$allowed_html: 一个数组，定义了允许的 HTML 标签和属性。这就是我们的白名单。
$allowed_protocols: 一个数组，定义了允许的 URL 协议，比如 http, https, mailto 等。

返回值是经过过滤后的 HTML 字符串。

白名单：wp_kses() 的核心

wp_kses() 的强大之处在于其白名单机制。白名单定义了哪些 HTML 标签和属性是允许的，哪些是不允许的。这就像是一份详细的“允许携带物品清单”，只有出现在清单上的东西才能通过安检。

白名单通常是一个多维数组，数组的键是允许的 HTML 标签名，值是该标签允许的属性。例如：

<?php
$allowed_html = array(
    'p' => array(
        'class' => array(),
        'style' => array()
    ),
    'a' => array(
        'href' => array(),
        'title' => array(),
        'rel' => array()
    ),
    'img' => array(
        'src' => array(),
        'alt' => array(),
        'width' => array(),
        'height' => array()
    ),
    'br' => array(),
    'em' => array(),
    'strong' => array(),
);
?>

这个白名单允许使用 , <a>, <img>,  , ,  这些标签。其中， 标签允许使用 class 和 style 属性，<a> 标签允许使用 href, title, rel 属性，<img> 标签允许使用 src, alt, width, height 属性。

如果 HTML 代码中出现了不在白名单中的标签或属性，wp_kses() 会毫不留情地将其删除。

wp_kses() 的源码剖析

为了更深入地理解 wp_kses() 的工作原理，让我们一起扒一扒它的源码。当然，我们不会一行一行地啃，而是重点关注其核心逻辑。

wp_kses() 函数本身是一个包装器，它实际上调用了 wp_kses_internal() 函数来完成过滤工作。

function wp_kses( $string, $allowed_html, $allowed_protocols ) {
  global $allowedposttags, $allowedtags;

  if ( empty( $allowed_html ) ) {
    $allowed_html = $allowedposttags;
  }

  if ( ! is_array( $allowed_html ) ) {
    $allowed_html = array();
  }

  /**
   * Filters the list of allowed HTML tags and their attributes.
   *
   * @since 2.0.0
   *
   * @param array  $allowed_html Array of allowed HTML tags and their attributes.
   * @param string $string       String containing HTML to be filtered.
   * @param array  $allowed_protocols Array of allowed protocols.
   */
  $allowed_html = apply_filters( 'wp_kses_allowed_html', $allowed_html, $string, $allowed_protocols );

  if ( ! is_array( $allowed_protocols ) ) {
    $allowed_protocols = wp_allowed_protocols();
  }

  return wp_kses_internal( $string, $allowed_html, $allowed_protocols );
}

这里有几个关键点：

默认白名单： 如果你没有提供 $allowed_html 参数，wp_kses() 会使用 $allowedposttags 全局变量作为默认的白名单。$allowedposttags 变量定义了 WordPress 允许在文章内容中使用的 HTML 标签和属性。
可扩展性： 通过 wp_kses_allowed_html 过滤器，你可以自定义 wp_kses() 的白名单。这使得 wp_kses() 非常灵活，可以适应各种不同的场景。
协议白名单： 如果没提供 $allowed_protocols 参数，会调用 wp_allowed_protocols() 函数获取允许的协议列表。这个函数返回一个包含 http, https, mailto 等常见协议的数组。

接下来，我们深入 wp_kses_internal() 函数，看看它是如何进行 HTML 过滤的。

wp_kses_internal() 函数的代码比较复杂，但其核心逻辑可以概括为以下几个步骤：

预处理： 对 HTML 字符串进行一些预处理，例如将 HTML 实体转换为字符，将所有标签和属性名转换为小写。
标签解析： 使用正则表达式或其他方法，将 HTML 字符串解析成一个个的标签和属性。
白名单检查： 对于每一个标签，检查其是否在白名单中。如果不在白名单中，则删除该标签。
属性检查： 对于每一个属性，检查其是否在白名单中。如果不在白名单中，则删除该属性。
属性值检查： 对属性值进行更严格的检查，例如检查 URL 协议是否在允许的协议列表中，防止 JavaScript 代码被嵌入到属性值中。
后处理： 将过滤后的 HTML 代码重新组合成字符串，并进行一些后处理，例如将字符转换回 HTML 实体。

一些需要注意的地方

嵌套标签： wp_kses() 会递归地处理嵌套标签。这意味着，即使一个标签本身在白名单中，如果它的子标签不在白名单中，也会被删除。
属性值中的 URL： wp_kses() 会特别注意属性值中的 URL。它会检查 URL 协议是否在允许的协议列表中，并尝试解码 URL 中的 HTML 实体。这可以防止一些常见的 XSS 攻击。
HTML 实体： wp_kses() 会将 HTML 实体转换为字符，然后再进行过滤。这可以防止一些利用 HTML 实体进行 XSS 攻击的方法。例如，javascript: 会被转换为 javascript:，然后被检测到并过滤掉。

一个简单的例子

假设我们有以下 HTML 代码：

<p class="foo" style="color:red;">This is a <strong>test</strong>.</p>
<script>alert('XSS');</script>
<a href="javascript:void(0);">Click me</a>

我们使用以下白名单：

<?php
$allowed_html = array(
    'p' => array(
        'class' => array(),
        'style' => array()
    ),
    'strong' => array(),
);
?>

经过 wp_kses() 过滤后，得到的结果是：

<p class="foo" style="color:red;">This is a <strong>test</strong>.</p>
Click me

可以看到，<script> 标签和 <a> 标签都被删除了，因为它们不在白名单中。

如何正确使用 wp_kses()

明确你的需求： 在使用 wp_kses() 之前，你需要明确你的需求。你需要允许哪些 HTML 标签和属性？哪些是不允许的？
创建一个合适的白名单： 根据你的需求，创建一个合适的白名单。白名单应该尽可能地严格，只允许必要的 HTML 标签和属性。
不要信任用户输入： 永远不要信任用户输入。即使你已经使用了 wp_kses() 进行过滤，也应该对用户输入进行其他形式的验证和过滤，例如检查输入是否符合预期的格式，限制输入长度等。
定期更新 WordPress： WordPress 会定期发布安全更新，修复已知的安全漏洞。定期更新 WordPress 可以帮助你保持网站的安全性。
了解 wp_kses_post() 和 wp_kses_data()： WordPress 提供了两个更方便的函数：wp_kses_post() 和 wp_kses_data()。wp_kses_post() 使用 $allowedposttags 作为白名单，适用于过滤文章内容。wp_kses_data() 则更加严格，只允许少数几个标签，适用于过滤一些不太重要的文本数据。

wp_kses() 的局限性

虽然 wp_kses() 是一个非常强大的 HTML 净化工具，但它并不是万能的。它仍然存在一些局限性：

复杂的攻击： 一些复杂的 XSS 攻击可能仍然能够绕过 wp_kses() 的过滤。例如，一些攻击者可能会利用 CSS 表达式或 SVG 图像中的漏洞来执行 JavaScript 代码。
性能问题： wp_kses() 的过滤过程可能会比较耗时，特别是在处理大型 HTML 字符串时。
需要维护： 白名单需要定期维护，以适应新的 HTML 标签和属性。

一些高级技巧

自定义过滤规则： 你可以使用 wp_kses_attr() 过滤器来添加自定义的属性过滤规则。这可以让你对属性值进行更严格的检查。
使用第三方库： 如果你需要更强大的 HTML 净化功能，可以考虑使用一些第三方的 HTML 净化库，例如 HTML Purifier。

一些常见问题

为什么我的 HTML 代码被 wp_kses() 删除了？ 检查你的白名单，看看是否允许该 HTML 标签和属性。
如何允许用户上传图片？ 你需要允许 <img> 标签，并允许 src, alt, width, height 等属性。同时，你需要对上传的图片进行验证，确保它们是合法的图片文件，而不是包含恶意代码的文件。
如何允许用户使用视频？ 你可以允许 <video> 标签，并允许 src, width, height, controls 等属性。同时，你需要对上传的视频进行验证，确保它们是合法的视频文件，而不是包含恶意代码的文件。

总结

wp_kses() 是 WordPress 中一个非常重要的 HTML 净化函数，它可以帮助你有效地抵御 XSS 攻击。通过理解 wp_kses() 的工作原理，并正确使用它，你可以大大提高你的 WordPress 网站的安全性。

希望今天的讲座对大家有所帮助。记住，安全无小事，保护好你的网站，也保护好你的用户！谢谢大家！

代码示例：一个自定义的 wp_kses() 使用场景

假设你正在开发一个插件，允许用户在文章中使用一个自定义的 [my_embed] 短代码来嵌入第三方内容。为了防止 XSS 攻击，你需要对用户提供的 URL 进行过滤。

<?php
add_shortcode( 'my_embed', 'my_embed_shortcode' );

function my_embed_shortcode( $atts ) {
    $atts = shortcode_atts(
        array(
            'url' => '',
        ),
        $atts,
        'my_embed'
    );

    $url = $atts['url'];

    // 定义允许的 URL 协议
    $allowed_protocols = array( 'http', 'https' );

    // 过滤 URL
    $safe_url = wp_kses( $url, array(), $allowed_protocols );

    if ( empty( $safe_url ) ) {
        return 'Invalid URL.';
    }

    // 构建嵌入代码
    $output = '<iframe src="' . esc_url( $safe_url ) . '" width="600" height="400"></iframe>';

    return $output;
}
?>

在这个例子中，我们首先定义了一个 my_embed 短代码，用于嵌入第三方内容。然后，我们使用 wp_kses() 函数来过滤用户提供的 URL，只允许 http 和 https 协议。最后，我们使用 esc_url() 函数对 URL 进行转义，以防止 XSS 攻击。

表格：wp_kses() 相关函数和全局变量

函数/变量	描述
`wp_kses()`	HTML 过滤函数，根据白名单过滤 HTML 代码。
`wp_kses_internal()`	`wp_kses()` 的内部实现函数，负责执行实际的 HTML 过滤操作。
`wp_kses_post()`	使用 `$allowedposttags` 作为白名单的 HTML 过滤函数，适用于过滤文章内容。
`wp_kses_data()`	使用更严格的白名单的 HTML 过滤函数，适用于过滤一些不太重要的文本数据。
`wp_kses_no_null()`	从字符串中移除 NULL 字符。
`wp_allowed_protocols()`	返回一个包含允许的 URL 协议的数组，例如 `http`, `https`, `mailto` 等。
`$allowedposttags`	全局变量，定义了 WordPress 允许在文章内容中使用的 HTML 标签和属性。
`wp_kses_allowed_html`	过滤器，允许你自定义 `wp_kses()` 的白名单。

希望这些信息能帮助你更好地理解和使用 wp_kses() 函数。记住，安全是一个持续的过程，需要不断地学习和实践。祝大家安全coding！

WordPress wp_kses()：HTML 净化大师的幕后故事

发表回复 取消回复

WordPress `wp_kses()`：HTML 净化大师的幕后故事

发表回复取消回复