protectEmails jQuery plugin

src: http://http.cdnlayer.com

Protecting your e-mail address has become a matter of “course obvious”. Countless spam-​​bots scour the Internet for email addresses which are then flooded with a wave of unwanted mails. Unfortunately, often we are forced to share our address. Written in plain text, the more added to the mailto link will become very quickly prey to spammers. Usually we have no influence if the address is published on foreign sites, so much we have on our own. Since necessity is the mother of invention, I decided to create my own solution. The combination of CSS and JavaScript brought the desired effect.

protectEmails idea

By creating a foundation, I tried to look at the issue from as many sides as possible. The main points are:

  1. Readability for the end user
  2. Protection against the spam-bots basic mechanisms
  3. Ease to modify the appearance
  4. Simplicity in use

Readability for the end user

First of all, I wanted to avoid solutions of the info [at] example.com type, which, apart from not protecting against bots for a long time, it’s also tiring for the users.
All varieties of this solution are characterized by the same difficulty in obtaining an email by page visitor – parts replacement, ease confusion. By creating my solution, I wanted to gain email address visible in the usual form, just as info@example.com.

Additionally, I believe it is also important to keep the standard functionality of the link, which opens the default client mail program.

Protection against the spam-bots basic mechanisms

The solution must be unique in some way so that the standard functions of the spammers were unable to unhask such address. Of course, you can’t protect in 100%, there will always be someone who will write a dedicated solution. However, much of the automates can be eliminated.

Looking for ready-made solutions I met with plenty of pseudo-security. Not only they make users life harder, they also put addresses on additional issue at the mercy of bots, such as:

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

Or simply make life difficult, for example:

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

In the case of above, there are solutions based on JavaScript, which based on the class modify the span tag, rewriting it to the clickable email address. This is a fairly good solution with one drawback – the address is readable by bots.

Ease to modify the appearance

Of course, the protected address must be fully CSS customizable, so solutions based on images instead of the @ sign are drop out. I also wanted to avoid a large markers nesting as proposed by some solution::

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

Or modification of the above, by changing the order of tags, and such CSS modification so the elements were arranged in the correct order::

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

Simplicity in use

With the increase of safety usually complexity increases as well, which, unfortunately, translates into difficulties in using. Unfortunately, this solution will not work in conjunction with standard WYSIWYG editors. Of course there is nothing in the way to add the appropriate modifications.

In the current version inserting a secure email address basically boils down to two tasks: to enter the tag with address and to attach plug-in (of course remembering to attach the jQuery library):

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

Wanting to become independent from JavaScript, or keep only basic functionality, one should also attach a piece of the CSS (by default plug-in adds it itself):

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

Working principle

The first part of the solution focuses on presenting an address to the user, even if JavaScript is disabled. This is done using a simple CSS procedure, and thoroughly the content property with use of the attr property.

By setting the appropriate styling, html element, which by default does not display anything, shows properly looking email to the user:

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

Example 1:

Next element is the add click functionality. This solution is based on JavaScript. Here is nothing to describe, the script just replaces the span tag for the chosen hover or click action.

Example 2:

Benefits

  • The biggest benefit is to hide your email address from spam-bots, at least until someone will create a dedicated solution. Even if such happens, the plug-in can be easily convert into a own unique solution.
  • Retains the original functionality.
  • The address is readable for users even when JavaScript is disabled . One can copy and paste it in email program, do not need to copy out [at] on @
  • A two-stage protection may be used only in part, providing a basic level of security.
 

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

 

Reply

 

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

 

Reply

 

“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.

 

Reply

 

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ą.

 

Reply

 

@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.

 

Reply

 

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ć 🙂

 

Reply

 

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.

 

Reply

 

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

 

Reply

 

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