Image we have the following code:
<script>
var TOKEN="abcdef";
</script>
And we aim to steal the token using only CSS.
We'll detect the presence of scrollbars using only CSS-es which can be done on Chrome (this was covered by Eduardo in his blog post. My idea is, however, slightly different.
Suppose the token may consist only of characters: "01234567890abcdef". So in first step, we create two fonts. In both fonts all characters is of zero width except for:
- In first font, we define ligatures
"0
,"1
,"2
,"3
,"4
,"5
,"6
,"7
as very wide. - In second font, we define ligatures
"8
,"9
,"a
,"b
,"c
,"d
,"e
,"f
as very wide.
Then we create two iframes referencing those fonts. In the exemplary case, only the first iframe will get a scrollbar, which means that the first character of the token is one of "01234567"
.
Then we split "01234567"
to two parts again and repeat the same steps as above until we know the exact character.
After that, we can steal the second character by defining ligatures for "a0
, "a1"
, "a2"
and so on.
Then it works just as shown here