The Email Snooping Problem
If you were to put an email address on a page without protection, the bots will find it, and spam you. Techniques to obfuscate the email address were developed to solve this problem. Cloudflare has this built into to their free service.
Converting a Markdown email address to an obfuscated email address
Start with a markdown email address, the ‘<’ and ‘>’, identify it as an email address or URL.
Jekyll converts the Markdown to HTML
1
<a href="mailto:[email protected]">[email protected]</a>
Finally, Cloudflare’s Scrape Shield obfuscates the address
1
2
3
<a href="/cdn-cgi/l/email-protection#7f0b1a0c0b3f1a121e1613511c1012">
<span class="__cf_email__" data-cfemail="85f1e0f6f1c5e0e8e4ece9abe6eae8">
[email protected]</span></a>
By the time it is fully rendered in a browser, the user sees:
What I learned about obfuscation
What I learned is that, when you inspect a page, the page is fully rendered. When you view source, you see what is sent to the browser.
I did an inspect, and could not see the obfuscation. I also learned that curl is a good solution to inspect HTML.
The bots generally don’t fully render html pages, they look at the source.
Here is the test page, you can try it for yourself: https://makermattdesign.com/email_obfuscation_test.html
Post to Cloudflare Community
Email address obfuscation is not working for me.
So far I have
- Enabled Scrape Shield → Email Address Obfuscation
- Created a simple page, attached.
- Inspected the html source in Brave, Safari and Fire Fox
- Confirmed the MIME type is text/html I don’t think I’m using Cache-Control: no-transform header, but am not sure how to check. Thanks, Matt
Test Case
https://makermattdesign.com/email_obfuscation_test.html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Cloudflare Email Obfuscation Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<a href="mailto:[email protected]">[email protected]</a>
</body>
</html>
Get Page With Curl
1
curl https://makermattdesign.com/email_obfuscation_test.html
Shows it is obfuscated.
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Cloudflare Email Obfuscation Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<a href="/cdn-cgi/l/email-protection#7f0b1a0c0b3f1a121e1613511c1012"><span class="__cf_email__" data-cfemail="85f1e0f6f1c5e0e8e4ece9abe6eae8">[email protected]</span></a>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
</html>
View Page Source is Obfuscated
If you view page source, you it is obscured.
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Cloudflare Email Obfuscation Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<a href="/cdn-cgi/l/email-protection#f581908681b59098949c99db969a98"><span class="__cf_email__" data-cfemail="a9ddccdadde9ccc4c8c0c587cac6c4">[email protected]</span></a>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
</html>
Inspect Page (this is what fooled me)
Note the cleartext [email protected] 