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.