Question

I am dynamically creating an anchor that calls a javascript function. It works with one string parameter but not with two. I believe I am not escaping the quotes around the parameters correctly. In search for an answer I came across the following

onclick="alert('<?echo $row['username']?>')"  

and the next one I found left me completely baffled

echo('<button type="button" id="button'.$ctr.'"onClick="showMapsInfo(\''.str_replace("'", "\\'", $maps_name).'\', \''.str_replace("'", "\\'", $ctr).'\');"><img src="img/maps_logo.gif"></button><br/>');

If someone would please

1. Explain why the single quotes around username do not have to be escaped?

2. Where there is a “dummies” write up on escaping characters so I could try to decipher the second example.

Answer 1

Let’s examine your first example

onclick="alert('<?echo $row['username']?>')" 

The important part here is, that everything outside of <? … ?> is pure HTML and never looked at by the PHP interpreter. Therefore, the only part that is relevant for PHP is the code inside <? … ?>, namely echo $row['username']. Here, one does not need to do any escaping.

Your second example, in contrast

echo('<button type="button" id="button'.$ctr.'"onClick="showMapsInfo(\''.str_replace("'", "\\'", $maps_name).'\', \''.str_replace("'", "\\'", $ctr).'\');"><img src="img/maps_logo.gif"></button><br/>');

is written purely in PHP, no surrounding HTML. Therefore, you have to be careful with the quotes. Let’s build this up from scratch to see what happens here. When you build something like this, you would probably start with

echo('<button type="button" id="button1" onClick="showMapsInfo(\'...\');"><img src="img/maps_logo.gif"></button><br/>');

Because the single quotes were already used as string delimiters, they must be escaped inside the string with \'. Now for the part inside the javascript function. Put even simpler, the above code boils down to

echo('showMapsInfo(\'...\');');

which results in

showMapsInfo('...');

when we want to insert some dynamic parts instead of the ‘…’ part, we need to end the string with ' and concatenate it back together with .. Suppose you wanted to insert a variable $foobar in there, then you would write:

echo('showMapsInfo(\''.$foobar.'\');');

which results in

showMapsInfo('<VALUE OF $foobar>');

Your example does not insert $foobar into this string, but rather the following expression:

str_replace("'", "\\'", $maps_name).'\', \''.str_replace("'", "\\'", $ctr)

Which uses str_replace in order to again escape the content, but with a little twist: It is not escaped for PHP, but for the resulting Javascript! Every single quote ' becomes an escaped single quote \' in the output, but you need to write \\' because the backslash needs to be escaped itself, in order to produce a backslash as output.