MCP server CSS empty-cells security: consent table row gap, permission count undercount, table structure spoofing, and border-collapse interaction attacks

Published 2026-09-25 — SkillAudit Research

The CSS property empty-cells controls whether borders and backgrounds are drawn for empty <td> and <th> table cells — those that have no visible content. The value hide suppresses the cell's border and background, making the cell visually invisible (but still occupying space in the table layout). The value show (the default) renders the cell normally with its border and background.

In MCP consent dialogs that present permission lists or data-collection disclosures as HTML tables — a common pattern for "what we collect / why / how long" grids — the empty-cells: hide property can be weaponized to create strategic visual gaps that make a dense permission table appear to contain fewer rows, split a continuous table into what appears to be two separate tables, and hide entire "spacer" rows that contain invisible text (via color: transparent or font-size: 0) that would appear in the DOM but not in the visible table.

Attack model: The table's DOM contains all rows and cells — the full permission list is present and accessible to screen readers and DOM audits. The empty-cells: hide attack operates on the visual rendering layer. Cells that appear empty (their content is hidden via color or size attacks) lose their border and background when empty-cells: hide is applied, making them visually indistinguishable from genuine whitespace between table sections. Users reading the rendered table perceive fewer items than the DOM contains.

Attack 1: empty-cells: hide on consent permission table — row count undercount

A permission table with 8 rows where certain rows have their text made invisible (via color: transparent or font-size: 0.001px) — combined with empty-cells: hide on the table — renders those rows as pure blank space with no borders. The visual result is a table that appears to have 5 rows (the 3 blank rows collapse visually), while the DOM contains 8 rows with permission text.

<!-- HTML: 8-row permission table in MCP consent dialog -->
<table class="permission-table">
  <tr><td>Read repositories</td><td>Audit scanning</td></tr>
  <tr><td>Write repositories</td><td>Automatic fix publishing</td></tr>
  <tr class="hidden-row"><td>Delete repositories</td><td>Vulnerability cleanup</td></tr>
  <tr><td>Read issues</td><td>Tracking vulnerabilities</td></tr>
  <tr class="hidden-row"><td>Manage webhooks</td><td>CI integration</td></tr>
  <tr class="hidden-row"><td>Access organization secrets</td><td>Credential auditing</td></tr>
  <tr><td>Fork repositories</td><td>Isolated test environments</td></tr>
  <tr><td>Access private repositories</td><td>Comprehensive audit coverage</td></tr>
</table>

/* MCP-injected CSS */
.permission-table {
  empty-cells: hide;
  border-collapse: separate; /* required: empty-cells only applies in separate borders model */
}
.hidden-row td {
  color: transparent;    /* make text invisible — cell now appears "empty" */
  font-size: 0.001px;   /* belt and suspenders: near-zero text size */
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
/* Combined effect:
   - .hidden-row cells have no visible text → appear empty to browser
   - empty-cells: hide removes borders/backgrounds from these "empty" cells
   - The 3 hidden rows vanish visually: "Delete repositories", "Manage webhooks",
     and "Access organization secrets" are invisible to the user
   - Users see a 5-row permission table; DOM has 8 rows */

function detectEmptyCellsHidingAttack(consentRoot) {
  const tables = consentRoot.querySelectorAll('table');
  const findings = [];

  for (const table of tables) {
    const tableCs = window.getComputedStyle(table);
    const emptyCells = tableCs.getPropertyValue('empty-cells');
    const borderCollapse = tableCs.getPropertyValue('border-collapse');

    if (emptyCells === 'hide' && borderCollapse !== 'collapse') {
      // empty-cells: hide is active — check for visually empty cells with non-empty DOM text
      const cells = table.querySelectorAll('td, th');
      const suspectCells = [];

      for (const cell of cells) {
        if (cell.textContent.trim().length > 0) {
          const cs = window.getComputedStyle(cell);
          const color = cs.color;
          const fontSize = parseFloat(cs.fontSize);
          const opacity = parseFloat(cs.opacity);
          const visibility = cs.visibility;

          // Check if text is invisible despite being present in DOM
          const isTransparentColor = color === 'rgba(0, 0, 0, 0)' || color.includes(', 0)');
          const isTinyFont = fontSize < 2;
          const isZeroOpacity = opacity === 0;
          const isHiddenVisibility = visibility === 'hidden';

          if (isTransparentColor || isTinyFont || isZeroOpacity || isHiddenVisibility) {
            suspectCells.push({
              row: cell.parentElement.rowIndex,
              content: cell.textContent.trim().slice(0, 60),
              hidingMethod: isTransparentColor ? 'color:transparent' :
                            isTinyFont ? 'font-size:' + fontSize + 'px' :
                            isZeroOpacity ? 'opacity:0' : 'visibility:hidden',
            });
          }
        }
      }

      if (suspectCells.length > 0) {
        findings.push({
          table,
          emptyCells,
          borderCollapse,
          suspectCells,
          reason: 'table has empty-cells:hide and ' + suspectCells.length + ' cell(s) with DOM text but invisible rendering — hidden row attack',
        });
      }
    }
  }

  return findings;
}

Attack 2: spacer rows with whitespace-only content — invisible section separators

The HTML specification defines an "empty" cell as one containing no content. However, browser behavior varies: a cell containing only whitespace characters (space, non-breaking space  ) may or may not be treated as empty depending on the browser. An attacker can insert rows of cells containing only   characters — which occupy no visible space — and then apply empty-cells: hide, counting on the browser treating them as empty. These rows then render as invisible gaps between sections.

<!-- Spacer rows using &nbsp; to appear empty to browser -->
<table class="consent-permissions">
  <tr><td>Section A: Data collection</td></tr>
  <tr><td>Permission 1: Read profile</td></tr>
  <tr><td>Permission 2: Read contacts</td></tr>

  <!-- Spacer row with &nbsp; in both cells — appears empty to some browsers -->
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>

  <!-- Hidden section: follows spacer row, appears as separate table visually -->
  <tr><td>Section B: Irrevocable data sharing consent</td></tr>
  <tr><td>Permission 3: Sell data to third parties</td></tr>
  <tr><td>Permission 4: Share with law enforcement without notice</td></tr>
</table>

/* MCP-injected CSS */
.consent-permissions {
  empty-cells: hide;
  border-collapse: separate;
  border-spacing: 0 4px;  /* row-direction spacing creates gap at spacer row position */
}

/* Combined effect: spacer row appears as a visual gap between two sections.
   The "Section B" content appears to be a separate, lower-prominence section
   that users may not associate with the consent action above. */

Attack 3: empty-cells: hide + border-collapse interaction — false section boundary

While empty-cells: hide only applies when border-collapse: separate (the default), the transition between separate and collapse models changes how cell borders merge. An attacker can apply empty-cells: hide globally while setting border-collapse: collapse on specific row groups (via a wrapping element's override), creating a visual inconsistency where some table sections have merged borders (suggesting they are the "main" table) while others have a collapsed border model that suppresses their empty cells differently.

/* Interaction attack: mixed border models via row group overrides */
.permission-table {
  border-collapse: separate;
  empty-cells: hide;
}
.permission-table .detail-section {
  /* Note: border-collapse cannot be overridden on tr/td — it is a table property.
     But an attacker can use display:table-row-group wrappers or nested tables. */
}

/* More practical attack: use nested tables for section simulation */
.consent-outer-table {
  border-collapse: collapse;  /* collapse merges all borders — no empty-cells effect */
}
.consent-inner-table {
  border-collapse: separate;  /* separate enables empty-cells: hide */
  empty-cells: hide;
  /* Inner table with empty-cells: hide creates visual gaps within a section
     that appears to be part of the outer collapsed-border table.
     Users interpret the gap as a section break in the outer table,
     not recognizing it as a separate nested table with hidden rows. */
}

Attack summary

Attack	Property combination	User impact	Detection signal	Severity
Color-hidden row undercount	`empty-cells: hide` + `color: transparent` on certain rows	8-row permission table appears as 5 rows — critical permissions invisible	table has empty-cells:hide; cells with DOM text but transparent/zero-size rendering	High
Non-breaking space spacer rows	`empty-cells: hide` + ` `-only spacer rows	Single table appears as two separate sections — critical section lower prominence	Table rows where all cells contain only whitespace/  with empty-cells:hide on table	High
Nested table border model confusion	Outer `border-collapse: collapse` + inner `empty-cells: hide`	Hidden rows within inner table appear as section breaks in the outer table	Nested tables where inner table has separate borders and empty-cells:hide	Medium

Consolidated finding blocks

High Permission row undercount via empty-cells:hide + transparent text: A consent permission table uses color: transparent on high-impact rows (e.g., "Delete repositories", "Access organization secrets") combined with empty-cells: hide on the table. These rows appear empty to the browser, which removes their borders and backgrounds. Users see a shorter table; the DOM contains all permission rows. Detection: check computed empty-cells on tables in consent areas, then check all cells for DOM text with invisible computed color or near-zero font-size.

High Non-breaking space spacer row section spoofing: An attacker inserts rows containing only   characters between table sections. With empty-cells: hide, these rows render as borderless gaps. Users interpret the gap as a section break between two separate tables, reducing the visual prominence of the critical permission section that follows the gap. Detection: enumerate table rows where all cells contain only whitespace-equivalent characters on tables with empty-cells:hide.

Medium Nested table border confusion attack: An outer table with border-collapse: collapse contains an inner table with border-collapse: separate and empty-cells: hide. The inner table's hidden-row gaps appear to users as visual breaks within the outer table's section, causing them to misread the table structure and miss rows that appear to be whitespace between outer-table sections.

← Blog | Security Checklist