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á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