CSS Obfuscation Lab / Experiment 03

Invisible decoy digits

Four fictional product prices contain extra digits in their HTML. CSS hides the decoys in four different ways. Compare what you see against what JavaScript extracts.

`display: none`

Removes the fake digits from layout.

Demo USB microphone · Price

$7498.560

`visibility: hidden`

Makes the digits invisible; absolute positioning removes their gaps.

Demo USB microphone · Price

$7498.560

`opacity: 0`

Fully transparent digits can still appear in extracted text.

Demo USB microphone · Price

$7498.560

`font-size: 0`

Leaves the characters in the DOM but shrinks them out of view.

Demo USB microphone · Price

$7498.560

Obfuscation is ON. Every price looks like $79.50.

Live extraction results

Values are measured from the four price elements above, not hard-coded. Click the button to remove the obfuscation classes, then watch the results change.

CSS technique	`textContent`	`innerText`	Computed decoy style
`display`
`visibility`
`opacity`
`font-size`

Actual price markup (simplified)

<div class="price is-obfuscated">$7
  <span class="decoy decoy--display">4</span>9
  <span class="decoy decoy--display">8</span>.5
  <span class="decoy decoy--display">6</span>0
</div>

The example above is formatted for readability. In the live HTML, all the price characters are kept on one line so whitespace doesn't alter the results.

CSS doing the hiding

.price.is-obfuscated .decoy--display {
  display: none;
}
.price.is-obfuscated .decoy--visibility {
  position: absolute;
  visibility: hidden;
}
.price.is-obfuscated .decoy--opacity {
  position: absolute;
  opacity: 0;
}
.price.is-obfuscated .decoy--font {
  font-size: 0;
}

Key observation: textContent always includes every decoy because it reads DOM text without considering CSS. innerText considers some rendering rules, but it is not a guaranteed representation of all visually readable text. A scraping approach that filters display: none alone can still get the wrong price.

Accessibility warning: These are deliberately hostile demo patterns, not recommendations. Hidden content can behave differently in the accessibility tree: for example, opacity: 0 and font-size: 0 do not reliably prevent assistive technologies from encountering the extra digits. Do not use CSS-obfuscated prices on real commerce sites.