CSS Motion Path Attacks as MCP Consent Bypass: offset-path, offset-distance, offset-position, offset-rotate

A ray path in CSS Motion Path points from the element's initial position in the direction specified by the angle. ray(0deg) points directly to the right (CSS angles use the same convention as clock hands: 0deg = up, 90deg = right — but ray() follows the SVG coordinate convention: 0deg = right). With offset-distance: 200vw, the element is placed 200 viewport-widths along the rightward ray — completely off-screen in any realistic viewport.

Attack code

.consent-dialog {
  /* positions the dialog along a rightward ray, 200vw from its normal position */
  offset-path: ray(0deg);
  offset-distance: 200vw;
  /* getComputedStyle(el).transform returns 'none' */
  /* getComputedStyle(el).offsetPath returns 'ray(0deg)' */
  /* getBoundingClientRect().left > window.innerWidth * 200 */
}

The element is fully outside the viewport but remains in the DOM with display:block, visibility:visible, opacity:1, and non-empty textContent. Its getBoundingClientRect() reports a left value far exceeding window.innerWidth. Every check except BCR position passes. A detector that gates BCR checks on a transform === 'none' pre-condition incorrectly assumes no positional attack is active and skips the BCR check.

Detection

function checkMotionPathOffViewport(el) {
  const cs = getComputedStyle(el);
  const offsetPath = cs.offsetPath || cs.motionPath;
  if (!offsetPath || offsetPath === 'none') return null;

  // motion path is active — always check BCR regardless of transform
  const bcr = el.getBoundingClientRect();
  const vw = window.innerWidth;
  const vh = window.innerHeight;
  if (bcr.right < 0 || bcr.left > vw || bcr.bottom < 0 || bcr.top > vh) {
    return {
      vuln: 'SA-CSS-MOTP-001',
      detail: `offset-path active; BCR off-viewport: left=${bcr.left}, top=${bcr.top}`
    };
  }
  return null;
}

ray(180deg) in the SVG coordinate system points downward (180deg = south). With offset-distance: 200vh, the element is placed 200 viewport-heights below its containing block's initial position. Like the horizontal variant, getComputedStyle(el).transform returns 'none'. The BCR top value exceeds window.innerHeight × 200. This variant is particularly hard to catch in scroll-position based detectors — the element is far below, which might appear similar to an element that simply requires scrolling. The key difference: in a modal overlay or fixed-position consent dialog, vertical off-screen positioning via motion path is never legitimate.

.consent-text {
  offset-path: ray(180deg);   /* SVG 180deg = downward */
  offset-distance: 200vh;     /* 200 viewport-heights below origin */
  /* transform: 'none'        — standard transform check passes */
  /* BCR.top ≈ window.innerHeight * 200 */
}
/* if consent is in a fixed-position dialog, it will never scroll into view */

For fixed-position consent containers (common in modal overlays), the viewport-relative BCR is the definitive check. A consent element with position: fixed on its ancestor and a BCR top value greater than window.innerHeight is definitively off-screen and inaccessible, regardless of scrolling.

The path() function in offset-path accepts an SVG path data string. The element travels along that path, with offset-distance: 100% meaning the element is at the path's end point. An SVG path M 0 0 L 5000 0 ends at coordinate (5000, 0) — 5000 CSS pixels to the right. The coordinate system is relative to the element's containing block, so if the containing block is at viewport origin, the consent element ends up 5000px off-screen to the right.

.consent-text {
  /* SVG path ending 5000px right of containing block origin */
  offset-path: path('M 0 0 L 5000 0');
  offset-distance: 100%;      /* element placed at path end point (5000, 0) */
  /* getComputedStyle(el).transform: 'none' */
}

The path() function's argument string appears in getComputedStyle(el).offsetPath. A detector that checks for large coordinate values in the path data catches this variant. The simplest heuristic: if offsetPath contains path(, extract the path data string and scan for coordinate values (numbers following M, L, C, Q, A commands) greater than max(window.innerWidth, window.innerHeight) × 2.

Shape reference variant

CSS Motion Path Level 2 also allows shape references in offset-path: circle(100% at center), ellipse(200vw 200vh at center). At offset-distance: 100%, a circle(200vw at center) path places the element 200vw to the right of center along the circle perimeter — again, off-screen with transform: 'none'.

.consent-text {
  /* circle 200vw radius; at 100% distance, element is 200vw right of center */
  offset-path: circle(200vw at center);
  offset-distance: 25%;   /* 0% = top, 25% = right, 50% = bottom, 75% = left */
  /* BCR.left ≈ window.innerWidth * 200 */
  /* transform: 'none' */
}

offset-rotate controls the rotational orientation of an element as it travels along its path. With offset-path: path('M 0 0') (a degenerate path with zero length), the element stays at its normal flow position — but with a fixed offset-rotate: 90deg, the element is rotated 90 degrees clockwise. The consent text appears as a column of sideways characters. Critically, this rotation is applied by the motion path system, not by the CSS transform system. getComputedStyle(el).transform returns 'none'.

The BCR reveals the rotation indirectly: the reported width and height are swapped relative to the element's intrinsic layout dimensions. A 400px-wide × 80px-tall consent box appears as 80px-wide × 400px-tall in BCR after 90° rotation. This width/height inversion is a reliable detection signal for 90° motion path rotation attacks.

.consent-text {
  /* zero-length path: element stays at flow position */
  offset-path: path('M 0 0');
  /* 90deg rotation — text is sideways, unreadable */
  offset-rotate: 90deg;
  /* getComputedStyle(el).transform: 'none' */
  /* getComputedStyle(el).offsetRotate: '90deg' (or '90.00deg') */
}

/* Detection: check offsetRotate for fixed angles beyond readable range */
function checkMotionPathRotation(el) {
  const cs = getComputedStyle(el);
  if (!cs.offsetPath || cs.offsetPath === 'none') return null;

  const rotStr = cs.offsetRotate || '';
  if (rotStr === 'auto' || rotStr === 'auto reverse') return null;

  // parse angle value from string like '90deg' or '45.5deg'
  const angleMatch = rotStr.match(/([-\d.]+)deg/);
  if (!angleMatch) return null;
  const angle = Math.abs(parseFloat(angleMatch[1]) % 360);
  const normalizedAngle = angle > 180 ? 360 - angle : angle;

  if (normalizedAngle > 30 && normalizedAngle < 330) {
    return {
      vuln: 'SA-CSS-MOTP-004',
      detail: `offset-rotate: ${rotStr} — text rotated ${normalizedAngle}° by motion path system; transform: 'none'`
    };
  }
  return null;
}

CSS Motion Path Level 2 integrates with scroll-timeline and other CSS animation features. An animation targeting offset-distance can smoothly displace an element along its path. An attacker preloads a path starting at the consent dialog's position and ending 200vw off-screen, then triggers an animation that runs over 500ms. If this animation starts at the same time as a mousedown event — either via a CSS animation with animation-play-state: paused that is toggled to running on mousedown, or via JS setting the animation directly — the consent dialog begins to slide off-screen in the click frame. By the time the click event fires, the consent is partially or fully off-screen.

@keyframes consent-slide-off {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

.consent-text {
  offset-path: ray(0deg);        /* rightward ray */
  offset-distance: 0%;           /* starts at normal position */
  /* paused at load — transform: 'none' at static audit time */
  animation: consent-slide-off 500ms ease-in forwards;
  animation-play-state: paused;
}

/* at mousedown: */
document.getElementById('install-btn').addEventListener('mousedown', () => {
  document.querySelector('.consent-text').style.animationPlayState = 'running';
  /* consent slides 200vw right over 500ms; click fires before animation completes */
});

/* Detection: check for paused animations on offsetDistance */
function checkMotionPathAnimation(el) {
  const cs = getComputedStyle(el);
  const animName = cs.animationName;
  const animDuration = cs.animationDuration;
  const playState = cs.animationPlayState;

  if (cs.offsetPath && cs.offsetPath !== 'none') {
    if (playState === 'paused' && animDuration !== '0s') {
      return {
        vuln: 'SA-CSS-MOTP-005',
        detail: `motion path active with paused animation '${animName}' — may fire on mousedown`
      };
    }
  }
  return null;
}

The most evasion-resistant form of the motion path attack combines runtime property injection with CSS transitions. At page load, the consent element has no motion path properties — a static audit finds nothing suspicious. The element is positioned normally. A transition: offset-distance 400ms ease-in is declared at load time — this looks like an animation performance optimization, which is common in UI code.

At mousedown, JS sets el.style.offsetPath = 'ray(0deg)' and el.style.offsetDistance = '200vw' inline. The browser evaluates the transition: the previous value of offset-distance was implicitly 0% (initial), and the new value is 200vw. The transition fires immediately and the element begins sliding rightward. The click event fires approximately 100ms into a 400ms transition — the consent is already 50% off-screen when the install action executes.

/* Declared at load time — looks like UI animation prep */
.consent-dialog {
  transition: offset-distance 400ms ease-in;
}

/* At mousedown (JS): */
installBtn.addEventListener('mousedown', () => {
  consentEl.style.offsetPath = 'ray(0deg)';
  consentEl.style.offsetDistance = '200vw';
  /* transition: offset-distance transitions from 0% to 200vw over 400ms */
  /* click fires at ~100ms — consent is 25% off-screen already */
});

/* Static audit: no offset-path at load time. animationName: 'none'. Clean. */

/* Detection: MutationObserver watching for inline style changes on consent element */
new MutationObserver((mutations) => {
  for (const m of mutations) {
    const el = m.target;
    const cs = getComputedStyle(el);
    if (cs.offsetPath && cs.offsetPath !== 'none') {
      flagTampering('SA-CSS-MOTP-006');
      installBtn.disabled = true;
    }
  }
}).observe(consentEl, {
  attributes: true,
  attributeFilter: ['style']
});

The same pattern applies to CSS custom properties: a var(--offset-dist) in the offset-distance value, with JS setting the custom property value on the document root at mousedown. The MutationObserver must watch both inline style changes and document root style changes to catch this variant.