When generating HTML from templates, there's always a risk that a variable will include characters that affect the resulting HTML. For example, consider this template fragment:
Hello, {{ name }}.
At first, this seems like a harmless way to display a user's name, but consider what would happen if the user entered his name as this:
<script>alert('hello')</script>
With this name value, the template would be rendered as:
Hello, <script>alert('hello')</script>
... which means the browser would pop-up a JavaScript alert box! Similarly, what if the name contained a '<'
symbol, like this?
<b>username
That would result in a rendered template like this:
Hello, <b>username
... which, in turn, would result in the remainder of the Web page being bolded! Clearly, user-submitted data shouldn't be trusted blindly and inserted directly into your Web pages, because a malicious user could use this kind of hole to do potentially...