Pass PHP variable to JavaScript without inline JS

Question

So everybody and their mother says to use wp_localize_script to pass PHP variables client side. Even though the function is not actually made for this purpose, everybody does it. Kind of like Q-Tips: not made for cleaning ears, everybody does it anyways.

With technology moving forward and people generally against things inline I don't want to have inline script for all those little variables. I'm especially doomed because I want to use the Content Security Policy HTTP header. There simply is no cool way to have inline JS (even worse: dynamic inline JS, you can't sha256 that) and have a CSP.

What other ways could I use to pass a variable set in PHP client side without creating nasty inline <script> blocks?

Maybe a WebService could push variables clientside? A PHP generated php_variables.js file with a dynamic hash if a variable has changed so browser caches refresh? Other ideas?

Answer 1

Untested but gosh darn it might just work...

javascript file:

jQuery( document ).ready(function() {
    jQuery.ajax({
        url: // !! hardcode the URL of WP admin-ajax.php here, since you don't want to use wp_localize_script() to pass it in...
        type: 'POST',
        data:{
            action: 'some_action', // this is the function (via wp_ajax_ hook) that will be triggered
        },
        success: function( data ){
            var returned_data = JSON.parse(data);
        }
    });  // jQuery.ajax
});

php file:

wp_enqueue_script( 'my-ajax-js', 'url of my .js file', array('jquery'), "1.0.0", true);

function get_some_variables() {
    $return_data = array("one","two","three","four");
    echo ( json_encode($return_data) );
    wp_die();
}
add_action( 'wp_ajax_some_action', 'get_some_variables' );

(EDIT) I should add..this is a LOT of overhead for a one-way trip to the browser for some php variables. I'm curious as to why you don't want to just use wp_localize_script() ?

Another reckless cowboy way to get php variables into the DOM is to echo the JSON encoded string to a hidden <div>, then use js to go pull the content out of that div. For small amounts of data that you don't care if is exposed in plain-text...that works, too.