MCP server CSS inset-block and inset-inline security

Logical inset properties and their physical equivalents

Attack 1: inset-block-start:100% shifts consent below its own height

In horizontal writing modes, inset-block-start resolves to top. top:100% on an absolutely positioned element positions its top edge at 100% of its containing block's height — the element appears directly below the containing block, outside the visible area. inset-block-start:100% achieves the same result: the consent block is shifted fully below its container. In a position:relative container with overflow:hidden, the consent element is invisible.

/* Malicious injection — shifts consent below container */
.consent-container {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.consent-disclosure {
  position: absolute;
  inset-block-start: 100%;
  /* Resolves to: top: 100% (= 200px from container top) */
  /* Consent appears below the 200px container height — clipped */
  /* Physical scanner checking 'top' value sees nothing suspicious */
  /* 'top' is not set — only inset-block-start */
}

Attack 2: inset-inline-end:-9999px hides off logical-end edge

inset-inline-end:-9999px in LTR resolves to right:-9999px, pushing the element 9999px to the right of its positioned ancestor's right edge. In RTL it resolves to left:-9999px, pushing the element 9999px to the left. Either way the element is off-screen. This achieves the same result as the classic left:-9999px or right:-9999px tricks but uses the logical property name, which most scanners do not pattern-match against their off-screen detection rules.

/* Malicious injection — physically equivalent to right:-9999px in LTR */
.consent-disclosure {
  position: absolute;
  inset-inline-end: -9999px; /* → right:-9999px in LTR */
  /* Consent is 9999px off the right edge of the viewport */
  /* A scanner looking for 'right:-9999px' does NOT match this property name */
}

Attack 3: inset:0 with z-index:-1 places consent behind its parent background

The inset shorthand sets all four inset properties at once: inset:0 is equivalent to top:0; right:0; bottom:0; left:0, which stretches an absolutely positioned element to fill its containing block. This is a common layout pattern. The attack combines inset:0 with z-index:-1 to place the consent element behind the parent's background. The consent is still fully sized and in the correct position — but it is painted below the parent's background color. If the parent has any background (even the default white), the consent element is invisible.

/* Malicious injection — consent visible but painted below parent background */
.consent-container {
  position: relative;
  background: white; /* Any non-transparent background covers child with z-index:-1 */
}

.consent-disclosure {
  position: absolute;
  inset: 0;       /* Fills entire container — correct size and position */
  z-index: -1;    /* Painted below parent background → invisible */
  /* The element exists, has correct dimensions, and is "visible:visible" */
  /* getBoundingClientRect() returns non-zero values — hard to detect */
}

Attack 4: inset-block-end:0 with writing-mode:vertical-rl hides at right edge

Under writing-mode:vertical-rl, the block axis runs right-to-left. inset-block-end resolves to left in this writing mode (block-end is the left edge in vertical-rl). Setting inset-block-end:0 positions the element's logical block-end edge at the left boundary of the containing block. For a fixed-position consent notification injected by an MCP server, writing-mode:vertical-rl rotates the element's axes and inset-block-end:0 places it at the left edge of the screen — which in a writing-mode:vertical-rl context is the logical "end" of the block but the physical far-left, where no user looks for a consent notification.

/* Malicious injection — fixed notification hidden at left edge under vertical-rl */
.mcp-consent-notification {
  position: fixed;
  writing-mode: vertical-rl;  /* Block axis now runs right-to-left */
  inset-block-end: 0;         /* → resolves to: left: 0 in vertical-rl */
  /* Notification is pinned to the left edge of the viewport */
  /* Text is rotated 90 degrees (vertical-rl effect on horizontal text) */
  /* User expects notifications at bottom-right or center — never far-left, sideways */
}

SkillAudit findings for CSS inset logical position attacks

Safe patterns: use physical positioning for consent elements

/* Safe: physical positioning properties on consent elements */
/* Do NOT use logical inset properties on consent UI */
.consent-disclosure {
  position: relative; /* not absolute */
  /* No inset-* properties */
  top: auto; left: auto; right: auto; bottom: auto; /* explicit resets */
}

/* If you need absolute positioning for a consent modal overlay: */
.consent-modal-overlay {
  position: fixed;
  top: 0;      /* physical, not inset-block-start */
  left: 0;     /* physical, not inset-inline-start */
  right: 0;    /* physical, not inset-inline-end */
  bottom: 0;   /* physical, not inset-block-end */
  /* No writing-mode override — use default horizontal LTR for consent content */
  z-index: 9999; /* Must be above all other content, not below (not z-index:-1) */
}

Related security references

• CSS logical properties full guide — margin-inline, border-inline, padding-block attacks
• CSS order property — consent step reordering without flex-flow
• CSS rotate property — element rotation to make consent unreadable
• CSS dynamic viewport units — fixed consent collapse on mobile browsers