.:° JsDir °:. JavaScript .:° Gli script del webmaster e dei collaboratori al sito °:. Bring Your Site To Life®

      Una delle fonti principali di indirizzi e-mail in cui vanno a pescare gli spammer e' il sorgente HTML delle nostre pagine web, l'unico modo per contrastare questo comportamento è semplicemente evitare che l'indirizzo compaia in chiaro nel sorgente, e che comunque non sia riconoscibile al parsing della pagina.

      Lo script che vediamo qui sotto cerca di difendere la nostra casella di posta in due maniere: usa JavaScript (ovviamente :-) per scrivere il link tramite la chiamata alla funzione e maschera comunque l'indirizzo (o gli indirizzi) nel sorgente dello script in modo che non siano riconoscibili a meno di un controllo di persona o di un'elaborazione fatta apposta per ricostruirli.
      Puo' non essere sufficiente infatti uno script tipo: <script>document.write("<a href='mionome@mioserver.it'>e-mail</a>")</script> perché l'indirizzo compare comunque nel sorgente della pagina, ed anche l'uso di caratteri di escape, dei codici ascii o unicode possono fallire perché la traduzione in caratteri è banale, e l'unica maniera per ottenere lo scopo e' mascherare l'indirizzo anche nel sorgente dello script.
      Vediamo il sorgente:

<html>
<head>
<TITLE>http://www.jsdir.com - Scrivi Email</TITLE>
<script>
<!--
function ScriviIndirizzoEmail(EmDest,TestoLink,EmSubj,StatusText,LinkStyles)
   {
   var Subject=EmSubj?"?subject="+escape(EmSubj):"";
   var Stili=LinkStyles||"";
   var TestoStatusMouseOver=StatusText?" onmouseover=\"window.status='"+StatusText+"';return true;\" onmouseout=\"window.status='';return true\"":"";

   var Indici="rfw";

   var Stringhe=new Array(
            "ri.ric^car^di§§§^^§§§^§§ag^ora.it" ,
            "f^abia^no^§§§§§jsd^ir.com^" ,
            "w^ebmaster§^§§§js^dir.^com"
            );

   var LinkPosta="<a href='posta:"+Stringhe[Indici.indexOf(EmDest)]+Subject+"' "+Stili+TestoStatusMouseOver+">"+TestoLink+"</a>";
	
   document.write(LinkPosta.replace(/\^/g,"").replace(/§+/g,"@").replace(/posta/,"mailto"));

   }
//-->
</script>
<style>
.LinkEmail {
   font-family : verdana ;
   font-size : 1.0em ;
   color : #008 ;
   background-color : #eea ;
   padding : 10px 10px;
   border : 4px dashed blue ;
   }
</style>
</head>
<body bgcolor="#ffffff">

<script>ScriviIndirizzoEmail("r","Riccardo","Richiesta informazioni","Scrivimi")</script> <br>
<script>ScriviIndirizzoEmail("w","WebMaster","","Scrivi al WebMaster")</script> <br>
<script>ScriviIndirizzoEmail("f","Fabiano","","Scrivi a Fabiano","style='font-family:verdana;font-size:1.2em;color:#800;font-weight:bold;'")</script> <br>
<script>ScriviIndirizzoEmail("w","WebMaster bordato","Oggetto dell'email con il link bordato","","class='LinkEmail'")</script> <br>
<script>ScriviIndirizzoEmail("r","<img src='email.gif'>","Richiesta informazioni","Scrivimi")</script> 

</body>
</html>

      L'unica funzione presente è ScriviIndirizzoEmail() che accetta cinque parametri:
      - EmDest (obbligatorio) è il riferimeto all'indirizzo da scrivere;
      - TestoLink (obbligatorio) è il testo del link, o un tag <img src='email.gif' ... > completo con l'immagine da cliccare;
      - EmSubj (quasi facoltativo) se presente è l'eventuale subject che vogliamo preimpostare nella mail;
      - StatusText (quasi facoltativo - vedi (1)) se presente è il testo che compare nella barra di stato quando il puntatore si trova sul link;
      - LinkStyles (facoltativo - vedi (2)) è invece l'eventuale stile che vogliamo applicare al link.

      Il primo ed il secondo parametro sono ovviamente obbligatori perché devono identificare l'indirizzo e-mail ed il testo (o l'immagine) del link, gli altri sono invece quasi facoltativi e vediamo subito perché.

      Se vogliamo preimpostare un subject passeremo alla funzione, come terzo parametro, il testo che comparirà nell'oggetto della mail, la funzione controlla se ha ricevuto il terzo parametro ed in tal caso costruisce la stringa nella variabile locale Subject anteponendo al testo ricevuto la stringa "?subject=" e facendo l'escape dei caratteri ricevuti. Con l'escape non dovremo preoccuparci dei caratteri non validi, eventuali spazi o segni di uguale, ad esempio, saranno automaticamente convertiti nei relativi %20 o %3d.

      Il quarto parametro (StatusText) è anch'esso facoltativo e può essere usato per indicare un testo che comparirà nella status bar quando il mouse è sul link. (1) Attenzione che se vogliamo specificare il testo per la status bar il parametro del subject dovraà comunque essere presente, altrimenti la funzione (leggendo i parametri ricevuti uno per volta) potrebbe associare al subject il testo della status. Quindi se vogliamo un testo per la status bar, ma non ci interessa comunque un subject, dovremo comunque inserire il parametro per il subject anche se sarà sufficiente inserirlo come stringa vuota, ad esempio: ScriviIndirizzoEmail("r","Testo del link","","Testo per la statusbar").

      Il quinto parametro (LinkStyles) è anch'esso facoltativo e può essere usato sia per aggiungere un completo style=' ... ' al link come nel terzo esempio, oppure un riferimento ad una classe o ad un ID: class='nomeclasse' o id='nomeid' come nel quarto.

      (2) Anche qui, come per la nota 1, se vogliamo specificare uno stile, ma non un subject e/o un testo per la statusbar, questi ultimi due (o comunque quello non voluto) dovranno essere in ogni caso indicati, anche questa volta come stringa vuota, ad esempio:
      ScriviIndirizzoEmail("r","Testo del link","","","class='LinkEmail' ") (solo stile e nessun subject o testo per la status);
      ScriviIndirizzoEmail("r","Testo del link","Richiesta informazioni","","class='LinkEmail' ") (lo stile ed il subject, ma non il testo per la status);
      ScriviIndirizzoEmail("r","Testo del link","","Inviami un messaggio","class='LinkEmail' ") (lo stile ed il testo per la statusbar, ma non il subject);

      Continuando a vedere la funzione troviamo una variabile Indici e un array Stringhe, prima di vedere questa parte diamo un'occhiata alla parte HTML.
      Nell'esempio vengono scritti quattro tag.
      Il primo parametro passato alla funzione è una lettera r, w o f che ritroviamo nello script nella variabile Indici, il secondo è il testo del link, gli altri parametri sono:
      - il subject ed il testo per la statusbar nel primo indirizzo;
      - un subject vuoto ed un testo per la statusbar, come detto sopra il subject, anche se non voluto, è stato comunque specificato come stringa vuota;
      - ancora un subject vuoto come sopra, un testo per la statusbar, ed uno stile per il link definito come un parametro style per il tag;
      - un subject, nessun testo per la status (ma stringa vuota ancora per quanto detto sopra), ed un riferimento ad una classe per lo stile del link.

      L'ultimo esempio è identico al primo, ma invece del testo per il link ho usato un'immagine: notiamo che avendo già usato l'apice doppio come delimitatore della stringa, i parametri per il tag <img ... > li ho delimitati con l'apice singolo. Chi ha già letto questa precisazione in altri script non se ne abbia a male, l'errato uso degli apici è sempre la fonte primaria di errori a runtime in JavaScript :-)

      Tornando alla funzione vediamo cosa c'è nell'array che ho marcato con il grassetto.
      Si riconoscono gli indirizzi email scritti, ma invece della @ ho inserito alcuni simboli di paragrafo (§) ed ho frammisto a casaccio dei simboli di ^. Il motivo è molto semplice: un parser che andasse a cercare nel sorgente della pagina il carattere @ per individuare gli indirizzi non lo troverebbe in corrispondenza degli stessi indirizzi e quand'anche riuscisse a riconoscere il trucco, l'indirizzo e-mail verrebbe comunque reso inutilizzabile dagli ^ messi qua e la.
      Gli stessi ^ li ho inseriti anche fra i simboli di paragrafo, dunque l'unica maniera per ricavare dagli elementi di quell'array un indirizzo reale è andare a vedere di persona le stringhe, oppure eseguire lo script. Il browser dell'utente eseguirà lo script e restituirà l'indirizzo in chiaro al tag, ma l'unico modo per lo spammer per ricavarlo è proprio quello di indagare di persona.
      Ovviamente i simboli ^ e § potete cambiarli a vostro piacimento facendo però attenzione a non usare simboli che abbiano significato in un indirizzo e-mail vero perché verrebbero poi eliminati dalle sostituzioni fatte nelle righe successive.
      Fin qua abbiamo visto come funziona la "protezione", ora terminiamo con lo script.
      Il primo parametro passato alla funzione corrisponde ai caratteri nella variabile Indici, banalmente se la funzione riceve una "r" questa corrisponde al primo carattere (indice zero) della stringa Indici e lo script andrà a pescare il relativo elemento dall'array, cioe' quello di indice zero, se la funzione riceve una "f" corrisponderà all'indirizzo di Fabiano, se una "w" prenderà l'indirizzo del WebMaster.

      La riga successiva della funzione si occupa infatti di preparare il link, usando (per il momento) la parola "posta" invece di "mailto", cui aggiunge uno degli elementi dell'array Stringhe identificato dalla posizione che ricaviamo nella Indici tramite l'indexOf(), poi aggiunge alla stringa l'eventuale Subject e, se ci sono, anche gli Stili chiudendo il tag con il normale ">". Fatto questo inserisce il contenuto del parametro TestoLink e completa il link con il </a> finale.

      Fin qua nella variabile LinkPosta ci sono ancora le stringhe ricavate dall'array, che contengono cioè i vari ^ e ù; a questo punto entra in azione il document.write() che prima di scrivere la stringa nel documento sostituisce tutti i caratteri ^ con una stringa vuota (quindi di fatto li elimina dal tag), poi sostituisce tutte le occorrenze di § con una sola @ ed infine cambia la parola "posta" con "mailto" ottenendo in uscita un tag "pulito".
      Quel che risulta è un classico tag mailto: che viene scritto nel documento.
      Va da se che se cambiate i simboli nell'array dovrete anche modificare i corrispondenti nelle RegExp, attenzione a non togliere il "+" dalla RegExp che inserisce la @ altrimenti invece di un'unica @ ve ne ritroverete tante quanti sono i § :-)

      Naturalmente questa non è una soluzione definitiva per gli spammer, ma può servire a qualcosa. Da pochi giorni viene usata in tutto JsDir.com per mascherare le e-mail di tutto lo staff e dei collaboratori.

	Parli JavaScript? Non tenerlo per te! JsDir cerca collaboratori. Se gli UserScript ti stanno stretti e vuoi inserire delle FAQ, dei Tips&Tricks, o anche uno StaffScript, se vuoi scrivere un tutorial o recensire un libro... insomma se parli JavaScript segui questo link. È un'occasione per farti conoscere e dimostrare le tue capacità!!!