Maskovanie e-mail adresy pomocou jQuery pluginu ako obrana proti spamovaniu

Najlepšia – a asi aj jediná – účinná obrana proti spamu, je nezverejniť nikde svoju e-mailovú adresu.
Pre majiteľov web stránok je to ale väčsinou neprípustné, keďže potrebujú, aby ich návštevníci stránky mohli na ich e-mailovej adrese kontaktovať.
V tomto článku vám ukážem jednoduchý jQuery plugin, pomocou ktorého zamaskujem na stránke e-mailovú adresu pred spambotmi.
Najdôležitejším kritériom pre nás zostáva prístupnosť – teda aby aj návštevníci stránky, ktorí nemajú JavaScript, videli e-mailovú adresu správne (Graceful degradation).
Tvar e-mailovej adresy
Dnešné boty, hľadajúce e-mailové adresy, sa okrem samotných mailto: adries v linkách zameriavajú aj na e-mailové adresy v texte a aj na samotné domény. Na nájdené domény potom posielajú spamy na adresy info@, sales@, a vlastne na skoro akékoľvek náhodné.
Potrebujem sa evidentne vyhnúť čistému vypísaniu e-mailových adries na stránku.
Môj cieľ pri publikovaní e-mailových adries na webe bol, aby mali štandardnú funkcionalitu pre čo najviac návštevníkov stránok. Teda aby boli vo formáte:
<a href="mailto:meno@domena.sk">meno@domena.sk</a>
Zároveň chcem zabezpečiť, aby pre návštevníkov bez JavaScriptu boli adresy publikované aspoň ako čistý text, ktorý sa dá vkladať do schránky (CTRL + C) a použiť rovno v e-mailovom kliente. Chcel som sa teda vyhnúť rôznym praktikám typu meno (at) domena (bodka) sk a podobne.
Riešením je publikovať e-maily nasledovne:
<span class="email"> <span>meno</span><span>@</span><span>domena</span><span>.sk</span> </span>
Takto zapísaný email sa v prehliadači zobrazí ako čistý text, teda takto:
meno@domena.sk
Zároveň je ale pre bežné spam roboty neidentifikovateľný ako e-mailová adresa, vďaka elementom span, ktoré obklopujú každú časť e-mailovej adresy.
JQuery plugin
Pomocou jednoduchého jQuery pluginu môžeme z tohto zápisu vytvoriť užívateľsky prístupné a klikateľné linky. Plugin sa volá nospamemail:
/* * NoSpamEmail plugin * Copyright (c) 2009 AlejTech * Licensed under the LGPL License */ (function($) { $.fn.nospamemail = function(options) { return this.each(function() { var _email = $('span', this).text(); $(this).empty().append('<a href="mailto:' + _email + '">' + _email + '</a>'); }); } })(jQuery);
Tento plugin vezme všetky elementy span, ktoré nájde a zlúči ich textový obsah do jedného reťazca – e-mailovej adresy. Nakoniec ich všetky nahradí linkou v tvare:
<a href="mailto:meno@domena.sk">meno@domena.sk</a>
Volanie pluginu je potom veľmi jednoduché:
$(function() { $('span.email').nospamemail();⁞ });
Demo
A nakoniec si pozrite demo a hlavne jeho zdrojový kód.