E-mail cím elrejtése CSS-sel

A spamáradattal már mindenkinek tele a kis hócipője, itt a lapon is volt már róla szó, hogy lehet ellene védekezni. A minap egy külföldi blogban láttam pár – számomra új és ötletek – megoldást ami tetszett és CSS-re alapul a használatuk, lássuk őket:

A szöveg megfordítása

A CSS-nek hála lehetőség van a karakterek fordított sorban történő megjelenítésére az alábbi módon:

1
2
3
4
<style type="text/css"> 
span.codedirection { unicode-bidi:bidi-override; direction: rtl; } 
</style> 
<p><span class="codedirection">moc.niamod@liame</span></p>

Ennek eredménye az lesz, hogy a lapon megjelenik a látogató számára a mail@domain.com cím, viszont a forráskódban a spamrobotok számára a moc.niamod@liame szöveg lesz olvasható.

Rejtett tartalom

1
2
3
4
<style type="text/css"> 
p span.displaynone { display:none; } 
</style> 
<p>email@<span class="displaynone">null</span>domain.com</p>

Annak ellenére, hogy a forráskód szerint ez nem egy mailcím, a lapon helyesen fog megjelenni. A kukac utáni „null” CSS segítségével rejtve lesz, a mailcím összeáll.

Az ötletek a „Three Best Ways To Obfuscate Email Addresses” oldalról származnak.

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

9 HOZZÁSZÓLÁS

  1. És hogy teljes legyen a kép, az első változathoz egy JavaScript kód, hogy kattintható legyen (PrototypeJS-t és pontosan a fenti kódot (span tag codedirection class-al és benne csak az e-maillel) feltételezi):

    1
    2
    3
    4
    5
    6
    
    Event.observe(window, 'load', function() {
    	$$('span.codedirection').each(function(item) {
    		email = item.childNodes[0].nodeValue.split('').reverse().join('');
    		item.parentNode.replaceChild(new Element('a', {href : 'mailto:' + email }).update(email), item);
    	});
    });

    BlackY

  2. Hatalmas ötlet, thx… Eddig a képfájlon olvasható e-mail címet tartottam a legmegfelelőbb ötletnek. :)

  3. Ötletes, ötletes, de ha CSS, akkor a JSt mellőzném :) Elvégre, azért CSS, hogy szkriptmentes böngészőkön is működjön.

  4. a megfordítással csak az a baj ha másolni akarod a mail címet akkor sajna fordítva másolja ki

  5. sajna egyik sem jó. az elsőnél beírja a „null”-t is, a másodiknál a már említett fordított e-mail cím.

  6. Hi, mindkét megoldás ötletes.
    De nem kattintható és másolásnál rossz emailt kapunk.

    Ezért gondoltam megkérdezem mi a véleménye a hozzáértőknek az alábbi megoldásról.

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét