Noscrape Logo
Noscrape
Change language

Noscrape in 3 steps

Obfuscate data, embed the font, display the data. That is all you need to get started.

1

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.

2

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>
3

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.