If we print user-submitted values, we might be vulnerable to XSS attacks. Since we are not printing any user-submitted values, we are safe. Safety before everything!

Enter your username:

Enter your username:
  <input type="text" id="input"/>
  <div id="screen"></div>

document.querySelector('#input').addEventListener('keyup', function(e) {
  if (e.keyCode === 13) {
    const username = document.querySelector('#input').value;
    const tagString = `<div data-user=${username}>😉 Sorry, hacking not allowed!</div>`;
    const range = document.createRange();
    const documentFragment = range.createContextualFragment(tagString);
#input {
  font-size: 16px;
  height: 26px;
  width: 100%;
  margin-bottom: 10px;
  padding: 20px;
.applet-html {
  padding: 20px;
.applet {
  margin-bottom: 20px;

Takeaways and notes#

  • Not printing user-submitted input to the screen takes away one XSS attack surface area
  • However, if you are writing the user-submitted input to the DOM, you could still be vulnerable to XSS attacks
  • Eg: ><script>alert(1)</script>
Tweet this | Share on LinkedIn |