Get it on Google Play

Seguridad IT: Protegiéndote de ataques CSRF con Spring y Angular

29-02-2016
 
Seguridad IT

Seguridad IT

Spring trae por defecto la protección contra ataques CSRF(Cross Site Request Forgery), esto hace que sea un poco mas complejo hacer llamadas tipo POST, pero es altamente recomendable mantenerlo habilitado. Al principio puede parecer engorroso, pero al final es un hábito que cuando lo tienes no añade trabajo extra.

En que consiste un ataque CSRF(Cross Site Request Forgery)

Lo primero es entender en que consiste un ataque CSRF. Básicamente se trata de aprovechar que el usuario ya ha abierto sesión(O no) en un sitio web para, desde una web maliciosa, hacer peticiones. Por ejemplo:

Vamos a suponer que te abres sesión en un eCommerce en el que compras a menudo y, por lo tanto, mantienes tu sesión abierta. Ahora piensa que estas navegando por un site malicioso(Por ejemplo, porque has recibido un mail dudoso) y este te presenta un formulario que manda una petición post al otro sitio para hacer un pedido con tu usuario… Ya la tenemos liada.

Como protegemos nuestras aplicaciones web para que esto no pase

Por lo general, la mejor manera de protegerse frente a estos ataques es hacer que por cada petición de acción(Las POSTs) en tu sitio web deba estar marcada de alguna forma unívoca. Por ejemplo, que cada formulario deba estar marcado con un parámetro que solo sirva para un formulario concreto por cada sesión.

Como lo implementamos en Spring

Spring nos inyecta en cada vista dos variables, el parámetro(Normalmente X-CSRF-TOKEN) que espera recibir en la cabecera o como parámetro en la petición y el valor de dicho parámetro.

Su usamos vistas JSPs lo implemntariamos de la siguiente manera:

<form action="/mi-accion" method="post">
	<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>

	<input type="Enviar" value="Log out" />
</form>

Como lo implementamos en nuestras peticiones AJAX con Angular

Angular nos ofrece un mecanismo para añadir a la cabecera los parámetros que queramos. Además, podemos hacerlo muy elegante simplemente añadiendo los parámetros en la cabecera y despues leerlos via Javascript(En este ejemplo utilizo thymeleaf, para hacerlo mas ameno 😀 ):

<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>

<script>
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
					
$http.defaults.headers.post[header] = token;
					
$http.post( "/mi-peticion-post”, { } ).success(function(data) {
	/* que hacer si OK */
     }).error(function(data) {
	/* que hacer si KO */
      console.log('Error: ' + data);
     });					
</script>

En fin, a ver si esto sirve para que las aplicaciones sean un poco mas seguras.

Leave a Reply

© Albert Coronado Calzada