Javascript echo via PHP

Question

Hello ! Here is my code :

echo "<br><font face='Segoe UI' color='blue'><a href='#' onClick='javascript:alert(".$nam.");return false;'>".$nam."</a></font>";

I'd like to know if there's any syntax error in the above code. I don't think alert() is being called.

Thanks!

Answer 1

Here:

javascript:alert(".$nam.");return false;

If $nam is (for example) this string:

string(4) "text"

PHP will echo the above JavaScript into this:

javascript:alert(text);return false;

That tells the browser to alert the value of a JavaScript variable called text. If it can't find such a variable, the alert() doesn't execute. It's not a syntax error per se, but JavaScript treats it differently.

If you want to echo the contents of $nam as a JavaScript string, you need to wrap it in quotes when calling alert() (I use single quotes here, but they are HTML entities ' because you already use single quotes to delimit your HTML attributes scratch that, escaped double quotes work better):

javascript:alert(\"".$nam."\");return false;

That'll be seen by the browser as:

javascript:alert("text");return false;

Answer 2

alert() takes a string as an argument. Escape double quotes to do this: \"

echo "<br><font face='Segoe UI' color='blue'><a href='#' onClick='javascript:alert(\"".$nam."\");return false;'>".$nam."</a></font>";

Answer 3

Let us say you have

$nam = 'test';
... your code

This prints out:

'javascript:alert(test); return false;'

That is, it is trying to print out a javascript variable e.g. "test" that was never initialized.

You need to have:

'javascript:alert(\"".$nam."\"); return false;'

Now several recommendations:

Get a good Javascript debugger such as Firefox's Web Developer toolbar or firebug. You could see the issue immediately.

Don't use the 'javascript:' decleration. It is deprecated and unnecessary.

Use onclick, not onClick. The font tag is deprecated as are the face and color attributes. Close your tags (<br /> vs <br>).

Don't infuse javascript, php, and html. I highly recommend you use a template.

If you are using weak quotes (", not ') php will interpolate variables within the quotes. You don't have to concatenate. These are equivalent:

echo "javascript:alert('".$nam."');";
echo "javascript:alert('$nam');";

Answer 4

In addition to what tandu said:

echo "<br><font face='Segoe UI' color='blue'><a href='#' onClick='javascript:alert(".$nam.");return false;'>".$nam."</a></font>";

You're really making your life hard here by mixing together PHP, HTML, styling, scripting, and a string literal inside JavaScript.

Each time you put one kind of string inside another kind of string you need a type of escaping, otherwise the string can break out of its context. For example consider what happens if $nam contains a single-quote or double-quote. In a situation where the data you are dealing with is user-submitted, that's not just a bug, it's an XSS security hole.

Every time you insert a text string into HTML, you need to use htmlspecialchars(). And every time you insert a text string into a JavaScript literal, you need to backslash-escape it. addslashes() is almost but not quite good enough for that. json_encode() is much better as it can convert any suitable PHP value into a JavaScript literal, not just strings, and does is as a complete literal including the quotes so you don't have to add them. So:

echo "<br><font face='Segoe UI' color='blue'><a href='#' onClick='alert(".htmlspecialchars(json_encode($nam)).");return false;'>".htmlspecialchars($nam)."</a></font>";

This is of course an unreadable mess. Let's separate each layer to simplify, and do it using PHP itself rather than trying to hack around with HTML strings. PHP is a templating language, you might as well use it!

<style type="text/css">
    #alerter {
        display: block;
        color: blue;
        font-family: "Segoe UI", sans-serif;
    }
</style>

...

<a id="alerter" href="#">
    <?php echo htmlspecialchars($nam); ?>
</a>

...

<script type="text/javascript">
    document.getElementById('alerter').onclick= function() {
        alert(<?php echo json_encode($nam); ?>);
        return false;
    };
</script>

This is much easier to cope with and easily extensible to style and script lots of similar links at once. You can grab the value of $nam from the DOM, too, to avoid having to state it twice, once in HTML and once in JS. You can also define functions with short names to avoid having to type htmlspecialchars() and json_encode() so much.

<?php
    function h($s) {
        echo htmlspecialchars($s, ENT_QUOTES, 'utf8');
    }
?>
<style type="text/css">
    .alerter {
        display: block;
        color: blue;
        font-family: "Segoe UI", sans-serif;
    }
</style>

...

<a class="alerter" href="#"><?php h($nam); ?></a>
<a class="alerter" href="#"><?php h($nam2); ?></a>

...

<script type="text/javascript">
    for (var i= document.links.length; i-->0;)
        if (document.links[0].className==='alerter')
            document.links[0].onclick= function() {
                alert(this.firstChild.data);
                return false;
            };
</script>

This is an example of ‘unobtrusive scripting’.