auth0-guestblog-trustedtypes-xss/index.html

<html>

<head>
  <!-- Enabling Trusted Types -->
  <meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'">

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Trusted Types Demo</h1>

  <label for="taData" class="label">The (malicious) data to render</label>
  <textarea id="taData" class="element"></textarea>
  <button id="btnRender" class="element">Render data</button>

  <label for="divRender" class="label mt-4">The <code>div</code> with the rendered data</label>
  <div id="divRender" class="element"></div>

  <script>
    const initialData = `Hello!<img src="none" onerror="alert('This data has become code!')">`;

      document.addEventListener("DOMContentLoaded", () => {
        document.getElementById("taData").value = initialData;
        document.getElementById("btnRender").addEventListener("click", render);
      });

      function render() {
        let data = document.getElementById("taData").value;
        let div = document.getElementById("divRender");

        console.log(`Rendering data in the div: ${data}`);

        div.innerHTML = data;
      }
  </script>
</body>

</html>