CSS Email Obfuscation - Create a Clickable Link

Рет қаралды 969

Күн бұрын

A hands-on guide on how to create clickable CSS-obfuscated email links with a bit of JavaScript.
🔗 Links
Email Obfuscation Using CSS: • Email Obfuscation Usin...
Demo: codepen.io/ZoranJambor/pen/MW...
🔥 Mastering Linting: masteringlinting.com/
🏷️ Coupon for 20% off at the checkout: CSSOBFUSCATION
📖 Chapters
00:00 How CSS email obfuscation works
01:05 How to create a clickable CSS-Obfuscated email link
05:22 How to add a subject to the obfuscated email link
07:39 Conclusion
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com/
Help support my channel
👨‍🎓 Get a course: masteringlinting.com/
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
💖 Support me on Patreon: / cssweekly
Keep up-to-date with CSS Weekly:
🐦 Twitter: / @cssweekly
🎶 TikTok: / cssweekly
🎇 Instagram: / cssweekly
📘 Facebook: / cssweekly
Keep up to date with what I'm up to:
👨‍💼 Blog: zoranjambor.com
💼 LinkedIn: / zoranjambor
- Zoran Jambor
#css #js

Пікірлер: 12

@ScriptRaccoon 2 ай бұрын

Even better than the previous solution, great! I will add this to my website. I also didnt know that specific difference between innerText and textContent.

@CSSWeekly 2 ай бұрын

I'm thrilled to hear you learned something! 🙂

@JansGuitarJourney 2 ай бұрын

Great solution! Love the use of innerText. Hiding the email address in this way should block 99% of the crawlers on the internet. I'm not sure if there are crawlers that render a page within a browser-like environment to steal email addresses after the page is fully rendered. To be safe, you may want to replace the mail address using an onclick event, so it stays hidden until the last moment. Might be overthinking it 😉

@ahmad-murery 2 ай бұрын

Yes, that may work, also, make sure to reset the href after a couple of milliseconds (10 ms was enough for me to allow the mail app to grab the email address)

@CSSWeekly 2 ай бұрын

Thanks so much for your insight! 🙏 If they render the page, do they render it completely, including CSS? If so, this technique is useless entirely, as they'll be able to get the email directly from HTML/text. 🙂 If not, the onclick is a good extra layer of protection, but I think then you'd also have to remove the email the page in the first place. 🤔

@JansGuitarJourney 2 ай бұрын

@@CSSWeekly it's all theory, but I would say they would render the page including the CSS. Then make a snapshot of all the rendered content and search for email addresses. So yes that would make the protection against spam useless. However in case they use the rendered HTML instead of the page content the extra protection layer with onclick might help. For myself I stopped hiding my email address on the internet. The spam filter is good enough to block most of the spam so it no real issue. In the end we web-developers have to think about the users and make the web as user-friendly as possible.

@CSSWeekly 2 ай бұрын

Yes, this all makes sense. I was never diligent about using or showing my email address, and it was never a problem. I'd rather deal with an occasional spam message than make it more difficult for someone to contact me. 🙂 Thanks so much for all your insight! 🙏

@claasdev 2 ай бұрын

How does this look like to screen readers reading the email address?

@CSSWeekly 2 ай бұрын

Thanks so much for your question! Screen readers parse CSS/HTML, so it should work as expected. 🙂 I've tested it in VoiceOver, and both link text and HREF are read correctly, with the correct email, including 'mailto:' and 'subject.'