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

      Esistono innumerevoli script per limitare l'accesso ad aree del sito con il solo controllo lato client, ma tutti fanno uso dei più vari algoritmi di cifratura (più o meno sicuri) o semplicemente cercano di caricare una pagina html il cui nome del file si "ispira" a vario titolo ai caratteri della login e/o della password. E gli altri script che trovate su JsDir (pubblicati nel 2000) non sono da meno :-)
      Da una semplice idea di Blindonet di qualche settimana fa in it.comp.lang.javascript è venuto fuori però lo script che vi presento in questa scheda che fa uso semplicemente id un'immagine sul server per verificare la password digitata dall'utente.

      La struttura di fondo è identica allo script Pagine protette da Password pubblicato a Gennaio 2000, e cioè un frameset che consente di nascondere le URL delle pagine coinvolte nel controllo e delle pagine riservate.
      Rivediamola velocemente:
      Il file principale è index.html che contiene un frameset costituito da un solo frame al cui interno avviene il controllo ed in cui interno vengono poi caricare le pagine protette:

<HTML>
<HEAD>
   <TITLE>http://www.jsdir.com - Area riservata</TITLE>
</HEAD>
<FRAMESET ROWS="100%,*" BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>
   <FRAME SRC="passwordpage.html" SCROLLING="AUTO" MARGINHEIGHT="0" [...
      ...] MARGINWIDTH="10" FRAMEBORDER="0" NORESIZE>
</FRAMESET>
</HTML>

      Il frameset è composto da un solo frame al cui interno viene caricata la pagina di accesso, se la password inserita sarà corretta, la pagina riservata verrà caricata all'interno dello stesso frame, e l'unico indirizzo visibile nella location sarà quello del frameset.
      Va da sè che tutte le varie pagine riservate dovranno essere caricate sempre all'interno del frameset, quindi eviterete nei links fra quelle pagine qualsiasi TARGET per i links che non sia "_self", oppure non darete alcun target per le pagine riservate. Solo per uscire dall'area riservata (il "Logout") indicherete la homepage o un'altra pagina del sito con target "_top" in modo da elimiare il frameset.
      Sulla sicurezza e l'efficacia di un accesso riservato con il solo controllo lato client, valgono tutte le note e gli avvertimenti date nello script Pagine protette da Password e nello script PaZZword, in particolare ricordate che le pagine scaricate da Internet restano nella cache e nella History (cronologia) del browser e possono essere ricaricate semplicemente andando a spulciarci: questo è il difetto principale di un solo controllo lato client. Un accesso riservato lato server consente di adottare ben altre tecniche per obbligare l'utente a "passare dal Via" prima di accedere all'area riservata.
      Ok, continuiamo.

      La pagina passwordpage.html ha questo sorgente:

<HTML>
<HEAD>
<TITLE>http://www.jsdir.com - Area riservata</TITLE>
<SCRIPT Language="JavaScript">
<!--
if (self.location==top.location)
   top.location.replace("index.html");
	
var pwd="";
function Check()
   {
   pwd=document.accesso.pwd.value.toLowerCase();
   var pcheck=new Image();
   pcheck.onload=Verifica;
   pcheck.onerror=Verifica;
   pcheck.src=pwd+".gif";
   }

function Verifica(evento)
   {
   evento=evento||event;
   if (evento.type == "load")
      self.location.replace(pwd+".html");
   else
      {
      document.accesso.pwd.value="";
      alert("Password errata");
      }
   }
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT=#000000 LINK=#000000 ALINK=#000000 VLINK=#000000>
<FORM name="accesso">
<TABLE BORDER="0" CELLSPACING="20" CELLPADDING="20" WIDTH="100%" HEIGHT="90%">
   <TR>
      <TD ALIGN="center" VALIGN="middle"><FONT FACE="verdana, arial, helvetica" SIZE="-1">
         Per accedere all'area riservata inserire la password. <BR> <BR>
         <INPUT TYPE="password" NAME="pwd"> <BR> <BR>
         <INPUT TYPE="button" VALUE=" - Accedi - " onClick="Check()">
      </TD>
   </TR>
</TABLE>
</FORM>
</BODY>
</HTML>

      Le prime due righe obbligano il browser a caricare il frameset se l'utente cerca di bypassarlo, e queste le conosciamo tutti.
      La successiva variabile pwd conterrà la password digitata dall'utente nel campo dedicato all'interno della pagina (riga in verde).
      Al click sul pulsante [ - Accedi - ] viene attivata la funzione Check() che copia il contenuto del campo password nella variabile appena citata.
      Fatto questo viene istanziata una nuova immagine pcheck ed all'immagine vengono assegnati due event-handler che puntano alla stessa funzione (Verifica()) che si occuperà del controllo. Poi viene caricata l'immagine pcheck assegnandogli alla proprietà src la stringa digitata dall'utente (pwd) con aggiunta l'estensione ".gif".
      E questo è il punto cruciale: nel file .ZIP che scaricherete troverete infatti un'immagine (password.gif) di soli 34 Byte costituita da un unico pixel. Non è l'immagine in se importante, ma il fatto che l'immagine sia presente nel server.
      Infatti la password d'esempio per lo script è proprio la parola "password" che è anche il nome dell'immagine. Quando il browser carica qualsiasi cosa dal server va a modificare un gran numero di proprietà, e tra queste la "type" che assumerà il valore "load" solo se il caricamento è andato a buon fine.
      I due event-handler assegnati all'immagine fanno scattare la funzione Verifica() sia che l'immagine sia stata caricata sia altrimenti, e questo è quanto ci basta per il controllo della password: infatti se la stringa digitata dall'utente corrisponde ad un'immagine presente nel server scatterà l'event-handler onload e la proprietà type sarà appunto "load" dunque verrà caricata nello stesso frame una pagina HTML che ha per nome la stessa password (e nome dell'immagine) con l'estensione (".html").
      Se invece l'immagine non è presente nel server scatterà l'event-handler onerror e la proprietà type non sarà più "load" ma qualcosa di diverso (non ci importa cosa, basta che NON sia "load"). In questo caso il campo password viene azzerato ed un messaggio d'errore viene presentato con l'alert().

      In definitiva tutto quel che dovete fare per usare questo script è:
      - rinominare l'immagine "password.gif" con un altro nome (lasciando l'estensione);
      - dare lo stesso nome anche a "password.html" (anche qui lasciando intatta l'estensione);
      - modificare nel file "password.html" il nome della pagina protetta (che adesso è "areariservata.html") con il nome della vostra prima pagina riservata;
      - ovviamente cambiare il nome alla "index.html" e riflettere questo cambiamento all'inizio dello script per il caricamento obbligato del frameset (v. testo grigio nel sorgente sopra).
      Ciò fatto caricate tutto nel server e aggiustate di sale e pepe prima di servire :-)

      Notate che anche se l'utente legge il nome di una qualsiasi immagine del sito e lo inserisce come password, lo script gli darà l'accesso, ma ovviamente non esisterà sul server una pagina HTML con il nome corrispondente, quindi si ritroverà semplicemente con un "404 Not Found" e, pur superando il controllo, non avrà l'accesso all'area riservata.
      La variabile evento, come di consueto in questi casi, fa riferimento all'oggetto per cui è scattato l'event-handler e la prima riga di Verifica() (evento=evento||event;) è importante per Internet Explorer che passa automaticamente l'evento alla funzione e può essere solo recuperato senza necessità farne un argomento della funzione stessa.
      Il resto è... storia di due anni fa.
      La nostra prima pagina (che nell'esempio sarà "password.html") è questa:

<HTML>
<HEAD>
<SCRIPT>
<!--
self.location.replace("areariservata.html");
//-->
</SCRIPT>
</HEAD>
<BODY>&nbsp;</BODY>
</HTML>

che contiene solo il redirect alla prima pagina di quelle protette.
      Notate che qui (col senno di poi :-) ho usato replace() per effettuare i due cambi di pagina, in questo modo non verranno lasciate tracce nella History (Cronologia), fermo restando che comunque i vari files (ed anche l'immagine) saranno presenti nella cache.
      Questo ad ulteriore conferma che comunque una protezione lato client non è mai efficace come potrebbe essere una lato server, quindi occhio a quel che mettete come contenuti riservati, basta che una terza persona abbia accesso al computer dell'utente che ha visitato l'area "protetta" del vostro sito, per avere accesso a tutti i documenti protetti.
      Vi invito ancora una volta a dare una lettura alle schede degli altri due script per password che trovate linkati sopra per avere una maggior panoramica dei pro e contro sull'uso di una protezione lato client.

      Concludo ringraziando ancora una volta Blindonet (per primo) per l'idea di usare un'immagine come verifica della password, Zer0 e Maurizio per aver testato lo script e sopratutto Andrea per avermi tolto dall'impasse con Explorer, dato che avevo spesso usato "event" con Explorer ma ignoravo che venisse passato in automatico alla funzione gestore.
      Per chi non li (ci) conoscesse, tutti questi personaggi sono(siamo) al momento i più assidui frequentatori di it.comp.lang.javascript, il newsgroup dedicato al JavaScript della gerarchia it.

	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à!!!