主页 / coding / 问题 / 78905680
Accepted
timholz
Asked: 2024-08-23 19:31:04 +0800 CST

CSP script-src 设置拒绝 wordpress 中的内联脚本

  • 772

目前我有：

function add_csp_header() {
    $csp = "script-src 'nonce-".custom_nonce_value()."'"; //and some more
    header("X-Content-Type-Options: nosniff");
    header("Referrer-Policy: strict-origin-when-cross-origin");
    header("Content-Security-Policy: $csp");
    }
add_action('send_headers', 'add_csp_header');

在控制台中我收到几条错误消息：

Content-Security-Policy: the settings of the page have blocked loading a ressource on inline ("script-src").

wp_localize_script()内联脚本按如下方式排队：

wp_register_script( 'dibujos', get_stylesheet_directory_uri() . '/js/dibujos.js',   array('jquery'),'1.0.0', true);
wp_localize_script( 'dibujos', 'archVar', array( 'url' => get_bloginfo('url') )    );
wp_enqueue_script('dibujos');

为了将随机数添加到内联脚本中，我尝试了以下方法：

function toa_inline_script_nonce( array $attr ): array {
    if ( empty( $attr['id'] ) ) {
        return $attr;
    }
    if ( 'dibujos' === $attr['id'] ) {
        $attr['nonce']   = custom_nonce_value();
    }
    return $attr;
}
add_filter( 'wp_script_attributes', 'toa_inline_script_nonce', 10, 1 );

什么也不做，或者...

//nonce for specific scripts
function toa_script_tag_nonce( $tag, $handle ) {
    if ( $handle === 'jquery' OR $handle === 'admin-bar' OR $handle === 'dibujos' ) {
         $nonce = custom_nonce_value();
         $tag = str_replace( '<script ', '<script nonce="'.$nonce.'"', $tag );
    }
    return $tag;
    }
add_filter( 'script_loader_tag', 'toa_script_tag_nonce', 10, 2 );

这会为$handle“jquery”和“admin-bar”添加随机数，但忽略“dibujos”。

最后...

add_filter( 'script_loader_tag', 'add_nonce_to_script_tag', 10, 3 );

function add_nonce_to_script_tag( $tag, $handle, $src ) {

  // Check the $handle and respond accordingly
  if ( $handle === 'dibujos' ) {
    $nonce_value = custom_nonce_value();
    $replace = sprintf("javascript' nonce='%s'>", $nonce_value );
    $tag = str_replace( "javascript'>", $replace, $tag);
  }

  return $tag;
}

// Then... $data is the inline JS from wherever
wp_add_inline_script('dibujos', $data, 'before');

这会引发错误：$data is undefined并且wp_add_inline_script()不应在之前调用wp_enqueue_scripts()。结论：我尝试捕获脚本标记并添加 nonce 属性的所有尝试都失败了。不知何故，内联脚本似乎遥不可及……（至少使用这些方法）

在这篇文章中，有人说：

由于这些是回显的并且是硬编码的，因此您无法向 wp_localize_script() 的 HTML 脚本元素添加属性。

根据此声明，内联脚本对于 wordpress 中的保存脚本源 CSP 来说是死路一条。尽管有这样的说法，但我想知道这是否是事实，如果不是，我该如何将 nonce 添加到所有内联脚本中？

wordpress

1 个回答

  1. Best Answer

    有一个过滤器wp_inline_script_attributes可以自定义内联脚本的属性：
    https://core.trac.wordpress.org/browser/tags/6.6/src/wp-includes/script-loader.php#L2919

    那么你的插件看起来就像这样

    add_filter("MY_PLUGIN/nonce_script", function ($_) {
    
    // put the data in cache to be sure to return the same value on all calls
    if (!isset($GLOBALS["MY_PLUGIN"]["nonce_script"])) {
        $GLOBALS["MY_PLUGIN"]["nonce_script"] = md5("塩" . microtime());
    }
    
    
    return $GLOBALS["MY_PLUGIN"]["nonce_script"];
    
});


add_action("send_headers", function ($wp) {
    
    $nonce_script = apply_filters("MY_PLUGIN/nonce_script", NULL);
    
    header("X-Content-Type-Options: nosniff");
    header("Referrer-Policy: strict-origin-when-cross-origin");
    header("Content-Security-Policy: script-src 'nonce-$nonce_script'");
    
}, 10, 1);


add_filter("wp_script_attributes", function ($attributes) {
    
    $attributes["nonce"] = apply_filters("MY_PLUGIN/nonce_script", NULL);
    
    return $attributes;
    
}, 10, 1);


add_filter("wp_inline_script_attributes", function ($attributes, $data) {
    
    $attributes["nonce"] = apply_filters("MY_PLUGIN/nonce_script", NULL);
    
    return $attributes;
    
}, 10, 2);
    • 1

相关问题