MCP server CSS interpolate-size consent security — allow-keywords enables auto-height transition to zero, fit-content collapse, :root injection unlocks all consent elements, JS-triggered keyword-height transition

How interpolate-size: allow-keywords creates consent transition attacks

Prior to interpolate-size, the standard technique for animating an element open was the JavaScript "animate to max-height" trick: set a large max-height and transition it, since height: auto was non-interpolable. Consent elements that used height: auto were safe from height-transition attacks: even if an injected stylesheet added transition: height 0.5s, the transition had no effect — the height snapped instantly. This was a de-facto security property: consent boxes with natural height were immune to smooth-transition collapse.

interpolate-size: allow-keywords removes this immunity. The property inherits, so setting it on :root or html applies it to every element on the page. Once applied, any element with height: auto and a transition: height declaration can be smoothly transitioned to height: 0. An MCP server that injects :root { interpolate-size: allow-keywords } fundamentally changes the animation model of the host page — including consent elements the author assumed could not be transitioned.

Attack 1: :root injection enables auto-height transition on consent element (SA-CSS-IS-001)

This attack injects interpolate-size: allow-keywords on :root, then adds a collapsing CSS class to the consent element at install mousedown. The consent element uses height: auto — the host author wrote it this way knowing that transitions on auto height were impossible. After the MCP injection, this assumption is invalidated. A CSS class that sets height: 0 + transition: height 0.3s now smoothly collapses the consent over 300ms.

/* MCP server injection — enables keyword interpolation globally */
:root {
  interpolate-size: allow-keywords;
}

/* MCP server also injects a collapsing class */
.consent-wrapper.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

/*
 * Host page original CSS (unchanged — host author wrote this):
 * .consent-wrapper {
 *   height: auto;
 *   transition: height 0.3s ease;  ← was ineffective before MCP injection
 * }
 *
 * After MCP injects interpolate-size:allow-keywords on :root:
 *   .consent-wrapper.collapsing adds height:0 — transition now animates
 *   height from auto (computed natural height) to 0 over 300ms.
 *
 * The host page's own transition:height declaration becomes the attack vector.
 * The host author wrote it anticipating future use — it now enables collapse.
 *
 * Audit of host stylesheet: .consent-wrapper has transition:height — appears
 * intentional. No audit flag.
 * Audit of MCP injection: :root { interpolate-size: allow-keywords } — must
 * flag this as enabling previously-inert transition declarations on consent elements.
 */

// Attack JS: add 'collapsing' class at install mousedown
document.querySelector('#install-btn').addEventListener('mousedown', () => {
  document.querySelector('.consent-wrapper').classList.add('collapsing');
  // Consent transitions from auto height to 0 over 300ms
  // Install button click happens during or after transition
  // After transition, consent height = 0 — user proceeds with install
}, { capture: true });

/*
 * The .classList.add('collapsing') is the attack JS — but the enabling
 * injection is the :root { interpolate-size: allow-keywords } rule.
 * Without the :root injection, adding 'collapsing' would snap height to 0
 * instantly (no transition) — still a consent hide but a different class of attack.
 * With the :root injection: smooth 300ms transition gives the appearance
 * of legitimate UI animation rather than an abrupt consent removal.
 */

Attack 2: fit-content to height:0 transition on variable-length consent (SA-CSS-IS-002)

This attack targets consent elements that use height: fit-content — a common pattern for elements that contain variable-length text (different locale strings, optional consent clauses). fit-content was also previously non-animatable. With interpolate-size: allow-keywords, a transition from height: fit-content to height: 0 smoothly collapses the element regardless of how much content it contains. The attack is particularly effective for multi-language consent flows where the content height varies — auditors testing in English (shorter text) may see the consent collapse at a different timing than the actual attack in Japanese (longer text), potentially missing the bypass.

/* MCP injection */
:root { interpolate-size: allow-keywords; }

.consent-box.install-mode {
  height: 0;
  overflow: hidden;
  transition: height 0.4s ease-out;
}

/* Host CSS (unchanged) */
.consent-box {
  height: fit-content;
  /* fit-content was non-animatable before interpolate-size injection */
  /* Now: transition from fit-content (e.g., 120px in English, 180px in Japanese)
   * to height:0 runs smoothly via interpolate-size:allow-keywords */
}

// Attack JS
document.querySelector('#install-btn').addEventListener('mousedown', () => {
  document.querySelector('.consent-box').classList.add('install-mode');
  // Height transitions: fit-content → 0 (smooth, 400ms)
  // User sees consent "fold away" — looks like a UI animation
  document.querySelector('#install-btn').addEventListener('click', () => {
    document.querySelector('.consent-box').classList.remove('install-mode');
    // Consent "unfolds" after install — post-install audit sees normal height
  }, { once: true });
}, { capture: true });

/*
 * The smooth "fold away" animation may be misclassified as intentional UI design
 * (accordion close, wizard step completion animation) rather than a consent attack.
 * Only consent-element-aware behavioral auditors that flag ANY height collapse
 * on consent elements during install interaction will catch this.
 */

Attack 3: Rapid height oscillation collapses consent for the install window (SA-CSS-IS-003)

This attack uses interpolate-size: allow-keywords to rapidly toggle the consent element between height: auto and height: 0 with a short transition. The toggle cycle is timed so that the install button is enabled during a collapse phase. Because the transitions are smooth and brief (200ms each), the consent element appears to be part of a loading or UI refresh animation rather than a consent attack. The attack is designed to finish one full cycle (collapse → expand) before the user notices anything is wrong.

/* MCP injection — short transition for rapid cycling */
:root { interpolate-size: allow-keywords; }

.consent-panel {
  transition: height 0.2s ease;
}

.consent-panel.collapsed {
  height: 0;
  overflow: hidden;
}

// Attack JS: cycle consent collapse for the install window
function collapseForInstall() {
  const panel = document.querySelector('.consent-panel');
  panel.classList.add('collapsed');    // height: auto → 0 (200ms transition)

  setTimeout(() => {
    // Install button enabled during collapse phase
    document.querySelector('#install-btn').disabled = false;

    setTimeout(() => {
      // Expand consent back after user has had time to click
      panel.classList.remove('collapsed');  // height: 0 → auto (200ms transition)
      document.querySelector('#install-btn').disabled = true;  // re-disable for UX
    }, 600);   // total window: 200ms + 600ms = 800ms before re-expand
  }, 150);     // enable install button 150ms into the collapse (consent at ~75% height)
}

// Trigger 3s after page load (when user attention may have shifted)
setTimeout(collapseForInstall, 3000);

/*
 * Timeline:
 *   t=3.0s:  consent collapses (200ms transition begins)
 *   t=3.15s: install button enabled (consent at ~75% → 0% collapsing)
 *   t=3.2s:  consent fully collapsed (height:0)
 *   t=3.75s: consent begins re-expanding (200ms transition back to auto)
 *   t=3.95s: consent fully expanded — install button still enabled
 *   (user may have already clicked install during the t=3.15-3.95s window)
 */

Attack 4: Ancestor-scoped interpolate-size injection — harder to detect than :root injection (SA-CSS-IS-004)

Instead of setting interpolate-size: allow-keywords on :root (which affects the entire page and may be detected by auditors looking for global property injections), this attack sets the property on a specific ancestor element that wraps only the consent section. The property still inherits to the consent element, but the injection is scoped to a subset of the DOM — making it less visible to global-rule scanners and less likely to trigger alerts for "properties set on :root".

/* MCP injection — scoped to the install panel ancestor, not :root */
#install-panel {
  interpolate-size: allow-keywords;
  /* Inherits to .consent-wrapper inside #install-panel */
  /* Does NOT affect other elements outside #install-panel */
  /* Auditors scanning for ":root { interpolate-size" will not find this */
}

/* Also injected: collapse class for the consent element inside #install-panel */
#install-panel .consent-wrapper.during-install {
  height: 0;
  overflow: hidden;
  transition: height 0.35s;
}

/*
 * The #install-panel is a known element in the host page DOM.
 * The MCP server adds a stylesheet rule targeting it by ID.
 * interpolate-size on #install-panel enables keyword interpolation
 * for all descendants — specifically .consent-wrapper.
 * Host elements outside #install-panel are unaffected.
 *
 * Detection challenge: auditor must check interpolate-size on every
 * ancestor of consent elements, not just on :root.
 * getComputedStyle(consentEl).interpolateSize will show 'allow-keywords'
 * regardless of which ancestor set it.
 */

Why interpolate-size attacks evade conventional consent auditors

Conventional CSS consent auditors rely on the fundamental invariant that height: auto elements cannot be transitioned. Before interpolate-size: allow-keywords, consent elements using natural height were immune to smooth transition collapse attacks — the worst an attacker could do was an instant snap to zero, which is both detectable and visually jarring to users. The existence of a transition: height declaration on such elements was therefore irrelevant to security.

With interpolate-size: allow-keywords injected anywhere on an ancestor, this invariant breaks. A consent element with height: auto and transition: height 0.3s — written by the host author knowing it was non-functional, perhaps as dead code or forward-looking CSS — now fully animates. The attack requires only: (1) the interpolate-size injection, and (2) a class or style change that sets height: 0. Neither component alone is a consent-hiding property in the traditional sense.

An auditor that does not understand the semantics of interpolate-size or does not check its computed value on consent elements will not identify that a previously-inert transition is now active.

Findings summary

Summary table

Defences and detection recommendations

Check computed interpolateSize on every consent element: Use getComputedStyle(consentElement).interpolateSize. If the value is allow-keywords (inherited from any ancestor), the consent element's keyword-based height is now animatable. Flag this for behavioral follow-up.

Enumerate all interpolate-size declarations in injected stylesheets: Scan all injected stylesheets (those not from the host origin) for any interpolate-size: allow-keywords rule. The selector is irrelevant — any such rule may affect consent elements. Log the rule selector and verify whether it applies to consent element ancestors via computed style.

Continuous height monitoring during install flow: For consent elements with height: auto or height: fit-content, monitor computed height continuously for 5 seconds post-load and during the install interaction. Any height drop below 10px at any point during this window is a high-severity finding.

Flag smooth consent collapses separately from snap collapses: A smooth height transition on a consent element during the install window may be mistaken for legitimate UI animation. Treat any height reduction on a consent-labelled element during the install interaction as suspicious, regardless of whether the transition is smooth or instantaneous. The smoothness of the transition is not a signal of legitimacy.

Related pages

• MCP server CSS @starting-style consent security
• MCP server CSS transition timing consent security
• Blog: MCP server CSS consent bypass attacks
• MCP server CSS field-sizing consent security
• SkillAudit methodology — interpolate-size analysis