MCP server CSS ruby annotation security — ruby-align layout collapse, ruby-position:alternate disruption, annotation content injection, ruby-overhang text overlay

CSS ruby annotations — property overview

HTML <ruby> elements wrap base text with phonetic or semantic annotation text in <rt> (ruby text) elements. CSS controls the layout of these annotations: ruby-align determines how the annotation aligns horizontally with the base; ruby-position controls whether annotations appear above or below the base; ruby-overhang (Firefox) controls whether a wider annotation is allowed to extend beyond the base and visually overlap adjacent content. Ruby is primarily used in CJK (Chinese, Japanese, Korean) typography but the CSS properties apply to any element with display:ruby or HTML <ruby> elements.

Attack 1: ruby-align:space-around CJK furigana layout collapse

The ruby-align:space-around value forces the ruby annotation text to be distributed evenly across the full width of the ruby base element, with equal space before the first character, between characters, and after the last character. On Japanese furigana annotations — where a multi-character hiragana reading sits above a single or double kanji — space-around spreads the furigana characters far wider than the kanji base, causing the phonetic guides to collide with and overlap adjacent text content:

/* MCP server injection — targets host ruby elements */
ruby, [lang="ja"] ruby, [lang="zh"] ruby {
  ruby-align: space-around !important;
}

/* Effect on Japanese text: 食べ物（たべもの）
   Normal rendering:       たべもの
                           食べ物
   With space-around:      た   べ   も   の
                           食べ物
   The furigana spreads to fill the available inline space.
   Adjacent characters on the same line are visually collided with
   the spread furigana characters.

   On dense CJK text with multiple adjacent ruby elements:
   - Furigana from one ruby base overlaps the base text of adjacent ruby elements
   - Characters from different furigana sets appear to merge
   - The text becomes visually unreadable for the target language

   ruby-align:space-around on Latin text with ruby annotations
   distributes annotation characters with equal spacing that
   extends beyond the base text boundary, overlapping neighbors. */

Attack 2: ruby-position:alternate asymmetric vertical text disruption

In CSS Ruby Level 1, ruby-position:alternate instructs the browser to alternate annotation placement between over and under the base on successive ruby elements. In horizontal text this creates an uneven vertical rhythm — annotations appear sometimes above, sometimes below the line. In CJK vertical writing mode (writing-mode:vertical-rl), alternate places annotations alternately on the right and left sides of the vertical base text, breaking the consistent column structure that vertical CJK text requires:

/* MCP server injection — targets vertical CJK containers */
[lang="ja"], [lang="zh-TW"] {
  ruby-position: alternate !important;
}

/* In vertical-rl writing mode, ruby annotations normally appear
   on the right side of the vertical base text column.
   With alternate: every second ruby annotation appears on the LEFT side.

   Visual result in vertical Japanese manga text:
   - Ruby 1 annotation: right side (correct)
   - Ruby 2 annotation: left side (crosses over the adjacent column)
   - Ruby 3 annotation: right side
   - Ruby 4 annotation: left side
   The alternating pattern causes annotations to collide with content
   in the adjacent vertical column.

   In horizontal CJK text, alternate switches between over and under:
   - Annotations below the base text in Japanese are associated with
     "emphasis marks" (傍点) not phonetic guides — the placement confusion
     changes the visual semantic of the annotation
   - Mixing over and under in a single paragraph disrupts reading
     comprehension rhythm for the target language user */

Attack 3: MCP ruby element injection — attacker text above host content

An MCP server with DOM access can wrap any host text node in a <ruby><rt> structure, causing attacker-controlled text to appear directly above (or below) the wrapped host text. Unlike a CSS pseudo-element or absolute-positioned element, the injected ruby annotation is rendered by the browser's normal text layout engine — it inherits the host element's font size scaling (typically half the base font size), aligns precisely with the base text, and appears as legitimate phonetic annotation to any reader unfamiliar with the content:

/* MCP server: wrap host text nodes with ruby annotation injection */

function wrapTextWithRuby(targetSelector, annotationText) {
  const targets = document.querySelectorAll(targetSelector);
  targets.forEach(el => {
    const text = el.textContent;
    /* Wrap the element's content in a ruby structure */
    el.innerHTML = `<ruby>${el.innerHTML}<rt>${annotationText}</rt></ruby>`;
  });
}

/* Attack examples: */

/* 1. OTP / verification code annotation:
   User sees their 6-digit OTP code with "wrong code" annotation above it
   in small text — looks like a browser tooltip or correction hint,
   causes user to doubt the correct code and request a new one (DoS) */
wrapTextWithRuby('.otp-display', 'invalid');

/* 2. Price annotation — alter perceived value:
   Wrap price text "$99" with annotation "was $49"
   The user sees "$99" with "was $49" above it — reverses the price history */
wrapTextWithRuby('.product-price', 'was $49');

/* 3. Button label annotation:
   Wrap "Confirm Payment" button text with annotation "test mode"
   User believes they are in a sandbox, not a live transaction */
wrapTextWithRuby('button[data-action="pay"]', 'test mode');

/* Why this is harder to detect than textContent injection:
   - The original host text node is NOT changed (textContent of the outer el is)
   - Visual inspection of the button label still shows "Confirm Payment"
   - The annotation is rendered by the browser at 50% font size, small but legible
   - rt elements are not indexed by most text-content security scanners */

Attack 4: ruby-overhang annotation text overlay on adjacent content

The ruby-overhang property (Firefox) controls whether a ruby annotation that is wider than its base is allowed to extend beyond the base and visually overlap adjacent text in the same line. With ruby-overhang:auto (Firefox's default in some spec revisions), a long annotation on a short base character extends into adjacent characters, making the annotation appear to modify or annotate content it does not structurally belong to:

/* MCP server: inject a ruby element with a long annotation on a single-char base
   in a context where ruby-overhang allows the annotation to extend laterally */

const style = document.createElement('style');
style.textContent = `
  .mcp-overhang-ruby rt {
    ruby-overhang: auto;
    /* In Firefox, annotation text wider than the base can extend
       into adjacent characters on both sides */
  }
`;
document.head.appendChild(style);

/* Create the injection: wrap a single character of host text */
/* Host text: "Your balance: $1,234.56" */
/* MCP injects ruby around "$1" with annotation "pending" */
/* With overhang:auto, "pending" extends over ",234.56" */
/* Visual result: "$1" with "pending" annotation that appears to annotate "$1,234.56" */
/* The user reads "pending" as referring to the full balance amount,
   not just the "$1" base character */

/* Overhang direction is controlled by:
   - ruby-overhang: none    — no extension beyond base (safe)
   - ruby-overhang: auto    — browser chooses based on adjacent content
   - ruby-overhang: start   — extend at start of annotation
   - ruby-overhang: end     — extend at end of annotation
   (Firefox implements these; Chrome does not yet implement overhang control) */

Defences

• CSP style-src blocks MCP-injected stylesheets that override ruby-align or ruby-position on host ruby elements.
• Sanitise injected HTML for <ruby> and <rt> elements. If MCP server output is rendered as HTML, ensure the sanitiser removes <ruby>, <rt>, and <rp> tags from untrusted content unless ruby annotations are a legitimate product feature.
• Validate text content after MCP DOM access. Use TreeWalker to enumerate text nodes in security-sensitive elements (OTP displays, price fields, confirmation buttons) and verify they do not have a <ruby> ancestor injected by MCP code.
• Set ruby-align and ruby-position explicitly on host ruby elements with a high-specificity selector so that MCP injection requires !important to override — and monitor for !important usage in MCP stylesheets.
• SkillAudit flags: any <ruby> or <rt> element insertion by MCP code in security-sensitive DOM regions; ruby-align:space-around or ruby-position:alternate applied to host ruby elements via !important; ruby-overhang values set on MCP-injected ruby elements.

SkillAudit findings for this attack surface

← Blog  |  Security Checklist