Avoid XSS with an HTML tag like <pre>

Question

I have a simple webpage that takes query items and crafts them in to the page. Example URL:

http://quir.li/player.html?media=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D0VqTwnAuHws

The page then has the URL displayed somewhere in the page:

<span id="sourceUrlDisplay">http://www.youtube.com/watch?v=0VqTwnAuHws</span>

I feel that this makes the page vulnerable to XSS in case the page gets loaded with an URL containing something similar to

http://quir.li/player.html?media=<script>alert('test')</script>

I have found, that rendering the URL into a <pre> tag does not help. Is there a simple solution to this, like an HTML tag whose content really is not interpreted but just printed out?

Note: This question is somewhat similar to this one, but more general.

Answer 1

No, there is no such tag in HTML that would prevent XSS attacks, and it's impossible to make one. Let's assume that there was such a tag, say, <safe>. The attacker would only need to close it: </safe><script> malicious code </script><safe>.

The way to stop XSS in this specific case would be to escape special characters to their URL encoding counterparts, so that http://quir.li/player.html?media=<script>alert('test')</script> becomes http://quir.li/player.html?media=%3Cscript%3Ealert('test')%3C%2Fscript%3E.

Answer 2

You should escape special characters of HTML to remove their special meaning. For example, in PHP, htmlspecialchars() function is intended for such escaping.