HTML Injection is a common and very serious bug, in which a user's input is directly inserted into the page source without any sanitization or validation.
In this example (you can view the source code here, or press F12)
the text area #input
directly updates the innerHTML
of #result
.
Here are some examples that you can try, just by copying and pasting. See what shows up in your browser inspector!
<b>this text should be bold</b>
<h1>this text is really big
<script>alert("we just ran some javascript")</script>
<script>document.location="https://www.youtube.com/watch?v=dQw4w9WgXcQ"</script>
<style>* { font-family: "Comic Sans MS" }</style><h2>We can do more than just HTML and JS</h2>
Your text will go here!
Be creative when looking for ideas. If you'd like some hints, consult a "big list of naughty strings", which are some known inputs which are likely to break things.
In a static page like this, where changes that affect one client won't affect others, there's not much risk. However, if this injection came from the result of dynamic pages (stored in a database), it could affect other users too. This could result in any number of problems, including a serious risk of leaking user information.