CSP and script localization in wordpress

I want to properly use Content Security Policy on my WordPress site, but also not hardcode URIs.

I am moving all my inline scripts to one file, and adding hashes to all script tags to use with Subresource Integrity.

The ajax localization gives me a hard time; It runs PHP to get the JS file name, and outputs it inline to an object (which gets used by ajax calls).

In order to make admin-ajax available, I have

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

Which outputs:

<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>

I need to be able to add a hash to this tag but I cannot find the right way.

I’m able to generate it in PHP like:

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);

But I don’t know how to add this to the page correctly, and also, this feels too hacky.

Without either outputting this hash, or moving this object creation to my main JavaScript file, the page will not pass my CSP and script will not run.

How do I accomplish this?

Answer

As of this moment the only way I could solve it is by using [wp_enqueue_scripts][1], which is the hook used by [wp_enqueue_script][2] when utilizing [wp_localize_script][3]

Doesn’t feel like the best solution but it does work.

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/

Advertisement

Answer