protectEmails jQuery plugin

src: http://http.cdnlayer.com

Ochrona własnego adresu poczty elektronicznej stała się „oczywistą oczywistością”. Niezliczone spam-boty przeczesują Internet w poszukiwaniu adresów email, które później zalewane są falą niechcianej poczty. Niestety często jesteśmy zmuszeni udostępnić swój adres. Wpisany zwykłym tekstem, a tym bardziej dodany do linku z mailto stanie się bardzo szybko łupem spamerów. O ile na formę upublicznienia adresu w obcych serwisach zwykle nie mamy wpływu, o tyle mamy w przypadku własnych. Jako, że potrzeba jest matką wynalazku, postanowiłem stworzyć własne rozwiązanie. Połączenie CSS i JavaScript przyniosło oczekiwany skutek.

Założenia protectEmails

Tworząc założenia starałem się patrzeć na problem możliwie z wielu stron. Najważniejszymi punktami są:

  1. Czytelność dla użytkownika końcowego
  2. Ochrona przed podstawowymi mechanizmami spam-botów
  3. Łatwość modyfikacji wyglądu
  4. Prostota w stosowaniu

Czytelność dla użytkownika końcowego

Przede wszystkim chciałem uniknąć rozwiązań typu info [at] example.com, które poza tym, że już dawno nie chronią przed botami, to dodatkowo są męczące dla użytkowników. Wszystkie odmiany tego rozwiązania charakteryzują się tą samą trudnością w pozyskaniu maila przez odwiedzającego stronę – podmiana fragmentów, łatwość pomyłki. Tworząc swoje rozwiązanie, chciałem, aby adres email był widoczny w zwykłej formie, po prostu jako info@example.com.

Dodatkowo, uważam, że ważne jest też zachowanie standardowej funkcjonalności linku, który otwiera domyślny program pocztowy klienta.

Ochrona przed podstawowymi mechanizmami spam-botów

Rozwiązanie musi być w jakiś sposób unikatowe, tak aby standardowe funkcje spamerów nie były w stanie takiego adresu wyłuskać. Oczywiście, nie da się zabezpieczyć w 100%, zawsze znajdzie się ktoś, kto napisze dedykowane rozwiązanie. Jednak dużą część automatów można wyeliminować.

Poszukując gotowych rozwiązań spotkałem się z dużą ilością pseudo-zabezpieczeń. Nie dość, że utrudniają one życie użytkownikom, to dodatkowo wystawiają adresy na pastwę botów, np.:

<a href="mailto:info@example.com">info [ at ] example.com</a>
<a href="mailto:info@example.com">info [ at ] example [dot] com</a>

Lub po prostu utrudniają życie, np.:

<span class="email">info [ at ] example [dot] com</spam>

W przypadku powyższego istnieją rozwiązania oparte na JavaScript, które na podstawie klasy modyfikują znacznik span, przerabiając go na klikalny adres email. Jest to dość dobre rozwiązanie z jednym mankamentem – adres jest czytelny dla botów.

Łatwość modyfikacji wyglądu

Oczywiście chroniony adres musi być w pełni modyfikowalny przy pomocy CSS, zatem odpadają dziwne rozwiązania oparte na obrazkach zamiast znaku @. Chciałem też uniknąć dużego zagnieżdżania znaczników, jak w proponowanym przez niektórych rozwiązaniu:

<a href="mailto:info@example.com">
    <span class="n">info</span><span class="at">@</span><span class="d">example.com</span>
</a>

Czy modyfikacji powyższego, poprzez zamianę kolejności znaczników i taką modyfikację CSS, aby elementy zostały ustawione w odpowiedniej kolejności:

<a href="mailto:info@example.com">
    <span class="at">@</span><span class="n">info</span><span class="d">example.com</span>
</a>

Prostota w stosowaniu

Wraz z wzrostem bezpieczeństwa zwykle rośnie też poziom skomplikowania, co niestety, przekłada się na utrudnienia w stosowaniu. Niestety te rozwiązanie nie zadziała w powiązaniu ze standardowymi edytorami WYSIWYG. Oczywiście nic nie stoi na przeszkodzie, aby dopisać odpowiednie modyfikacje.

W obecnej wersji wstawienie zabezpieczonego adresu email sprowadza się w zasadzie do dwóch zadań: wpisanie znacznika z adresem oraz podpięcia pluginu (oczywiście pamiętając do dołączeniu biblioteki jQuery):

<span data-user="admin" data-domain="example.com" class="protect-emails" />
$(document).ready(function(){
    $('span').filter('.protect-emails').protectEmails();
});

Chcąc uniezależnić się od JavaScript lub zachować jedynie podstawową funkcjonalność, należy też załączyć odpowiedni fragment CSS (domyślnie plugin dodaje go sam):

.protect-emails:after {  content: attr(data-user) '@' attr(data-domain); }

Zasada działania

Pierwsza część rozwiązania skupia się na zaprezentowaniu adresu użytkownikowi, nawet jeśli JavaScript jest wyłączony. Dzieje się to za pomocą prostego zabiegu wykorzystującego CSS, a dokładnie właściwości content wspartej wykorzystaniem attr

Dzięki ustawieniu odpowiedniego ostylowania, element html, który domyślnie nic nie wyświetla, pokazuje użytkownikowi poprawnie wyglądający email:

<span data-user="admin" data-domain="example.com" class="protect-emails" />
.protect-emails:after { 
    content: attr(data-user) '@' attr(data-domain);
}

Przykład 1:

Kolejnym elementem jest dodanie „klikalności”. Jest to już rozwiązanie oparte na JavaScript. Nie ma tu czego opisywać, po prostu dla wybranej akcji hover czy click skrypt podmienia znacznik span.

Przykład 2:

Korzyści

  • Niewątpliwie największą korzyścią jest ukrycie adresu email przed botami, przynajmniej do czasu, stworzenia dedykowanego rozwiązania ;). Nawet jeśli takie powstanie, wtyczkę można łatwo przerobić pod własne unikalne rozwiążanie.
  • Zachowuje się pierwotną funkcjonalność.
  • Adres jest czytelny dla użytkowników nawet w przypadku wyłączonego JavaScript. Można go skopiować, wkleić w programie pocztowym, nie trzeba przepisywać [at] na @
  • Dwuetapowe zabezpieczenie może być wykorzystane tylko w części, zapewniając podstawowy poziom ochrony.
 

Przeczytaj także

Komentarze: 8

Dodaj komentarz »

 
 
 

Bardzo ciekawy i sprytny pomysł 🙂
Co do dedykowanych spambotów, to:
1) Dopóki rozwiązanie się nie upowszechni to pewnie takowe nie powstaną (choć ich stworzenie to żadna filozofia)
2) Nawet jakby takowe powstało, to wystarczy, że każdy we własnym zakresie zmieni nazwy parametrów i już po sprawie na jakiś czas

 

Odpowiedz

 

@nospor jak będę miał chwilę, to zmodyfikuję wtyczkę, tak, aby można było przekazać nazwy parametrów.

 

Odpowiedz

 

„należy też załączyć odpowiedni fragment CSS (domyślnie plugin dodaje go sam):”

Kod css dodaje się chyba tylko po to, by jak ktoś ma wyłączone js to zadziałało mu to przez css. Po co więc twój plugin dodaje ten kod css? Jak ktoś nie ma js to i tak plugin nic nie doda. Tak więc dodawanie tego css przez plugin wydaje mi się totalnie zbędne.

 

Odpowiedz

 

A, już kumam czemu dodajesz ten css. Bo głównie to css ma to podmieniać. Nie jestem pewien czy to dobry pomysł. Czy ten css co podałeś nie działa dopiero poprawnie od jakiegoś czasu? Chodzi mi o to, czy oby na pewno wszystkie przeglądarki potrafią go poprawnie zinterpretować? Te starsze też?
A jakbyś oparł to na js to spokojnie i te starsze przeglądarki zadziałają.

 

Odpowiedz

 

@nospor właściwość :after pochodzi z CSS2, jest wspierana nawet przez IE8, wraz nią content wykorzystujące attr(). W związku z tym, raczej powinno działać wszędzie bez problemu.

Rzeczywiście samo pokazanie adresu e-mail (przed zamianą na klikalny link) można jeszcze dorobić w js, sprawdzając uprzednio wsparcie przeglądarki dla rozwiązania opartego na css.

 

Odpowiedz

 

Ja stosuję prostszy sposób, ale jest to półśrodek. Odwracam mail z użyciem string reverese po stronie php, a z użyciem CSS na stronie go ponownie odwracam. W ten sposób boty widzą wersję z małpą ale muszą go same odwrócić. Najczęściej tego nie robią 😉 Problemem jest fakt, że wyszukiwarki też 😛 No i próba copy-paste również się kończy jak dla botów 😉 User musi albo sam sobie tekst odwrócić, albo przepisać 🙂

 

Odpowiedz

 

Większość osób ma jednak włączoną obsługę JS. Na pewno odsetek osób surfujących bez JS jest mniejszy niż odsetek osób korzystających z IE7, która nie wspiera :after.

 

Odpowiedz

 

Fx 11 niestety nie wspiera zaznaczania tekstu w wersji CSS. Pomysł ogólnie ciekawy.

 

Odpowiedz

 

Dodaj komentarz

 
(nie będzie publikowany)
 
 
Komentarz
 
 

Dozwolone tagi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
© 2009 - 2016 Vokiel.com
WordPress Theme by Arcsin modified by Vokiel