2

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?

6
  • 1
    I'm confused...why not use AJAX / JSON for this? jQuery has a nice wrapper.
    – C C
    Sep 22, 2016 at 18:54
  • Do tell. All I could come up with is wp_localize_script for passing variables from PHP to JavaScript - I also have several plugins/themes who do just that. I'm open for anything else.
    – Dennis G
    Sep 22, 2016 at 19:36
  • I thought something like this would be neat: stackoverflow.com/questions/531311/… rather than this JSON pattern: stackoverflow.com/questions/16612639/…
    – Dennis G
    Sep 23, 2016 at 13:16
  • I think all these solutions dance around the same premise. Stuff some sort of "inline" data into the DOM. If you really want a "perfect" solution, set up a separate data server, write it in Java and use a RESTful API or similar, serve it over https. Then in your php code, make the PUT request to store the data and in your js code, GET the data. Or, set up AWS S3 and use it as an intermediate data-store endpoint. All this is just a SMOP, right?
    – C C
    Sep 23, 2016 at 13:34
  • 1
    not being ironic; those were all reasonable suggestions for sharing data among applications, securely. Per my other comment I think you will have other problems with WP and CSP if inline script is disallowed.
    – C C
    Sep 24, 2016 at 0:37

1 Answer 1

2

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.

4
  • OP states the desire to replace the inline behavior?
    – jdm2112
    Sep 22, 2016 at 20:57
  • well, the ajax solution solves it (if it works). The echo to hidden DIV thing I threw in for free...
    – C C
    Sep 22, 2016 at 21:00
  • as stated above: HTTP Content Security Policies do not allow variable inline script. Your solution with AJAX could work, but yes you are right that it is a lot of overhead. The hidden div is creative but oh so ugly ;-)
    – Dennis G
    Sep 23, 2016 at 13:08
  • 1
    I admit, I have not read up on CSP - but if inline script is disallowed, don't we have a much larger problem with WP? Take a look at all the inline script WP stuffs into the DOM on its own. Use the media handler sometime...the inline javascript it shoves into the page will make your head hurt...
    – C C
    Sep 23, 2016 at 13:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.