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.

Kapcsolódó bejegyzések:
  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

  • A navigációnál használt tab-os/füles megoldások egy problémája szokott lenni, hogy hiába állítjuk be a css-ben, hogy az aktív tab-nak hogy kellene kinéznie, katt …

  • Számos szempont alapján ellenőrizhetjük a felhasználók által megadott email cím valóságát, a legegyszerűbb módszerektől a legnehezebbekig. Én most a kettő között …

  • Ezt a tag-et azért találták ki, hogy stílust olyan elemeknek, szövegrészeknek is lehessen adni, amelyek beállítására hagyományosan más mód nincsen. Használhatjuk …

  • Felmerült a lehetőség itt a lapon is, hogy mi lenne ha a hozzászólók linkjeit nem a névre tennénk rá hivatkozásként, hanem a név mellett vagy alatt lenne kiiratv …

A cikket beküldte: Harder (http://blog.harder.hu)

9 hozzászólás

  1. BlackY says:

    É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. azdie says:

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

  3. Vancha says:

    Bakker, úgy tűnik ekora láma vagyok, de nem tudom miért nem jeleníti meg rendesen a kódot. Az admint kérem, hogy törölje az előző két hozzászólásomat (ha lehetséges).
    Akit érdekel az én módszerem itt egy kép a kódról:
    biztonságos e-mail cím megjelenítése (jpg)

  4. Tupacko says:

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

  5. adam924 says:

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

  6. levente says:

    Köszi nagyon jó!

  7. bela says:

    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.

  8. Roland says:

    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.

  9. DjZoNe says:

    Sok év távlatából jutott eszembe ma, hogy mintha olvastam volna tutorial.hu-n egy ilyen cikket :)

Szólj hozzá
a E-mail cím elrejtése CSS-sel c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>