'HTML obfuscation using special fonts

I was browsing a German website when I noticed that during the initial page load there were some non printable characters displayed on the page (like ``). As a result the score of the match can't be seen while the page is still fetching all resources, especially fonts. I simulated this behavior by disabling a specific CSS rule.

The match with the missing score

The page adds a data-obfuscation attribute and a class to each element displaying a score.

The HTML

The CSS Rule I disabled to simulate the page load sets the font-family on the target elements. The font seems to have the same name as the value of the data-obfuscation attribute which seems to be shared for all effected elements. The value also changes when I reload the page.

.results-c-7kwd95ci {
    font-family: font-7kwd95ci !important;
}

If I enable this rule the score can be viewed normally

The score rendered correctly

Here is the CSS File

@font-face {
    font-family: font-7kwd95ci;
    src: 
        url('//www.fussball.de/export.fontface/-/format/woff/id/7kwd95ci/type/font') format('woff'),
        url('//www.fussball.de/export.fontface/-/format/ttf/id/7kwd95ci/type/font') format('truetype');
}

.results-c-7kwd95ci {
    font-family: font-7kwd95ci !important;
}

Seems like the site is intentionally sending malformed unicode data which can only be rendered by the loaded font. Since copying the score to the clipboard also just copies the malformed data.

Is there a name for this kind of obfuscation and how does it work? Can this be circumvented when scraping data without browser automation? Technically also browser automation does not work for scraping since the data is still malformed.

javascripthtmlobfuscationcssfonts


Solution 1:[1]

i found this noscrape npm package which seems to have the same logic with obfuscation with fonts.

it also bothers me when i need to copy the location or date from the page into a mail :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 d-fens_

Related Questions