Asegure sus Formularios con Formularios Claves

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

La seguridad es un tema muy polémico. Garantizar que sus sitios están seguros es extremadamente importante para cualquier aplicación web. De hecho, he pasado el 70% de mi tiempo asegurando aplicaciones. Una de las cosas más importantes que tenemos que asegurar son los formularios. Hoy vamos revisar un método para prevenir esto, se llama XSS (Cross-site scripting) y Cross-site instancias de falsificación en formularios.

¿Por qué?

Los datos POST pueden ser enviados desde un sitio web a otro. ¿Qué tiene ésto de malo? Veamos un escenario sencillo….

Un usuario se registro en su sitio web, éste visita otro sitio web durante su sesión. Este sitio web podrá enviar datos POST a su sitio web - por ejemplo, con AJAX. Debido a que el usuario está registrado en su sitio web, el otro sitio web podrá enviar datos post hacia formularios asegurados que solamente están accesibles después de iniciar sesión.

Además, debemos proteger nuestras páginas contra ataques usando cURL.

¿Cómo hacemos esto?

¡Con formularios claves! Añadiremos un símbolo # especial (un formulario clave) a cada formulario para garantizar que los datos solamente serán procesados cuando hayan sido enviados desde su sitio web. Después un formulario de envío, nuestro código PHP validará el formulario clave que fue enviado contra el formulario clave que habíamos configurado en la sesión.

Lo Qué Debemos Hacer:

Añadir un formulario clave a cada formulario.
Almacenar el formulario clave en una sesión.
Validar un formulario clave después de enviar un formulario.

Paso 1: Un formulario sencillo.

Primero, necesitamos un formulario sencillo para propósitos solamente de demostración. Uno de los formularios más importantes que tenemos que asegurar es el formulario para iniciar sesión. El formulario de acceso es vulnerable a fuertes ataques brutales. Así que vamos a crear un archivo nuevo, y guardarlo como index.php en su web-root. Agregue el siguiente código dentro del cuerpo:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
		<title>Securing forms with form keys</title>
	</head>
	<body>
		<form action="" method="post">
		<dl>
			<dt><label for="username">Username:</label></dt>
			<dd><input type="text" name="username" id="username" /></dd>
			<dt><label for="username">Password:</label></dt>
			<dd><input type="password" name="password" id="password" /></dd>
			<dt></dt>
			<dd><input type="submit" value="Login" /></dd>
		</dl>
		</form>
	</body>
	</html>

Ahora tenemos una página XHTML sencilla con un formulario de registro. Si quiere usar formularios clave en su sitio web, usted puede reemplazar el código de arriba con el de su página de acceso. Ahora, vamos a continuar con la acción real.

Paso 2: Crear una Clase

Vamos a crear una clase PHP para nuestro formulario clave. Porque cada página web puede contener solamente un formulario clave, podríamos hacer un semifallo de nuestra clase para asegurar que nuestra clase está usada de forma correcta. Debido al semifalllo que creamos es un tema de Programación Orientada a Objetos más avanzado, omitiremos esa parte. Ahora va a crear un archivo llamado formkey.class.php y lo colocará en su web-root. Ahora tenemos que pensar en las funciones que necesitamos. Primero, necesitamos una función para generar un formulario clave para que podamos colocarlo en nuestro formulario. En su archivo PHP coloque el siguiente código.

<?php

//You can of course choose any name for your class or integrate it in something like a functions or base class
class formKey
{
	//Here we store the generated form key
	private $formKey;
	
	//Here we store the old form key (more info at step 4)
	private $old_formKey;
	
	//Function to generate the form key
	private function generateKey()
	{
		
	}
}
?>

Arriba, usted vio una clase con tres partes: dos variables y una función. Hacemos la función privada porque esta función solamente será usada por nuestras funciones output, las cuales crearemos después. En las dos variables, almacenaremos los formularios claves. Estos, también son privados porque sólo pueden ser utilizados por funciones dentro de nuestra clase.

Ahora, tenemos que pensar en una manera para generar nuestro formulario clave. Puesto que nuestro formulario clave debe ser único (de lo contrario no tenemos algo de seguridad), usamos una combinación de la dirección IP de los usuarios para unir la clave al usuario, mt_rand() para hacerlo único, y la función uniquid() para hacerlo aún más único. Además, encriptamos esta información con el método md5() para crear un hash único que luego, podemos insertarlo en nuestras páginas. Ya que usamos md5(), un usuario no puede ver lo que usamos para generar una clave. Toda la función sería:

//Function to generate the form key
private function generateKey()
{
	//Get the IP-address of the user
	$ip = $_SERVER['REMOTE_ADDR'];
	
	//We use mt_rand() instead of rand() because it is better for generating random numbers.
	//We use 'true' to get a longer string.
	//See http://www.php.net/mt_rand for a precise description of the function and more examples.
	$uniqid = uniqid(mt_rand(), true);
	
	//Return the hash
	return md5($ip . $uniqid);
}

Inserte el código arriba en su archivo formkey.class.php. Reemplace la función con la función nueva.

Paso 3: Inserte un Formulario Clave en Nuestro Formulario

Para este paso, creamos una función nueva que produce un campo HTML oculto con nuestro formulario clave. La función consiste de tres pasos:

Generate, Save, Output

Generar un formulario clave con nuestra función generateKey().
Almacenar el formulario clave en nuestra variable $formKey y en una sesión.
Producir el campo HTML.

Llamamos a nuestra función outputKey() y la hicimos publica, porque tenemos que usarla fuera de nuestra clase. Nuestra función invocará a la función generateKey() para generar un formulario clave nuevo y lo guardará en una sesión local. Por último, creamos el código XHTML. Ahora añadimos el siguiente código dentro de nuestra clase PHP:

//Function to output the form key
public function outputKey()
{
	//Generate the key and store it inside the class
	$this->formKey = $this->generateKey();
	//Store the form key in the session
	$_SESSION['form_key'] = $this->formKey;
	
	//Output the form key
	echo "<input type='hidden' name='form_key' id='form_key' value='".$this->formKey."' />";
}

Ahora, vamos a agregar el formulario clave para nuestro formulario de acceso para asegurarlo. Tenemos que incluir la clase en nuestro archivo index.php. Además, necesitamos iniciar sesión debido a que nuestra clase usa sesiones para almacenar la clave generada. Por esto, agregamos el siguiente código arriba del doctype y la etiqueta head:

<?php
//Start the session
session_start();
//Require the class
require('formkey.class.php');
//Start the class
$formKey = new formKey();
?>

El código anterior es muy sencillo. Iniciamos sesión (porque almacenamos el formulario clave) y cargamos el archivo de la clase PHP. Después de eso, iniciamos la clase con new formKey(), esto creará nuestra clase y lo almacenará en $formKey. Ahora solamente tenemos que editar nuestro formulario para que contenga el formulario clave:

<form action="" method="post">
<dl>
	<?php $formKey->outputKey(); ?>
	<dt><label for="username">Username:</label></dt>
	<dd><input type="text" name="username" id="username" /></dd>
	<dt><label for="username">Password:</label></dt>
	<dd>input type="password" name="password" id="password" /></dd>
<dl>
</form>

¡Y eso es todo! Debido a que creamos la función outputKey(), solamente tenemos que incluirlo en nuestro formulario. Podemos usar formularios clave en cada formulario con sólo añadir <?php $formKey> outputKey(); ?> Ahora revise la fuente de su página web y puede ver que hay un formulario clave adjuntado al formulario. El único paso que queda por hacer es validar las solicitudes.

Paso 4: Validación

No validaremos el formulario completo, solamente el formulario clave. Validar el formulario es algo muy sencillo en PHP y, además, puede encontrar tutoriales por toda la web. Vamos a validar el formulario clave. Ya que nuestra función "generateKey" sobrescribe el valor de la sesión, entonces vamos a agregar un constructor a nuestra clase PHP. Un constructor será invocado cuando nuestra clase sea creada (o construida). El constructor almacenará la clave anterior dentro de la clase antes de que podamos crear una nueva, por lo que siempre tendremos el formulario clave anterior para validar nuestro formulario. Si no hacemos esto, no podremos validar el formulario clave. Agregue la siguiente función PHP a su clase:

//The constructor stores the form key (if one exists) in our class variable.
function __construct()
{
	//We need the previous key so we store it
	if(isset($_SESSION['form_key']))
	{
		$this->old_formKey = $_SESSION['form_key'];
	}
}

Un constructor siempre deberá llamarse __construct(). Cuando el constructor es invocado nosotros revisamos si una sesión está ajustad, y si es así, lo almacenamos de forma local en nuestra variable old_formKey.

Ahora podemos validar nuestro formulario clave. Creamos una función sencilla dentro de nuestra clase que valida el formulario clave. Esta función deberá ser publica porque vamos a usarla afuera de la clase. La función validará el valor POST del formulario clave contra el valor almacenado del formulario clave. Agregue esta función a la clase PHP:

//Function that validated the form key POST data
public function validate()
{
	//We use the old formKey and not the new generated version
	if($_POST['form_key'] == $this->old_formKey)
	{
		//The key is valid, return true.
		return true;
	}
	else
	{
		//The key is invalid, return false.
		return false;
	}
}

Dentro del index.php, validamos el formulario clave usando la función que acabamos de crear en nuestra clase. Por supuesto, solamente validamos después de la solicitud POST. Agregue el siguiente código después: $formKey = new formKey();

$error = 'No error';

//Is request?
if($_SERVER['REQUEST_METHOD'] == 'post')
{
	//Validate the form key
	if(!isset($_POST['form_key']) || !$formKey->validate())
	{
		//Form key is invalid, show an error
		$error = 'Form key error!';
	}
	else
	{
		//Do the rest of your validation here
		$error = 'No form key error!';
	}
}

Creamos una variable $error que almacena nuestro mensaje de error. Si un solicitud POST ha sido enviada, entonces nosotros validamos el formKey con $formKey->validate(). Si esto devuelve el valor false, entonces el formulario clave no es valido y mostrará un mensaje de error. Note que solamente validamos el formulario clave -- se espera que usted valide el resto del formulario.

En su HTML, usted puede colocar el siguiente código para mostrar un mensaje de error:

1	<div><?php if($error) { echo($error); } ?></div>

Esto hará que se imprima o echo la variable $error, claro, si fue configurada.

Si usted enciende su servidor y se dirige hacia el archivo index.php, verá que nuestro formulario y el mensaje "No error". Cuando usted envía un formulario, usted verá el mensaje "No form key error" ya que es una solicitud POST validad. Ahora, vuelva a cargar la página y acepte cuando su navegador solicite que el dato POST sea enviado otra vez. Verá que nuestro código activo un mensaje de error: "Form key error! Ahora su formulario clave está protegido contra entradas de otros sitios web ¡y de errores con actualización de páginas! El error también se muestra después de una actualización porque un formulario nuevo fue generado después de que enviamos el formulario. Esto es bueno porque, ahora, el usuario ya no puede publicar accidentalmente un formulario dos veces.

Código completo

Aquí está el código completo tanto de PHP como de HTML:

index.php

<?php
//Start the session
session_start();
//Require the class
require('formkey.class.php');
//Start the class
$formKey = new formKey();

$error = 'No error';

//Is request?
if($_SERVER['REQUEST_METHOD'] == 'post')
{
	//Validate the form key
	if(!isset($_POST['form_key']) || !$formKey->validate())
	{
		//Form key is invalid, show an error
		$error = 'Form key error!';
	}
	else
	{
		//Do the rest of your validation here
		$error = 'No form key error!';
	}
}
?>
	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<title>Securing forms with form keys</title>
</head>
<body>
	<div><?php if($error) { echo($error); } ?>
	<form action="" method="post">
	<dl>
		<?php $formKey->outputKey(); ?>

		<dt><label for="username">Username:</label></dt>
		<dd><input type="text" name="username" id="username" /></dd>
		<dt><label for="username">Password:</label></dt>
		<dd><input type="password" name="password" id="password" /></dd>
		<dt></dt>
		<dd><input type="submit" value="Submit" /></dd>
	<dl>
	</form>
</body>
</html>

fomrkey.class.php

<?php

//You can of course choose any name for your class or integrate it in something like a functions or base class
class formKey
{
	//Here we store the generated form key
	private $formKey;
	
	//Here we store the old form key (more info at step 4)
	private $old_formKey;
	
	//The constructor stores the form key (if one excists) in our class variable
	function __construct()
	{
		//We need the previous key so we store it
		if(isset($_SESSION['form_key']))
		{
			$this->old_formKey = $_SESSION['form_key'];
		}
	}

	//Function to generate the form key
	private function generateKey()
	{
		//Get the IP-address of the user
		$ip = $_SERVER['REMOTE_ADDR'];
		
		//We use mt_rand() instead of rand() because it is better for generating random numbers.
		//We use 'true' to get a longer string.
		//See http://www.php.net/mt_rand for a precise description of the function and more examples.
		$uniqid = uniqid(mt_rand(), true);
		
		//Return the hash
		return md5($ip . $uniqid);
	}

	
	//Function to output the form key
	public function outputKey()
	{
		//Generate the key and store it inside the class
		$this->formKey = $this->generateKey();
		//Store the form key in the session
		$_SESSION['form_key'] = $this->formKey;
		
		//Output the form key
		echo "<input type='hidden' name='form_key' id='form_key' value='".$this->formKey."' />";
	}

	
	//Function that validated the form key POST data
	public function validate()
	{
		//We use the old formKey and not the new generated version
		if($_POST['form_key'] == $this->old_formKey)
		{
			//The key is valid, return true.
			return true;
		}
		else
		{
			//The key is invalid, return false.
			return false;
		}
	}
}
?>

Conclusión

Agregue este código para cada formulario que sea importante en su sitio web e incrementará la seguridad de su formulario de forma dramática. Incluso detiene los problemas de actualización, como vimos en el paso 4. Ya que el formulario clave solamente es válido para una solicitud, ya no es posible una segunda publicación.

Este fue mi primer tutorial, espero que le guste ¡y qué lo use para mejorar su seguridad! Por favor, déjeme conocer sus opiniones a través de los comentarios. ¿Tienes usted un método mejor? ¡Déjenos saberlo!

Lecturas Adicionales

WordPress también usa formularios claves (llamados Nonces): Wordpress Nonces
Siete hábitos para escribir aplicaciones seguras con PHP

Nos puede seguir a través de Twitter o, también, puede suscribir a NETTUTS RSS Feed para artículos y tutoriales diarios sobre desarrollo web.

1	<?php
2
3	//You can of course choose any name for your class or integrate it in something like a functions or base class
4	class formKey
5	{
6	//Here we store the generated form key
7	private $formKey;
8
9	//Here we store the old form key (more info at step 4)
10	private $old_formKey;
11
12	//The constructor stores the form key (if one excists) in our class variable
13	function __construct()
14	{
15	//We need the previous key so we store it
16	if(isset($_SESSION['form_key']))
17	{
18	$this->old_formKey = $_SESSION['form_key'];
19	}
20	}
21
22	//Function to generate the form key
23	private function generateKey()
24	{
25	//Get the IP-address of the user
26	$ip = $_SERVER['REMOTE_ADDR'];
27
28	//We use mt_rand() instead of rand() because it is better for generating random numbers.
29	//We use 'true' to get a longer string.
30	//See http://www.php.net/mt_rand for a precise description of the function and more examples.
31	$uniqid = uniqid(mt_rand(), true);
32
33	//Return the hash
34	return md5($ip . $uniqid);
35	}
36
37
38	//Function to output the form key
39	public function outputKey()
40	{
41	//Generate the key and store it inside the class
42	$this->formKey = $this->generateKey();
43	//Store the form key in the session
44	$_SESSION['form_key'] = $this->formKey;
45
46	//Output the form key
47	echo "<input type='hidden' name='form_key' id='form_key' value='".$this->formKey."' />";
48	}
49
50
51	//Function that validated the form key POST data
52	public function validate()
53	{
54	//We use the old formKey and not the new generated version
55	if($_POST['form_key'] == $this->old_formKey)
56	{
57	//The key is valid, return true.
58	return true;
59	}
60	else
61	{
62	//The key is invalid, return false.
63	return false;
64	}
65	}
66	}
67	?>