Obfuscation Lab / Experiment 07

Shuffled character wrappers

JavaScript shuffles the characters in the DOM, gives their wrappers random classes, and uses Flexbox to restore their visual order. Regenerate the markup to see a different DOM sequence without changing what visitors see.

Demo noise-cancelling headphones

Fictional product · no actual purchase available

Price

Live extraction results

The price is assembled after JavaScript runs. Every rebuild changes the DOM order and randomly generated class names.

textContent

innerText

Character order in the DOM

Order after applying Flexbox order

Number of generations

Current generated HTML

What's going on?

JavaScript creates one flex item per character in a randomized DOM sequence. Each item's inline CSS order restores the intended reading order. Extra nested spans and random classes make the markup change on every rebuild.

Key observation: Both textContent and innerText follow the source structure, not the visual order produced by Flexbox. A geometry-based extractor can read the characters by their screen positions instead.

Accessibility warning: CSS ordering doesn't generally change the reading order for assistive technologies. This is an adversarial demonstration, not a recommended way to display prices.