将 nonce 添加到 <script> 标签答案

【问题标题】：Adding nonce to <script> tag将 nonce 添加到 <script> 标签
【发布时间】：2018-10-04 17:40:17
【问题描述】：

我想知道如何在基于 WordPress 的页面上的所有 <script> 标签中添加随机数。例如，请在下面找到一些代码：

$my_nonce = wp_create_nonce('nonce-'.rand());
$nonces = "Content-Security-Policy: script-src 'self nonce-".$my_nonce."'";
header( "{$nonces}");

wp_localize_script( 'my_loadmore', 'my_loadmore_params', array(
'ajaxurl' => site_url() . '\/wp-admin\/admin-ajax.php',
'posts' => json_encode( $wp_query->query_vars ), 
'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
         'max_page' => $wp_query->max_num_pages,
) );`

我想要这样的东西：

<script nonce="nonce-value">...</script>

nonce-value 是随机的。

这只是我需要这个的地方之一，是否知道如何将其全局添加到<script> 标签？

【问题讨论】：

你想完成什么？这不是 wordpress 中使用 nonce 的正常方式。 “如何在全局范围内向脚本标签添加随机数？”可能会有答案。但我认为这不是你真正想要的。全球在什么意义上？所有脚本标签？嗯？
为什么要将随机数添加到脚本标签？你可以为它设置id。
我认为这是出于内容安全策略的目的。

标签： php wordpress nonce

【解决方案1】：

我在functions.php中设置了一个函数来使用内置的wordpress函数生成一个nonce。

add_action( 'run_custom_nonce_value', 'custom_nonce_value' );
function custom_nonce_value () {

    $created_nonce = wp_create_nonce();
    define( 'NONCE_RANDVALUE', $created_nonce ); 

}

然后我设置此过滤器以将 nonce 值添加到所有脚本

add_filter( 'script_loader_tag', 'add_nonce_to_script', 10, 3 );
function add_nonce_to_script( $tag, $handle, $source ) {

    custom_nonce_value();
    $val_nonce = NONCE_RANDVALUE;

    $search = "type='text/javascript'";
    $replace = "type='text/javascript' nonce='".$val_nonce."' ";
    $subject = $tag;

    $output = str_replace($search, $replace, $subject);
    return $output;
}

此解决方案会将随机数添加到所有正确注册的脚本中。

【讨论】：

嘿，菜鸟，尝试在 WP 中实现 CSP。您能否进一步帮助我... 2个问题：我如何实际将其添加到标题中？我的意思是 Nonce 应该在标题和脚本标签中......如何添加它......第二，您将 nonce 添加到脚本的代码是否也适用于内联 JS？
另外，我读到 nonces 必须是 base64 否则它们不起作用......我什至不确定 base64 到底是什么意思，但它符合它吗？
您可以编辑 header.php 文件以将 CSP 添加到您想要的规则中。它不会将 nonce 添加到未正确加载的脚本中。因此，如果插件的开发人员只是在他们编写的代码中添加了一个脚本标签，这将不起作用。它不会处理那些脚本标签。它们必须通过 wordpress 功能注册和加载。
如果您使用 wp_create_nonce() 函数，它将以正确的格式供您使用。
嘿，我不希望收到关于 2 岁答案的回复。感谢回复。我迫切希望拥有 CSP，所以我在 WPSE 上发布了问题，结果发现 wp_create_nonce() 不正确。 wordpress.stackexchange.com/questions/395453/… 并证明 nonce 生成的生命为 24 小时。我自己测试过，CSP 的理想行为需要在每个页面加载/刷新时都有一个新的随机数

【解决方案2】：

尚未对此进行测试，但 Wordpress 确实提供了一个 script_loader_tag 过滤器，它允许您从排队的脚本中修改生成的脚本标签。

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

function add_nonce_to_script( $tag, $handle, $src ) {
    global $my_nonce;
    return '<script type="text/javascript" src="' . esc_url( $src ) . '" nonce="' . esc_attr( $my_nonce ) . '"></script>';
}

【讨论】：

【解决方案3】：

试试这个代码，

add_filter('script_loader_src','add_nonce_to_script',10,2);
function add_nonce_to_script($src, $handle){
   $my_nonce = wp_create_nonce('nonce-'.rand());
   return $src.' nonce= '.$my_nonce;
}

希望这会对您有所帮助。更多例子，

Adding Additional Attributes in Script Tag

【讨论】：

这不会通过 CSP，因为它每次调用都会生成一个新的随机数。
您使用了 rand() 函数。因此，它总是会为你的 nonce 属性中的每个选择一个新的随机数。