Question

I’m trying to pass a php string to a javascript function. The php portion looks like this:

<?php
   foreach ($friends as $key => $friend) {
   // Extract the pieces of info we need from the requests above
   $id = assertNumeric(idx($friend, 'id'));
   $name = idx($friend, 'name');
   // Here we link each friend we display to their profile
   echo('
     <li>
     <a href="#" onclick="window.open(\'http://www.facebook.com/' . $id . '\')">
     <img src="https://graph.facebook.com/' . $id . '/picture?type=square" alt="' . $name . '">'. $name . '
    </a>
    <form>
    <input type="button" value="Meet" onclick="postMeet(. $name.)"/>
    </form>
    </li>');
    }
?>

The javascript function looks like this. It works perfectly if I pass either $key or $id to the function but not passing $name. Anyone got any ideas? I’m pretty new to php and javascript.

<script type="text/javascript">
function postMeet(key)
{
        var met = 'Met ';
        var body = met + ' '+ key;
        FB.api('/me/feed', 'post', { message: body }, function(response) {
               if (!response || response.error) {
               alert(response[0]);
               alert('Error occured');
               } else {
               alert('Post ID: ' + response.id);
               }
               });           
}
</script>

Answer 1

There are three things to consider in your echo statement:

1. $name is a string that you’re going to embed as a string literal inside the JavaScript in the onclick attribute of your HTML, so where you’re passing it into your postMeet function, you must put quotes around it. JavaScript allows string literals to be quoted with either ' or ", as long as they’re balanced. Since we’re quoting the onclick attribute with " (because HTML doesn’t allow '), easiest to use ' to delimit the JavaScript string. So: Put ' around it.

2. The postMeet call is inside an HTML attribute (onclick), which means that when the markup is being read, it’s read as HTML text. Consequently, you must ensure that any characters that are special to HTML (e.g., primarily < and &, plus in this case " because you’ve used " as the delimiter for your onclick attribute) are encoded correctly as <, &, and ". PHP provides the htmlspecialchars function to do that. Maybe you’re thinking “but $name will never have a < in it”. That’s how bugs show up. Get in the habit of fully encoding these things, and you won’t forget when you’re outputting something more interesting. Besides, people fill in all kinds of nonsense for the “name” field in databases.

3. Inside a JavaScript string literal, the backslash and whatever kind of quote you used to delimit the string (e.g., ' or ") must be escaped (with a backslash). So you have to consider what may be in $name or better yet, fully defend yourself. The string literal 'T.J. Crowder' is valid, but the string literal 'Gerard 't Hooft' results in a syntax error because the ' in 't Hooft is not escaped. It must be written either "Gerard 't Hooft" (delimiting with double quotes) or 'Gerard \'t Hooft' (escaping the single quote). PHP provides a handy function, addslashes, that will insert backslashes prior to ', ", \, and the null byte.

So putting that all together, we have to wrap some kind of quote around the variable’s value when we output it to postMeet, we have to encode special HTML characters, and we have to ensure quotes and such are escaped with backslashes:

//                +--- start string literal with single quote
//                |
//                vv
onclick="postMeet(\''. addslashes(htmlspecialchars($name)) .'\')"
//                     ^^^^^^^^^^ ^^^^^^^^^^^^^^^            ^^
//                          |            |                   |
//  escape ", ', and \ -----+            |                   |
//           encode special HTML chars --+                   |
//                    end literal with single quote ---------+

E.g.:

echo('
  <li>
  <a href="#" onclick="window.open(\'http://www.facebook.com/' . $id . '\')">
  <img src="https://graph.facebook.com/' . $id . '/picture?type=square" alt="' . $name . '">'. $name . '
 </a>
 <form>
 <input type="button" value="Meet" onclick="postMeet(\''. addslashes(htmlspecialchars($name)) .'\')"/>
 </form>
 </li>');

It’s important to remember the three layers of interpretation going on: PHP is interpreting your PHP code and outputting markup to an HTML page; the browser is interpreting the HTML markup, including the content of the onclick attribute; and the JavaScript interpreter interprets the string content of the onclick attribute (the browser passes it on when the click occurs), which must be valid JavaScript code.

Here’s a more isolated example that’s easy to copy and paste into a test page. Use “view source” on the test page to see what the browser saw, and of course click the div to see that everything worked correctly:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP Escape Test</title>
</head>
<body>
<?php
    $stuff = "Gerard 't Hooft says <<\"theoretical physics is FUN & a great way to aid humankind!\">>";
    echo('<div onclick="foo(\'' . addslashes(htmlspecialchars($stuff)) . '\')">Click me</div>');
?>
<script>
function foo(stuff) {
    alert(stuff);
} 
</script> 
</body>
</html>