[PILLOLA] Login più sicuro con JavaScript e PHP

**andr3a** · 21-10-2005, 09:34

Pre - premessa
Questa pillola è l' evoluzione al contrario di un' altra mancata pillola che sfruttava un modo di interagire client -> server più moderno.
Il perchè di questo passo in dietro è dato dalla non totale compatibilità crossbrowser con versioni vecchie o non aggiornate di alcuni browsers ( IE4 , Opera7 , 8 mesi fa Konqueror ... altre ) .
Per chi fosse interessato all' eventuale metodo alternativo basato su ajax può visitare questa pagina: http://forum.html.it/forum/showthrea...hreadid=897228 .

Premessa
Quando non siamo su una connessione protetta parlare di un login sicuro é praticamente inutile.
Quello che possiamo fare però è tentare quanto più ci è possibile di rendere difficile l' accesso ai malintenzionati e di salvaguardare i dati dell' utente.

Perche' JavaScript
Lo scopo e' quello di filtrare ancora prima di inviare le info al server i dati sensibili dell' utente e di non permettergli di salvare la password.
E' pratica comune controllare o hashare in md5 utente e password solo dopo l' invio dei dati alla pagina php che dovrebbe filtrare i furboni che vorrebbero accedere ad un' area protetta senza autorizzazione.
Con questo metodo possiamo non solo evitare di inviare in chiaro dati durante la richiesta di accesso ma possiamo anche evitare di far elaborare una pagina piu' o meno complessa addetta allo scopo attraverso un'altra dedicata e potenzialmente ottimizzata, grazie al poco codice ed alla poca memoria utilizzata.
Va comunque sottolineato che a prescindere dal metodo, se non siamo in un' area protetta, un malizioso potrebbe riuscire lostesso ad intercettare tali dati, ma come ho già detto, non riuscirebbe ad intercettarli puliti.

Di cosa abbiamo bisogno lato client ?
Per prima cosa di un browser che supporti javascript e che lo abbia abilitato.
Poi abbiamo bisgono di:

codice:

	1 - 	Classe MD5 per JavaScript
	2 - 	Un file per il Login, sempre JS, che effettuerà 
		le operazioni di verifica e manipolazione dati al submit della nostra form di login

In ultimo, ma non per utilità, abbiamo bisogno di una pagina dove inserire lo pseudo form per effettuare il login.
Per venire in contro a tutte le esigenze ho scritto un codice XHTML 1.1 , CSS2 e WCAG 1.0 , cosi' da non aver problemi di contesto.
index.php ( o formlogin.php o quello che e' insomma )

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" >
	<head>
		<title>JavaScript Login Example</title>
		<script type="text/javascript" src="md5.js"></script>
		<script type="text/javascript" src="Login.js"></script>
		<style type="text/css">
			label, legend {
				display: none;
			}
			#login {
				padding: 2px;
				width: 234px;
				max-width: 222px;
				border: 1px solid #DDD;
				background-color: #EFEFEF;
				text-align: right;
			}
			#uname, #upass, #logbtn {
				font-family: Verdana, Helvetica, sans-serif;
				font-size: 8pt;
				border: 1px solid #E5E5E5;
			}
			#logbtn {
				width: 50px;
			}
			#uname, #upass {
				width: 80px;
			}
		</style>
	</head>
	<body>
		<div>
			<form method="post" action="login.php" 
				onsubmit="return logInit('uname', 'upass', 'logbtn');"
			>
				<fieldset id="login">
					<legend>Login Utente</legend>
						<label for="uname">User name</label>
						<input id="uname" name="user" type="text"
							value="<?=isset($_GET['error']) ? 'wrong login':'';?>"
						/>
						<label for="upass">User password</label>
						<input id="upass" name="pass" type="password" />
						<label for="logbtn">Login button</label>
						<input id="logbtn" type="submit" value="login" />
				</fieldset>
			</form>
		</div>
	</body>
</html>

Ovviamente è possibile personalizzare tramite CSS la grafica del form.
Va notato che la scritta 'wrong login' e' la stessa controllata nel file Login.js, qualora fosse necessario scrivere un' altra frase dovreste cambiarla anche in quel file.

A questo punto potete già leggervi il file Login.js il quale é commentato appositamente per capire quale é la procedura e come va sfruttata.
Ovviamente resto a disposizione per dubbi su quanto viene fatto, ma soprattutto per consigli la dove si potrebbe migliorare l'affidabilità del sistema proposto ( JS come PHP ) .

Di cosa abbiamo bisogno lato server ?
Ovviamente di PHP almeno 4.3.0 , uno spazio dove poter fare i nostri tests e:

codice:

	1 - 	File con una funzione ( o anche piu' funzioni a seconda delle esigenze )
		in grado di verificare l' autenticita' dei dati e di restituirci un riscontro sugli stessi
	2 - 	File con le operazioni da effettuare per il login "trasparente"
	3 - 	Uno o piu' files per la nostra area protetta

L' ideale sarebbe appoggiare la funzione ad un database, ma teoricamente sarebbe possibile sfruttare il sistema anche con gestioni su filesystem.
Ora andiamo a vedere nel dettaglio questi files e seguiamo i commenti esplicativi.

validUser.php ( il file con la funzione di verifica dati )

codice:

<?php
// funzione per verificare se in database esiste un
// utente con questo nome e questa password
// entrambi devono essere degli hash md5
function validUser(&$user, &$pass) {
	
	// imposto il valore di ritorno
        $result = false;
	
	// verifico l' hash md5 dei dati
	$pr = "/(?i)^[a-f0-9]{32}$/";
        if(preg_match($pr, $user) && preg_match($pr, $pass)) {
	
		// effettuo la query in database ... non in questo esempio
                $query = 'SELECT id FROM table WHERE MD5(user) = "'.$user.'" AND MD5(pass) = "'.$pass.'"';
	
		// ovviamente solo se avro' un riscontro di un record ...
                $result = true;
	}
	return $result;
}

// imposto le pagine utili per gestire i login e filtrare gli utenti
// ( variabili usate in altri files, quindi è più comodo metterle direttamente qui )
$redirect_after_login_success = 'ok.php';
$redirect_after_login_error = 'index.php?error=true';
?>

login.php ( il file di gestione autenticazione )

codice:

<?php
// includo il file validUser
require('validUser.php');

// imposto reindirizzamento di default alla pagina di login
$page = &$redirect_after_login_error;

// verifico che i valori user e pass siano stati postati
// solo in questo caso faccio le mie operazioni, altrimenti é inutile
if(isset($_POST['user'], $_POST['pass'])) {

	// se l'utente esiste ed é valido
	if(validUser($_POST['user'], $_POST['pass'])) {
		
		// imposto il cookie utente e pass e li faccio scadere
                // alla chiusura del browser
                setcookie('authentication', $_POST['user'].'|'.$_POST['pass'], 0, '/');
		
		// imposto il reindirizzamento alla pagina protetta
                $page = &$redirect_after_login_success;
	}
}

// headers per reindirizzare l' utente
header('Location: '.$page);
?>

ok.php ( la pagina protetta dal sistema )

codice:

<?php
// includo il file validUser
require('validUser.php');

// se l' utente ha il cookie ed e' splittabile ed ha 2 soli elementi
// e passa il controllo in database ...
if(
	isset($_COOKIE['authentication']) &&
	(strpos($_COOKIE['authentication'], '|') !== false) &&
	(@$dati = explode('|', $_COOKIE['authentication'])) &&
	count($dati) === 2 && 
	validUser($dati[0], $dati[1])
) {
	// ... continuiamo con il nostro script protetto
	echo "<h1>Benvenuto utente loggato.</h1>";
}
else
	// altrimenti l' utente e' un fagiano o un furbo che ci prova,
        // rimandiamolo al login
	header('Location: '.$redirect_after_login_error);
?>

Come è facile notare i nomi sono modificabili, basta correggere eventuali redirect ( o semplicemente le variabili di redirect nel php ) per riadattare come volete questo sistema.
Un test funzionante é visionabile al seguente indirizzo ma non richiede una vera e propria autenticazione:
http://www.3site.it/LOGIN_CROSSBROWSER/

Ora tocca a voi insultarmi, migliorare il sistema o fare domande

gm · 21-10-2005, 09:42

Aggiunta al thread in rilievo

**andr3a** · 21-10-2005, 09:48

Originariamente inviato da gm
Aggiunta al thread in rilievo

... ovviamente anche un tuo commento o insulto sarebbe gradito

gm · 21-10-2005, 09:59

Bella e molto utile.

Io uso qualcosa del genere, ma in versione semplificata, per un login ad un'amministrazione

**daniele_dll** · 21-10-2005, 11:57

al posto del trim dentro login.hs se po usà ... ehm ... solo questa righetta

NomeString.replace(/^\s*|\s*$/g, '')

**andr3a** · 21-10-2005, 14:21

Originariamente inviato da daniele_dll
al posto del trim dentro login.hs se po usà ... ehm ... solo questa righetta

NomeString.replace(/^\s*|\s*$/g, '')

gia' corretta

**andr3a** · 15-11-2005, 14:50

vorrei chiedere una modifica da parte dei mods poiche' ho riscontrato anomalie forse di versione tra le prove fatte con i codici di questa pillola ed il php , ora 5.0.5 che ho in locale.

Per evitare casini conviene modificare la funzione validUsers in questo modo ( in bold la parte modificata )

codice:

function validUser(&$user, &$pass) {
	
	// imposto il valore di ritorno
        $result = false;
	
	// verifico l' hash md5 dei dati
	$pr = "/(?i)^[a-f0-9]{32}$/";
        if(preg_match($pr, $user) && preg_match($pr, $pass)) {
	
		// effettuo la query in database ... non in questo esempio
                $query = 'SELECT id FROM table WHERE MD5(user) = "'.$user.'" AND MD5(pass) = "'.$pass.'"';
	
		// ovviamente solo se avro' un riscontro di un record ...
                $result = true;
	}
	return $result;
}

grazie e scusate

**artikade** · 25-01-2006, 11:41

nel caso in cui io non volessi usare una tabella nel DB, per rapidità avendo un solo login...può andare bene così?

codice:

<?php
// funzione per verificare se in database esiste un
// utente con questo nome e questa password
// entrambi devono essere degli hash md5
function validUser(&$user, &$pass) {
	
	// imposto il valore di ritorno
        $result = false;
	
	// verifico l' hash md5 dei dati
	$pr = "/(?i)^[a-f0-9]{32}$/";
        if(preg_match($pr, $user) && preg_match($pr, $pass)) {
	
		// effettuo la query in database ... non in questo esempio
                if($user=="risultato md5 della user" && $pass=="risultato md5 della password"){
	
		// ovviamente solo se avro' un riscontro di un record ...
                $result = true;
}
	}
	return $result;
}

// imposto le pagine utili per gestire i login e filtrare gli utenti
// ( variabili usate in altri files, quindi è più comodo metterle direttamente qui )
$redirect_after_login_success = 'carica-file.php';
$redirect_after_login_error = 'index.php?error=true';
?>

**andr3a** · 25-01-2006, 12:22

tantovale, in questo caso, fare così

codice:

function validUser(&$user, &$pass) {
	return ($user==="risultato md5 della user" && $pass==="risultato md5 della password");
}

**artikade** · 25-01-2006, 13:46

grazie mille!
<OT>come vanno le cose?</OT>

Discussione: [PILLOLA] Login più sicuro con JavaScript e PHP

Strumenti discussione

Ricerca discussione

Visualizza

[PILLOLA] Login più sicuro con JavaScript e PHP

scusate l'ignoranza

Permessi di invio