Il massimo della sicurezza, nella protezione di pagine, si raggiunge con linguaggi di scripting lato server come ASP, PHP, PERL. Pur non fornendo un alto livello di protezione, anche javascript può essere utile nel restringere l'accesso ad alcune parti del nostro sito. Se avete file importanti da nascondere (oltre a non metterli online :-P) vi consiglio di affidarvi a tecnologie più avanzate.
C'è da dire, però, che lo script che presentiamo è tra i più "affidabili" in javascript dato che la password non è visualizzabile "in chiaro" dal codice sorgente ma viene "criptata".
L'esempio si compone di 1 file:
- esempio.htm
- prova.htm
- prova2.htm
- cripta.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Come avrete visto, i files .htm sono 4 ma solo due richiedono l'inserimento di javascript.
La prima pagina che costruiremo è quella che cripta la password scelta da noi (IMPORTANTE: questa pagina ci servirà solo in locale e non andrà uploadata sul server).
Inseriamo tra i tag <head>, della pagina "cripta.htm", questo script:
<script type="text/javascript" language="javascript">
function calculate(){
passworda = document.password1.password2.value.toLowerCase()
passwordb = document.password1.password3.value.toLowerCase()
if (passworda == passwordb){
pass = 1
for(i = 0; i < passworda.length; i++) {
pass *= passworda.charCodeAt(i);
}
document.password1.password4.value = pass;
}
else{
alert("Password di conferma non corretta");
}
}
</script>
Adesso, nel <body> delle stessa pagina, costruiamo il form per ottenere la password criptata:
<form name="password1"><div align="left">
<table class="tabella" border="0" cellspacing="0" cellpadding="2">
<tr>
<td>
<strong>Inserisci la password: </strong></td>
<td><input type="text" name="password2" size="15">
</td>
</tr>
<tr>
<td><strong>Conferma la password: </strong></td>
<td><input type="text" name="password3" size="15"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Cripta"
onClick="calculate()"> <input type="reset" value="Reset" name="B1"></td>
</tr>
<tr>
<td><strong>Password criptata: </strong></td>
<td><input type="text" name="password4" size="15"></td>
</tr>
</table>
</div>
</form>
Basterà inserire due volte, negli appositi campi, la parola che vogliamo criptare per ottenere una serie di numeri. Per ora li possiamo segnare e tenere da parte, ci serviranno dopo.
Adesso passiamo alla pagina che conterrà il modulo di accesso.
Inseriamo tra gli <head> questo codice:
<script type="text/javascript" language="javascript">
function submitentry(){
password = document.password1.password2.value.toLowerCase()
pass = 1
for(i = 0; i < password.length; i++) {
pass *= password.charCodeAt(i);
}
if(pass == 16221820608 || pass == 811091030400){ /* ricordiamoci questa stringa.
è importante */
window.location=password+".htm"}
else{
alert("Password non corretta")}
}
</script>
Il form di accesso vero e proprio, invece, sarà strutturato così:
<form name="password1">
<strong>Inserisci password: </strong>
<input type="text" name="password2" size="15">
<input type="button" value="Invia" onClick="submitentry()">
</form>
Passiamo alle spiegazioni. Lo script aggiunge l'estensione .htm alla password inserita e, se giusta, rimanda alla pagina htm con lo stesso nome e che si trova nella stessa directory. In pratica se creiamo un file chiamato "biifu.htm", la password da inserire sarà "biifu". In questo caso è buona regola creare nomi abbastanza fantasiosi magari inserendo anche dei numeri.
Se però la password (che, come già detto, ha lo stesso nome della pagina.htm) non venisse criptata, basterebbe guardare il codice sorgente per scoprire il nome "segreto".
Proprio per questo usiamo il form "cripta" in modo da ottere un numero cifrato. Una volta ottenuto il codice dobbiamo inserirlo in questa stringa della pagina di accesso:
if(pass == "inseriamo_numero" || pass == "inseriamo_numero")
quindi, nel caso delle due password "prova" e "prova2", abbiamo la stringa
if(pass == 16221820608 || pass == 811091030400)
In questo modo, anche guardando il codice sorgente, non riusciremo a scoprire i nomi segreti.
Per aggiungere più password (e quindi multiutenti) dovremo usare, nella stringa analizzata sopra, l'operatore logico "||" (or). Così facendo possiamo "leggere" la stringa in questa maniera:
"Se la passoword corrisponde a "prova" oppure a "prova2" allora aggiungi l'estensione .htm alla parola inserita altrimenti visualizza l'alert di errore".
Ecco un esempio di stringa con 3 password differenti e quindi tre utenti:
if(pass == 16221820608 || pass == 811091030400 || pass == 11655)
Altre modifiche non sono necessarie.
