Noscrape in 3 steps
Obfuscate data, embed the font, display the data. That is all you need to get started.
Obfuscate data via the API
Send your JSON data to api.noscrape.eu/obfuscate. With a bearer token you use your account. Without a token, demo mode runs with 10 fonts per minute.
curl -X POST https://api.noscrape.eu/obfuscate \
-H "Content-Type: application/json" \
-H "Authorization: Bearer YOUR_API_TOKEN" \
-d '{
"name": "Max Mustermann",
"email": "max@example.com"
}'
For demo mode, simply omit the Authorization header.
Embed the font as a custom webfont
Alongside the obfuscated data, the API also returns a font file as a Base64 string. You embed it using @font-face.
<style>
@font-face {
font-family: "NoscrapeFont";
src: url("data:font/otf;base64,PASTE_BASE64_FONT_HERE") format("otf");
font-display: swap;
}
.noscrape {
font-family: "NoscrapeFont", sans-serif;
}
</style>
Display obfuscated data in HTML
The obfuscated values look broken in the source code, but the browser renders them readable using the matching font.
<div class="noscrape">
<p>{{ obfuscated.name }}</p>
<p>{{ obfuscated.email }}</p>
</div>
Live example
On the left you see what is in the HTML. On the right you see what the browser renders using the matching font.
HTML / Source code
Rendered in the browser
Both values are identical. The only difference is the font being used. Open the browser developer tools and see for yourself.