WordPress添加CSP nonce时部分script标签被跳过的原因排查

你的问题出在script_loader_tag过滤器仅作用于通过wp_enqueue_script()或wp_register_script()注册/加载的脚本标签，而WordPress自动生成的内联脚本、核心自带的部分脚本（比如表情脚本、评论区脚本）并不会经过这个过滤器，所以导致这些标签漏加nonce。以下是针对性的解决方案：

1. 规范基础脚本的Nonce添加（优化原有代码） #

先修正你原有的过滤器，确保参数匹配钩子定义（script_loader_tag的第三个参数是脚本源$src，虽然这里用不到，但参数列表要对齐），同时用更严谨的字符串替换：

add_filter( 'script_loader_tag', 'wp_script_tag_nonce', 10, 3 );
function wp_script_tag_nonce( $tag, $handle, $src ) {
    $nonce = TPJ_NONCE; // 确保这个常量是提前生成的有效nonce，比如用wp_create_nonce('wp_rest')
    
    // 避免重复添加nonce
    if ( strpos( $tag, 'nonce=' ) === false ) {
        $tag = str_replace( '<script ', "<script nonce='{$nonce}' ", $tag );
    }
    return $tag;
}

2. 处理WordPress自动生成的内联脚本 #

对于WordPress核心自动插入的内联脚本（比如表情支持脚本、评论提交脚本），可以通过以下两种方式处理：

方法A：输出缓冲全局替换 #

这种方法可以覆盖所有页面中的<script>标签，包括内联和外部脚本，适合快速解决问题：

add_action( 'template_redirect', 'wp_global_script_nonce' );
function wp_global_script_nonce() {
    if ( is_admin() ) return; // 后台不需要的话可以跳过
    
    $nonce = TPJ_NONCE;
    ob_start( function( $output ) use ( $nonce ) {
        // 替换所有未包含nonce的<script标签
        return preg_replace( '/<script(?!.*nonce=)/', "<script nonce='{$nonce}'", $output );
    });
}

方法B：针对核心内联脚本单独处理 #

如果你不想全局替换，可以针对特定的核心内联脚本钩子修改，比如表情脚本：

add_action( 'wp_print_scripts', 'wp_fix_emoji_script_nonce', 11 );
function wp_fix_emoji_script_nonce() {
    global $wp_scripts;
    $nonce = TPJ_NONCE;
    
    // 找到表情内联脚本的handle
    if ( isset( $wp_scripts->registered['wp-emoji'] ) ) {
        $inline_script = $wp_scripts->registered['wp-emoji']->extra['after'][0];
        // 替换内联脚本的包裹标签
        $wp_scripts->registered['wp-emoji']->extra['after'][0] = str_replace( '<script ', "<script nonce='{$nonce}' ", $inline_script );
    }
}

3. 使用WordPress官方推荐的属性添加方式（5.7+） #

WordPress 5.7及以上版本提供了wp_get_script_tag_attributes过滤器，可以更规范地为脚本标签添加属性，包括nonce：

add_filter( 'wp_get_script_tag_attributes', 'wp_add_script_nonce_attribute', 10, 3 );
function wp_add_script_nonce_attribute( $attributes, $handle, $src ) {
    $nonce = TPJ_NONCE;
    $attributes['nonce'] = $nonce;
    return $attributes;
}

这个过滤器会作用于所有通过WordPress标准函数生成的脚本标签，包括内联和外部脚本，是最推荐的现代做法。

关键注意事项 #

• 确保你的TPJ_NONCE是通过wp_create_nonce()生成的有效随机数，并且要在页面的<head>和HTTP响应头的Content-Security-Policy中同步使用（比如script-src 'nonce-{$nonce}'），否则nonce不会生效。
• 避免在后台页面应用这些修改，除非你确定需要，否则可能会影响核心功能。

内容的提问来源于stack exchange，提问作者tassi