MCP server CSS resolution media query security — consent collapsed via @media (min-resolution: 2dppx) on Retina displays, specific DPI tier targeting for iPhone Pro, sub-pixel CSS rendering collapse at 3× pixel ratio, JS devicePixelRatio consent swap

CSS resolution media feature — overview

@media (resolution) accepts density values in dppx (dots per CSS pixel — equivalent to devicePixelRatio), dpi (dots per inch), or dpcm. The legacy -webkit-device-pixel-ratio feature is still widely used and accepts a bare number. Common real-device values: 1× (standard desktop monitor), 2× (MacBook Retina, iPhone SE, most mid-range Android), 3× (iPhone Pro, Samsung Galaxy S-series, Pixel 6 Pro), 4× (some Samsung tablets at native rendering). Standard automated audit environments typically report 1× (default device pixel ratio in Chrome headless). Related: monochrome, aspect-ratio query, pointer media query.

Attack 1: @media (min-resolution: 2dppx) collapses consent on Retina screens

Setting a consent button's dimensions to 0 or 1px CSS width under min-resolution: 2dppx targets most modern smartphones and all MacBook Retina displays. The 1× desktop used in test environments does not match the breakpoint, so the button appears fully sized during testing. On every real high-DPI device the button collapses to a sub-pixel or single-pixel target that is unreachable by touch or click.

/* Attack: consent collapse on Retina screens */
.consent-btn {
  width: 200px;  /* Normal size on 1x desktop (visible in tests) */
  height: 44px;
}

@media (min-resolution: 2dppx),
       (-webkit-min-device-pixel-ratio: 2) {
  .consent-btn {
    width: 1px;   /* CSS 1px = 2 physical pixels at 2x — still 2px wide */
    height: 1px;  /* Visually invisible but technically 2x2 physical pixels */
    overflow: hidden;
    /* opacity:1, display:block — all style checks pass.
       getBoundingClientRect(): width=1, height=1.
       Touch target requirement: 44×44px CSS. This fails.
       1x desktop audit sees 200×44 and reports pass. */
  }
}

// Detection: BCR dimension check on high-DPI devices
function auditResolutionConsentCollapse(consentEl) {
  const dpr = window.devicePixelRatio || 1;
  const bcr = consentEl.getBoundingClientRect();
  // Minimum tap target: 44x44px CSS px (Apple HIG, Material Design)
  if (dpr >= 2 && (bcr.width < 44 || bcr.height < 44)) {
    console.warn('[SkillAudit] consent element is below minimum tap target on high-DPI device;',
      'DPR:', dpr, 'bcr.width:', bcr.width, 'bcr.height:', bcr.height,
      '| may be resolution-targeted dimension collapse;',
      'element:', consentEl);
  }
  // Scan CSSOM for resolution-gated dimension rules on consent element
  const sheets = Array.from(document.styleSheets);
  for (const sheet of sheets) {
    try {
      for (const rule of sheet.cssRules) {
        if (rule.type !== CSSRule.MEDIA_RULE) continue;
        const mq = rule.conditionText || rule.media.mediaText;
        if (!/resolution|device-pixel-ratio/.test(mq)) continue;
        for (const inner of rule.cssRules) {
          if (!consentEl.matches(inner.selectorText)) continue;
          const w = inner.style.width;
          const h = inner.style.height;
          const d = inner.style.display;
          const o = inner.style.opacity;
          if (d === 'none' || o === '0') {
            console.warn('[SkillAudit] resolution media query hides consent via display:none/opacity:0;',
              'media:', mq, 'selector:', inner.selectorText);
          }
          if (w && parseFloat(w) < 10) {
            console.warn('[SkillAudit] resolution media query collapses consent width to', w,
              '| invisible on high-DPI; media:', mq);
          }
          if (h && parseFloat(h) < 10) {
            console.warn('[SkillAudit] resolution media query collapses consent height to', h,
              '| invisible on high-DPI; media:', mq);
          }
        }
      }
    } catch (e) {}
  }
}

Attack 2: -webkit-device-pixel-ratio: 3 targets iPhone Pro and flagship Android

Pixel ratio 3× is specific to flagship devices: iPhone Pro models (12 Pro, 13 Pro, 14 Pro, 15 Pro), Samsung Galaxy S-series (S21, S22, S23, S24), and Google Pixel 6 Pro and later. Targeting this specific tier avoids affecting mid-range devices (which only reach 2×) while still hitting the highest-engagement user segment — users with premium devices who are more likely to be early adopters of Claude-integrated products.

/* Attack: 3x Retina targeting — iPhone Pro, Galaxy S-series */
@media (-webkit-device-pixel-ratio: 3),
       (resolution: 3dppx) {
  .consent-btn {
    opacity: 0;
    pointer-events: none;
    /* At 3x DPR: 1 CSS px = 3 physical pixels.
       Opacity:0 at base + 3x query = invisible on:
       - iPhone 12/13/14/15 Pro
       - Samsung Galaxy S21/S22/S23/S24
       - Google Pixel 6 Pro, 7 Pro, 8 Pro
       Mid-range devices (2x) still see the button.
       Auditors on 2x MacBook Retina or 1x desktop see no issue. */
  }
}

// Detection: scan for pixel-ratio:3 rules targeting consent
function auditPixelRatio3Targeting(consentEl) {
  const dpr = window.devicePixelRatio || 1;
  const sheets = Array.from(document.styleSheets);
  for (const sheet of sheets) {
    try {
      for (const rule of sheet.cssRules) {
        if (rule.type !== CSSRule.MEDIA_RULE) continue;
        const mq = rule.conditionText || rule.media.mediaText;
        const isHighDPI = /device-pixel-ratio\s*:\s*[23]/.test(mq) ||
                          /resolution\s*:\s*[23]dppx/.test(mq) ||
                          /min-resolution\s*:\s*[23]dppx/.test(mq);
        if (!isHighDPI) continue;
        for (const inner of rule.cssRules) {
          if (!consentEl.matches(inner.selectorText)) continue;
          const o = inner.style.opacity;
          const d = inner.style.display;
          const v = inner.style.visibility;
          const pe = inner.style.pointerEvents;
          if (o === '0' || d === 'none' || v === 'hidden' || pe === 'none') {
            console.warn('[SkillAudit] high-DPI pixel-ratio rule hides or disables consent element;',
              'media:', mq, 'selector:', inner.selectorText,
              '| affected devices: iPhone Pro, Samsung Galaxy S-series, Pixel Pro;',
              'current DPR:', dpr);
          }
        }
      }
    } catch (e) {}
  }
}

Attack 3: sub-pixel font and border collapse at 3× pixel ratio

At 3× device pixel ratio, 0.3px CSS is exactly 0.9 physical pixels — below one physical pixel. Browsers round sub-pixel values to the nearest physical pixel (0 or 1). A consent button border set to 0.3px on a 3× screen resolves to 0 physical pixels (invisible border). Combined with a background color that matches the page background under a resolution-gated rule, the consent button becomes visually indistinguishable from the surrounding content. The getBoundingClientRect() still returns the correct CSS pixel dimensions — the visual collapse is purely a rendering artifact of the pixel density.

/* Attack: sub-pixel border collapse + background match at 3x */
.consent-btn {
  border: 1px solid var(--accent); /* visible at 1x and 2x */
  background: #fff;
}

@media (min-resolution: 3dppx),
       (-webkit-min-device-pixel-ratio: 3) {
  .consent-btn {
    border-width: 0.3px; /* 0.9 physical px at 3x → rounds to 0 → invisible border */
    background: var(--page-bg); /* matches page background under 3x gating */
    /* Button now: same background as page + no visible border.
       BCR still shows full CSS pixel dimensions.
       Computed border-width: 0.3px — passes minimum style checks.
       Visual result: invisible rectangle on page background. */
  }
}

// Detection: sub-pixel border check on high-DPI devices
function auditSubPixelConsentCollapse(consentEl) {
  const dpr = window.devicePixelRatio || 1;
  const cs = getComputedStyle(consentEl);
  const borderWidth = parseFloat(cs.borderTopWidth);
  const physicalBorder = borderWidth * dpr;
  if (dpr >= 2 && physicalBorder < 1) {
    console.warn('[SkillAudit] consent element has sub-pixel border at current DPR;',
      'CSS border-width:', borderWidth + 'px',
      '× DPR', dpr, '=', physicalBorder.toFixed(2), 'physical px (rounds to 0);',
      'border will be invisible — element may be visually indistinguishable from page background;',
      'element:', consentEl);
  }
  // Check if background matches page background under resolution rule
  const pageBackground = getComputedStyle(document.body).backgroundColor;
  const btnBackground = cs.backgroundColor;
  if (borderWidth === 0 && btnBackground === pageBackground) {
    console.warn('[SkillAudit] consent element has no border and background matches page background;',
      'element is visually indistinguishable from page;',
      'check for resolution-gated background match rule;',
      'element:', consentEl);
  }
}

Attack 4: JS window.devicePixelRatio consent swap at runtime

JavaScript can read window.devicePixelRatio directly without a media query. A script that branches on devicePixelRatio > 1 (or > 2 for 3× targeting) and replaces the interactive consent button with a non-interactive clone executes the bypass at runtime. Unlike CSS media queries, this JS check is not visible in a CSSOM scan and requires source code analysis. A resize or screen.orientation.change listener that re-checks pixel ratio enables the swap to trigger dynamically if the user connects an external display.

// Attack: JS devicePixelRatio swap
(function() {
  const dpr = window.devicePixelRatio || 1;
  if (dpr >= 2) {
    // "Optimizing for high-DPI display..."
    const btn = document.querySelector('.consent-btn');
    if (!btn) return;
    const fakebtn = document.createElement('div');
    fakebtn.className = btn.className;
    fakebtn.textContent = btn.textContent;
    fakebtn.setAttribute('role', 'button'); // looks interactive
    fakebtn.setAttribute('tabindex', '0');  // focusable but has no click handler
    btn.parentNode.replaceChild(fakebtn, btn);
  }
})();

// Change listener for dynamic DPR changes (external monitor connect/disconnect)
const mql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
mql.addEventListener('change', () => {
  if (window.devicePixelRatio >= 2) {
    document.querySelector('.consent-btn')?.setAttribute('disabled', '');
  }
});

// Detection: JS source scan for devicePixelRatio + DOM manipulation
function auditDevicePixelRatioJS() {
  for (const script of document.querySelectorAll('script')) {
    const src = script.textContent;
    if (!src || !/devicePixelRatio|device-pixel-ratio/.test(src)) continue;
    const hasManipulation = [
      /replaceChild|createElement|removeChild/,
      /pointer-events.*none/,
      /\.disabled\s*=\s*true|setAttribute.*disabled/,
      /style\.(opacity|display|visibility)\s*=/,
    ].some(p => p.test(src));
    if (hasManipulation) {
      console.warn('[SkillAudit] script reads devicePixelRatio with DOM manipulation;',
        'verify consent button is not swapped or disabled on high-DPI devices;',
        'current DPR:', window.devicePixelRatio,
        'script:', script.src || '(inline)');
    }
  }
}

Findings summary