wordpress 中的 CSP 和腳本本地化

Question

我想在我的 Wordpress 站點上正確使用內容安全策略，但也不是硬編碼 URI。

我將所有內聯腳本移動到一個文件中，並將哈希添加到所有腳本標簽以與子資源完整性一起使用。

ajax 本地化讓我很難受； 它運行 PHP 以獲取 JS 文件名，並將其內聯輸出到 object（由 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>

我需要能夠將 hash 添加到此標簽，但我找不到正確的方法。

我可以在 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了。

如果不輸出此 hash，或將此 object 創建移動到我的主 JavaScript 文件，該頁面將不會通過我的 CSP 並且腳本將不會運行。

我該如何做到這一點？

Answer 1

評論的空間不夠，所以我在這里解釋一下！

“我需要能夠將 hash 添加到此標簽，但我找不到正確的方法。”
“如何正確地將其添加到頁面，而且，這感覺太 hacky”

Wordpress 有你！ 它有一個稱為Nonce ^Docs的概念，它是“與特定操作、用戶、用戶 session 和 window 時間相關聯的加密令牌” 。

您可以使用wp_create_nonce ^Docs 、 wp_nonce_url ^Docs和wp_nonce_field ^Docs函數創建隨機數。
您可以使用wp_verify_nonce ^Docs function 進行驗證。

How to use nonces^文檔

出於安全原因，建議使用nonce而不是您自己的“hacky”散列方式。

---

您也可以像這樣在wp_localize_script function 中使用它（這是推薦的方式） ：

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

如果您仍然想要/需要使用自己的哈希系統，那么您可以這樣做（不推薦） ：

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

Answer 2

到目前為止，我可以解決的唯一方法是使用 [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/