Should I use <script> tag to pass data from PHP to JavaScript?

Question

The accepted answer to "How to pass variables and data from PHP to JavaScript?" lists a number of methods. One that isn't explicitly mentioned (although it fits under method 2) is discussed in "How can I read a JSON in the script-tag from JavaScript?". It works by using the PHP function (copied from Mathias Bynens)

json_encode($data, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES)

to write the content of a tag such as

<script id="data" type="application/json">{org: 10, items:["one","two"]}</script>

(copied from the answer of c-smile), which is then read from the DOM by JavaScript.

This seems to be the best method for my case (I would rather not do a separate AJAX call), but I'm slightly concerned that it doesn't seem to be standard way of doing these things. Are there potential security issues I should be aware of?

And is this likely to be reasonably future-proof? Is it possible that there will be changes to the <script> tag or the way that browsers handle type="application/json" that will break this approach?

Update

Here's an example of the approach:

<html>
<head>
<script id="data" type="application/json">
<?php 
$data = array(
    "org" => 10,
    "items" => array("one", "two"),
    "backslash" => "\\",
    "slash" => "/",
    "single quote" => "'",
    "double quote" => "\"",
    "close tag" => "</script>"
);
echo json_encode($data, JSON_HEX_TAG);
?>
</script>
</head>
<body>
<script>
var data = JSON.parse(document.getElementById("data").innerHTML);

for(var key in data) {
    if(data.hasOwnProperty(key)) {
        var p = document.createElement("pre");
        document.getElementsByTagName("body")[0].appendChild(p);
        p.appendChild(document.createTextNode(data[key].toString()));
    }
}
</script>
</body>
</html>

The only thing that you need to be careful with is the string "</script>" inside your data, other than that it seems like a pretty good solution. — deceze
– deceze ♦, Commented Nov 2, 2016 at 9:55
Does this work, yes. I've done approaches like this many times over. You will not encounter a functionality issue using this method. Just an organization issue. It is not the recommended standard for developing maintainable code. Ajax would really be your best option. — DominicValenciana
– DominicValenciana, Commented Nov 2, 2016 at 15:18

Olaf Erlandsen · Accepted Answer · 2016-11-02 15:18:46Z

0

You can use variables:

in you php:

<?php
$data = array(
    "org" => 10,
    "items" => array("one", "two"),
    "backslash" => "\\",
    "slash" => "/",
    "single quote" => "'",
    "double quote" => "\"",
    "close tag" => "</script>"
);
?>

in you html:

<script>
    var data = <?php echo json_encode($data); ?>
</script>

And you can call you data with:

JSON.parse(data);

answered Nov 2, 2016 at 15:18

Olaf Erlandsen

6,07611 gold badges48 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Should I use <script> tag to pass data from PHP to JavaScript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related