Javascript Object Not Digging My PHP Var's Value (Has HTML in It)

Question

Hello,

I'm building a CMS for a client (Building on top of wordpress). I'm having an issue with some data I am returning from my database.

Basically I am building Javascript Objects from PHP data so that I can update certain areas of my site upon mouse click.

example (this would work fine):

<script language = "Javascript>
  var myObject = new Object();

        function updateDiv(id)
        {
           myObject.name = '<?php echo $valueName ?>'; // $varHeadline = "Bob"
           myObject.headline = '<?php echo $value_headline ?>'; // $varHeadline = "My Story"

           var div = document.getElementById(id).innerHTML = myObject.name + 
           '<br>' + myObject.headline';
        }
</script>

The problem comes up when the data I bring back from my database already has some html, or line breaks in it.

Example:

    echo $varHeadline;
    // returns <h1>This is my headline</h1>
   //            This is part of the value too.

So if I create a Javascript Object with that data:

function updateDiv(id)
{
  myObject.headline = '<?php echo $varHeadline; ?>';
  var div = document.getElementById(id).innerHTML = myObject.headline;
}

I get errors in my Javascript. I would like to continue populating my divs with Javascript Object data, but am unable to on account of some of the data containing HTML (or even single or double quotes for that matter).

I DO want to retain my HTML formatting (the <h1> tags and so forth) so using htmlspecialchars or strip_tags is out of the question. Is there any die hard way of storing returned HTML without killing Javascript? Thanks in advance. -J

Answer 1

json_encode() the string and take away the quotes:

myObject.headline = <?php echo json_encode($varHeadline;) ?>;

Of course, you could rewrite this as:

<script language = "Javascript>
  var myObject = <?php echo json_encode(array('name'=>$valueName,'headline'=>$value_headline)); ?>;

        function updateDiv(id)
        {
           var div = document.getElementById(id).innerHTML = myObject.name + 
           '<br>' + myObject.headline';
        }
</script>

edit: as noted in the comments below, always make sure you can trust the HTML you're placing on the page. If $valueName or $value_headline is coming from user input, this is a bad idea if you don't validate the HTML in some other fashion, you're open to XSS attacks and the like: http://en.wikipedia.org/wiki/Cross-site_scripting

Answer 2

When you "quote" server-side values being dropped into a page, the quoting has to be different when the context is Javascript code and not HTML. For HTML, of course, you do things like turn ampersands into "&" and less-than symbols into "<", and so on. Well inside Javascript strings, less-than and ampersand aren't a problem - they might be later if you're going to stuff the string into HTML, but right there at the time the Javascript parser is reading the string, there's no problem. What is a problem are quotes and characters outside the good ol' 7-bit ASCII range. (That's a generalization, but you see what I mean.)

I don't know PHP but it seems like there has to be some way to tell it NOT to perform the quoting appropriate for HTML/XML, and to instead do something to protect the characters that are special inside Javascript string constants.