Escaping string before assigning to innerHTML echoed by PHP

Question

I'm encountering a problem involving escaping character that I think it's not simple at all. If this is done in javascript, nothing to say but the context is using echo command (in PHP) to write javascript code like this:

echo "<script>document.getElementById('spanID').innerHTML=\"$x\"</script>";

$x is a variable in PHP environment, which can contain both single and double quotes. What I do here is: 1. Keep the $x not change, and if $x contains any double quote, the above code won't work, the text echoed may look like:

<script>document.getElementById('spanID').innerHTML="leftside"rightside"</script>;

I supposed $x = leftside"rightside, and you can see it surely won't work.

1. Escape the double quotes in $x (change all " to

   "

   ), then the text echoed may look like this:

   document.getElementById('spanID').innerHTML="leftside

   "

   rightside";

The

"

won't be converted to " when it is assigned to innerHTML attribute of a Span (for e.g), so instead of my want, the innerHTML of my SPAN should be leftside"rightside, it will be leftside

"

rightside.

If I change the " to ' in the original echo, like this:

echo "<script>document.getElementById('spanID').innerHTML='$x'</script>";

It is the same because $x here can contain both single and double quotes.

I don't find out any other ways to escape quotes in this case. Could you please help me out?

Thanks!

Answer 1

You need to put between the quotes a string that is a valid string of JavaScript containing valid (and safe) HTML.

Your best option is to not use innerHTML and instead use document.createTextNode which means you only need to slash-escape the content.

Otherwise, you need to HTML escape, then slash escape the content. For correctness, your slash-escaping function should escape at least double-quotes, backslashes, and all JavaScript newlines (U+A, U+D, U+2028, U+2029). I believe PHP's addslashes does not handle U+2028 or U+2029 by default but How to escape string from PHP for javascript? has some alternatives.

To put it all together:

$x_escaped = json_encode($x, JSON_HEX_TAG);

echo "<script>document.getElementById('spanID').appendChild(document.createTextNode($x_escaped))</script>"

should do it. The JSON_HEX_TAG makes sure that $x_escaped will not contain </script> or any other content that prematurely ends your script tag. </script> will instead become \u003c/script\u003e.