MCP server Web Animations API consent security

The Web Animations API allows JavaScript to apply CSS animations directly to DOM elements via element.animate(keyframes, options) without any corresponding CSS animation rule or @keyframes declaration in the stylesheet. Because the animation exists only as a runtime JavaScript call, static analysis of CSS stylesheets, inline styles, and SVG markup finds no attack signatures. The consent text's HTML source, computed styles at parse time, and initial rendered state are all normal. The attack activates at runtime — a color fade to background color, a precisely delayed opacity collapse, or an immediate finish call on a reveal animation — and is invisible to tools that do not perform JavaScript execution analysis. This page covers four Web Animations API consent attack patterns and the JavaScript analysis methods required to detect them.

Finding SA-WANM-001: Element.animate() color fade to background color starting 100ms after render

// Consent text element is in the DOM with normal color styling
const consentEl = document.getElementById('consentText');

// ATTACK: fade color to background starting 100ms after render
// Static CSS scan reads color: #1f2937 (readable)
// After 6s runtime: color ≈ #cfd2d5 — WCAG contrast 1.4:1 (unreadable)
// After 8s: color = #f9fafb = page background (invisible)
consentEl.animate(
  [
    { color: '#1f2937' },   // start: readable dark text
    { color: '#f9fafb' }    // end: background color (invisible)
  ],
  {
    delay: 100,             // starts 100ms after call
    duration: 8000,         // fades over 8 seconds
    fill: 'forwards',       // preserves final color after animation ends
    easing: 'ease-in'       // accelerates fade — readable for first ~3s
  }
);

Finding SA-WANM-002: delay calibrated to expected click timestamp — opacity collapse at interaction time

// ATTACK: opacity collapse calibrated to expected click time
// User study median time-to-click: 4.2 seconds
// Animation delay: 4000ms, duration: 50ms → collapses at 4.0–4.05s
const consentEl = document.getElementById('consentText');

consentEl.animate(
  [
    { opacity: 1 },   // start: fully visible
    { opacity: 0 }    // end: invisible
  ],
  {
    delay: 4000,      // calibrated to median click time
    duration: 50,     // rapid collapse — 50ms (imperceptible)
    fill: 'forwards'  // remains invisible after animation
  }
);

// Consent recording fires on click event;
// text collapsed 200ms before click in median case
document.getElementById('agreeBtn').addEventListener('click', () => {
  recordConsent();
});

Finding SA-WANM-003: getAnimations().finish() collapses in-progress consent-reveal animation to hidden end state

/* CSS: consent text has base opacity 0; animation reveals it over 2s */
#consentText {
  opacity: 0;
  animation: reveal 2s ease forwards;
}
@keyframes reveal {
  from { opacity: 0 }
  to { opacity: 1 }
}

<script>
// ATTACK: finish() immediately after render
// With fill:'forwards', finish() seeks to end = opacity:1 → VISIBLE (benign)
// With fill:'none' (default), finish() ends animation → base opacity:0 reasserts → INVISIBLE
// Attacker overrides fill to 'none' or uses a separate animate() call:
window.addEventListener('DOMContentLoaded', () => {
  const el = document.getElementById('consentText');
  // Override the CSS animation fill to 'none' via JS
  el.getAnimations().forEach(a => {
    a.effect.updateTiming({ fill: 'none' }); // Remove the forwards fill
    a.finish();                               // Collapse animation → base opacity:0 reasserts
  });
});
</script>

Finding SA-WANM-004: discrete display:none transition via transition-behavior:allow-discrete

<style>
  /* Allow discrete properties (including display) to be animated */
  #consentText {
    transition-behavior: allow-discrete;
    display: block;
  }
</style>

<script>
// ATTACK: animate display from block to none — element removed from layout and a11y tree
// Requires transition-behavior: allow-discrete (or CSS @starting-style)
// After 3s: display: none reasserted via fill:forwards
// Static CSS shows display: block; JS animation is the attack
const consentEl = document.getElementById('consentText');

consentEl.animate(
  [
    { display: 'block' },  // start: visible
    { display: 'none' }    // end: removed from layout and accessibility tree
  ],
  {
    duration: 3000,        // collapses over 3 seconds
    fill: 'forwards',      // persists display:none after animation
    easing: 'step-end'     // discrete: snaps to none at animation end
  }
);
</script>

Why static CSS/SVG analysis misses Web Animations API attacks