wordpress 中的 CSP 和脚本本地化答案

【问题标题】：CSP and script localization in wordpresswordpress 中的 CSP 和脚本本地化
【发布时间】：2022-01-25 21:07:58
【问题描述】：

我想在我的 Wordpress 网站上正确使用内容安全策略，但也不想硬编码 URI。

我将所有内联脚本移动到一个文件中，并将哈希添加到所有脚本标签以与子资源完整性一起使用。

ajax 本地化让我很难过；它运行 PHP 来获取 JS 文件名，并将其内联输出到一个对象（由 ajax 调用使用）。

为了使admin-ajax 可用，我有

global $wp_query;
wp_localize_script('project-js', 'ajax_object', array(
    'ajaxurl' => admin_url('admin-ajax.php'),
    'some_vars' => json_encode($wp_query->query)
));

哪些输出：

<script type="text/javascript" id="project-js-js-extra">
/* <![CDATA[ */
var ajax_object = {"ajaxurl":"http:\/\/domain.tld\/wp\/wp-admin\/admin-ajax.php","some_vars":"[]"};
/* ]]> */
</script>

我需要能够向这个标签添加一个哈希，但我找不到正确的方法。

我可以像这样在 PHP 中生成它：

global $wp_scripts;
$l10n_candidate = array(
    'ajaxurl' => admin_url( 'admin-ajax.php' ),
    'some_vars' => json_encode( $wp_query->query )
);

$script_content = "/* <![CDATA[ */
var ajaxpagination = " . wp_json_encode( $l10n_candidate ) . ';
/* ]]> */';
$script_hash = hash('sha256', $script_content);

但我不知道如何正确地将其添加到页面中，而且感觉太hacky了。

如果不输出此哈希，或将此对象创建移动到我的主 JavaScript 文件，页面将不会通过我的 CSP 并且脚本将不会运行。

我该如何做到这一点？

【问题讨论】：

标签： javascript php wordpress content-security-policy custom-wordpress-pages

【解决方案1】：

目前我能解决的唯一方法是使用 [wp_enqueue_scripts][1]，这是 [wp_enqueue_script][2] 在使用 [wp_localize_script][3] 时使用的钩子

感觉不是最好的解决方案，但确实有效。

function abr_ajax_pagi_obj(){
    global $wp_query;

    $l10n_candidate = array(
      'ajaxurl' => admin_url( 'admin-ajax.php' ),
      'some_vars' => json_encode( $wp_query->query ),
    );

    $script_content = "/* <![CDATA[ */
var ajaxpagination = " . wp_json_encode( $l10n_candidate ) . ';
/* ]]> */';
$script_hash = 'sha256-' . base64_encode(hash('sha256', $script_content,true));
?><script integrity="<?php echo $script_hash?>"><?php
echo $script_content;?></script><?php 
    }

add_action( 'wp_enqueue_scripts', 'abr_ajax_pagi_obj', 5, 5 );


  [1]: https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/
  [2]: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
  [3]: https://developer.wordpress.org/reference/functions/wp_localize_script/

【讨论】：