AlejTech/Blog/Maskovanie e-mail adresy pomocou jQuery pluginu ako obrana proti spamovaniu
Prejsť na navigáciu

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

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.

Tento článok zahŕňa témy:
jQuery, nospamemail, JavaScript, Graceful degradation, e-mail, adresa, plugin, doména

Komentáre (3)

pridať komentár


V komentároch môžete používať BB kód .

Komentár č. 1autor: Roman (web)8.7.2009, 7:37

Zdravim,

parada, prave som takto zamaskoval e-maily na nasich strankach. Skutocne uzitocny clanok ... Len tak dalej!!

Posielam tip aj ostatnym kolegom ...

Komentár č. 2autor: adamSa12.7.2009, 15:14

neviem preco si myslite, ze email oddeleny spanmi bude neviditelny pre robotov. staci ak odstrani vsetky html znacky a prejde textom ci neobjavi nieco@nieco a ma vsetky e-maily. vedel by som to pochopit ak by to bolo span domena span meno span zavinac atd.. cize v uplne inom poradi a potom js usporiadat do spravneho tvaru. usporiadanie v spravnom tvare urcite pred robotmi nic neochrani :)

Komentár č. 3autor: Marek (web)12.7.2009, 18:26

Roman> Ďakujem

adamSa> Ja si nemyslím, že je to veľmi dobrá ochrana. Primárne pre mňa ale bolo zachovanie accessibility. Ak chcem aby bol email bežne čitateľný pre ľudí, čo nemajú JavaScript - s možnosťou kopírovnia do schránky, tak je jasné, že to musí byť do značnej miery čitateľné aj pre botov. Toto riešenie dáva aspon základnú ochranu pred botmi. Váš nápad s poprehadzovaním poradia spanov by bol síce účinný pre ochranu pred botmi, ale úplne by znemožnil prístupnosť.

Poraďte sa s nami o službách, ktoré potrebujete. My vám pripravíme konkrétnu cenovú ponuku.

Kontaktujte nás

Vďaka za projekt. Z vašej strany to bolo super.

Mgr. Miroslav Helbich, PhD.
Caldera, s.r.o.