Skrytí e-mailu před roboty*

Nejúčinnější je emaily vůbec nevypisovat (nebo je schovat do jinak běžně nepřístupné části, která třeba vyžaduje registraci, nebo alespoň opsácní CAPTCHA, nebo tak něco). Velmi spolehlivé je taky vypsat maily jako obrázek. Jenže to snižuje přístupnost a většinou to nevypadá moc dobře. Před nějakou dobou se tady na diskuzi radilo vypisovat mail přes javascript (a pokud možno nějak složitěji, nemít ho v kódu definovaný jako jedinou proměnnou) anebo alespoň vypsat mail v kódu jako HTML entity. Já nějakou dobu provozuji tento magický skript (ukázka)*, který se zdá být stejně špatně čitelný pro roboty jako pro lidi. Jako bonus se při vypnutém javascriptu zobrazí varování, že jde o nesmyslnou adresu. A po drobné úpravě to jde udělat i tak, že jde adresa snadno vybrat (na element strong se navěsí nějaké createSelection).

Jsou tam dva hlavní prvky, které roboty odhánějí: je to vypsané javascriptem, takže roboti kteří JS neparsují (a těch je nejspíš velká většina) to vidí jen jako bláboly - rozhodně v tom nepoznají emailovou adresu (a spíš seberou ten blábol zvrchu). Druhý faktor jsou entity. Primitivní roboti co sbírají emaily tak, že jen stáhnout HTML stránku a přes nějaký regulár hledají email, ho taky nenajdou (i když by je měl odehnat už ten javascript).

Pro nějaké okrajové případy podivně hloupých robotů jsem navíc JS řetězec složil trochu netradičním způsobem. A celé je to rozbité HTML tagy, ale pravděpodobně to nemá žádný efekt. Zaručeně však taky pomáhá, že mám mail u Googlu, který spam dost dobře filtruje. Ta adresa je veřejně na internetu už asi rok, a nepamatuju si, že by mi do ní někdy přistál spam.

* Vyhodil jsem původní kód z příspěvku, protože diskuze převáděla entity na výsledné znaky. Boo!

xXx:
„existuje nějaké elegantnější řešení?“
Nevím, co si o tom myslí ostatní, ale podle mě by to mohlo fungovat i pomocí CSS :before a content - ukázka - Podpora IE8+
Amunak:
„Nelíbí se mi, že na to znásilňuješ tag rel“
upravil jsem to na data-char

xXx:
Prostě si to jenom převeď na HTML entity. Čísla entit odpovídají číslum znaků: např. zavináč je znak 64, má tedy entitu @. Ono by dost možná stačilo zaentitovat jen ten zavináč

nemeja:
Nelíbí se mi, že na to znásilňuješ tag rel (šlo by prostě použít data-cokoliv). A domnívám se, že JS má větší podporu (a pouhé entity vůbec největší). V ukázce je navíc problém, že mezi znaky jsou mezery (to jde vyřešit tak, že ty SPANy natlačíš na sebe). No a když to někdo bude mít nepodporované, uvidí jen prázdno (bez vysvětlení).

Možná bych navrhnul něco jako tohle - roboti to zcela určitě nepřečtou, pokud stránku neparsují, ale je to přehlednější.

Reaguji na nemeju a Amunaka:
V Mozille nejde text vložený přes content zkopírovat, takže tuto CSS metodu důrazně nedoporučuji…


Reaguji na Amunaka:
„Já nějakou dobu provozuji tento magický skript“
Proč nedělá rovnou klikatelný odkaz?

„Jsou tam dva hlavní prvky, které roboty odhánějí“
Pokud by nějaký robot dokázal zpracovat JS, tak musí téměř jistě zvládnout i HTML entity. Převod na entity už je prakticky zbytečný, pokud nikde v kódu není celá adresa v kuse.

Reakce na Chamurappiho:
„Proč nedělá rovnou klikatelný odkaz?“

Myslíš, že je klikací e-mail lepší než neklikací? Skoro mně (mimo mobilní zařízení) přijde lepší ten neklikací, protože ve většině prohlížečů (snad kromě staré Opery) nejde text odkazů moc rozumně označovat (a možnost kopírování z kontextové nabídky, myslím, moc lidí nezná). Dále bych řekl, že v případě kliknutí se většině lidí objeví něco jako „Vítá vás průvodce nastavením pošty“.

Chamurappi:
Vidím to stejně jako Str4wberry. Když už, spíš bych tam usnadnil výběr při onClicku. Alternativní řešení by možná bylo dát živý link *vedle* toho textu ke zkopírování, třeba formou nějaké ikonky. Ale spousta lidí bohužel nakonfigurovaného klienta nemá, a používá třeba jen webové schránky jako seznam, takže se jim víc hodí to zkopírovat a klikání může být nepraktické.

Reaguji na Str4wberryho:
„Dále bych řekl, že v případě kliknutí se většině lidí objeví něco jako ‚Vítá vás průvodce nastavením pošty‘.“
V čistém WinXP vyskočí okénko Outlook Expressu s předvyplněnou mailovou adresou, která odtamtud jde zkopírovat. Na nastavení účtu se to ptá až při pokusu o odeslání.
V mém Win7 mi tady v Exploreru vyskakuje ošklivá nekompromisní hláška, že není nastavený žádný e-mailový klient, OK a nazdar, to je úplně k ničemu.
Ve Firefoxu se mě to ptá, jestli chci k otevření použít GMail nebo Yahoo Mail, což by možná mohlo nějak rozumně fungovat.
Víc jsem toho nezkoušel. Ale mám chuť změřit na lidech, jak se chovají. Škoda, že k tomu není moc příležitostí.

„Myslíš, že je klikací e-mail lepší než neklikací?“
Myslím, že by všechno mělo být vymyšlené tak, aby lepší byl :-)
Ale dobře, tak to nemusí být odkaz, může to být text, který při zapnutém JS (a třeba jen při najetí) má podobný styl jako odkaz a onclick na něm vyvolává mailto:. Takže půjde dobře označit i prokliknout.

„Ve Firefoxu se mě to ptá, jestli chci k otevření použít GMail nebo Yahoo Mail, což by možná mohlo nějak rozumně fungovat.“
Aha, mně to právě ve všech prohlížečích kromě staré Opery nabízí:



Stejný osud asi postihne i všechny ostatní, kdož mají nainstalovaný Office a nenastavený Outlook.

„Myslím, že by všechno mělo být vymyšlené tak, aby lepší byl :-)“
Dobrý nápad. Takhle? Živá ukázka

Efekt jen při najetí by ukryl klikatelnost mailu před uživateli dotykových obrazovek.

Str4wberry:
„Živá ukázka“
Podle mě je to úplně to samé jako použití odkazu vedoucí na protokol mailto. Lepší by bylo dát to jako odkaz na vestavěný formulář stránek, který funguje jako jednoduchý formulář pro posílání mailu na předem určenou adresu (pomocí textového políčka lze zadat výchozí adresu, odkud se mail pošle, tak může adresát odpovědět. Odesílatel však musí zadat správnou adresu :-)

Nějak takhle:
Všem textovým inputům raději nastavit prázdnou hodnotu (hlavně při použití type=email), nikdy nevíte, jak to prohlížeče zobrazí, takhle si to takhle raději pojistit, že se všude ukáže prázdné políčko se šedým textem ukazující příklad použití.

Reakce na CZghosta:
„Podle mě je to úplně to samé jako použití odkazu vedoucí na protokol mailto.“

Výhoda je v tom, že se adresa jakožto ne-odkaz dá pohodlně označovat pro kopírování. I když, jak nad tím přemýšlím, možná úplně nejlepší je uvést zkrátka varianty obě, nechť si návštěvník vybere.

Str4wberry:
„I když, jak nad tím přemýšlím, možná úplně nejlepší je uvést zkrátka varianty obě, nechť si návštěvník vybere.“
Já bych protokol mailto nepoužíval, stejně drtivá většina lidí používá webovýho klienta, takže když chce, může si adresu zkopírovat tam, nebo poslat mail přímo z mého webu. Někdo to dělá dokonce tak, že má několik formulářů odesílající mail, každý na něco trochu jiného. To se dá velice dobře využít ke členění typu mailu (objednávky, zakázky, atd.)

xXx:
„Tohle mě nenapadlo a přitom to vypadá celkem použitelně. Děkuji za dobrý nápad!“
Hlavně nezapomeň interpretovat formulář v PHP souboru, na který formulář odkazuje, samotné HTML tohle neumí ;-)
Je na to funkce mail(). Dokumentace tady: http://cz1.php.net/manual/en/function.mail.php

„Já bych protokol mailto nepoužíval, stejně drtivá většina lidí používá webovýho klienta“

To podle mě platí jen pro desktop. U mobilů bych čekal, že naopak většina lidí e-mailového klienta používá a klikací mailto proto ocení.

Koukal jsem na jednotlivá řešení, ale přišla mi moc složitá.

Vymyslel jsem něco jednoduššího - ukázka, myslím, že ochrana by mohla být dostatečná.

Použití protokolu mailto mi přijde sporné, mně po kliknutí na desktopu neudělá vůbec nic, ale na mobilu bych ho uvítal.

joe:
Ale ne, no, není to krása tahat si do stránky 100kB jQuery jen kvůli tomu, aby mi vykouzlil na webu e-mailové adresy?

A co teprve ti, kteří budou psát a nebudou vědět kam :-)

anonymníí:
Na webech používám jQuery, proto ho díky jednoduchosti používám i pro psaní ukázek. Nic ti tedy nebrání onu myšlenku využít s čistým JavaScriptem. S querySelector em se navíc kód nebude příliš lišit. (Navíc s kompresí 100 kB u jQuery nestahuješ).

joe:
Problém bude kompatibilita. querySelector je docela nová záležitost, a jQuery tohle taky neřeší. Čistý JS psaný tak, aby ho podporovalo pokud možno co nejvíc prohlížečů je v tomhle ohledu lepší (alespoň se tam snadno dá napsat upozornění pro uživatele s vypnutým JS; když ti ale prohlížeč něco nepodporuje, těžko nainstaluješ lepší).

xXx:
PHP formulář, pokud máš k dispozici funkci mail(), bude dost možná vždy to nejlepší a nejpohodlnější možné řešení. Takový formulář by ale měl mít: pole pro mail odesílatele (nepovinné, ale aby se na něj mohla případně poslat odpověď, kdyby měl uživatel zájem), možnost poslat kopii textu na email (aby pak měl uživatel kompletní konverzaci i v mailu) a taky nějaká antispamová ochrana (která ani nemusí být vidět).

Amunak:
Tak znovu, problém v žádné kompatibilitě nebude, jen navrhnul nápad, jak by šlo e-mail podle mě bezpečně skládat, implementaci nechám na každém. Například na web zaměřený pro mladší generaci není ani problém s querySelectorem, protože drtivá většina využívá Chrome nebo Firefox, a nebo IE ve verzi, která ho už dávno podporuje.

Nápad "schování" e-mailu je teda v tom, že ho nebudu nijak složitě kódovat a pak zbytečně dekódovat, jenom si uložím část před zavináčem a část za ním, tyto části pak spojím dohromady. Robot tedy nepozná, že jde o e-mailovou adresu.