Header Ads Widget

Ticker

6/recent/ticker-posts

Adición de la protección CSRF de Django a los formularios React

 En este tutorial, verá cómo puede manejar el token CSRF de Django en React cuando usa el cliente Axios o la API de recuperación. También veremos cómo puede agregar CSRF en formularios renderizados dinámicamente con React

La mayoría de las veces, cuando esté construyendo aplicaciones React / Redux con un marco de Django, deberá enviar solicitudes POST, PUT, PATCH y DELETE (que requieren un token CSRF válido incluido en cada solicitud) contra un punto final de API utilizando un cliente HTTP biblioteca como Axios o la API de búsqueda estándar del navegador.

CSRF son las siglas de Cross-Site Request Forgery y es un tipo de ataque de Cross-Site Scripting que puede enviarse desde un sitio malicioso a través del navegador de un visitante a su servidor.

Django tiene una protección incorporada contra ataques CSRF utilizando el middleware CSRF que se incluye de forma predeterminada con cada nuevo proyecto. Esto es lo que dice Django docs sobre el middleware CSRF

El middleware CSRF y la etiqueta de plantilla brindan protección fácil de usar contra falsificaciones de solicitudes entre sitios. Este tipo de ataque ocurre cuando un sitio web malicioso contiene un enlace, un botón de formulario o algo de JavaScript que tiene la intención de realizar alguna acción en su sitio web, utilizando las credenciales de un usuario registrado que visita el sitio malicioso en su navegador. También se cubre un tipo de ataque relacionado, 'iniciar sesión en CSRF', en el que un sitio atacante engaña al navegador de un usuario para que inicie sesión en un sitio con las credenciales de otra persona .-- Django docs

Django también proporciona la { % csrf_token % }etiqueta que necesita incluir en los formularios de sus plantillas que usan una solicitud POST para proteger su aplicación de ser explotada usando CSRF. Así es como puede usarlo:

<form action="" method="post">
{ % csrf_token % }
</form>

No necesita incluirlo explícitamente si está usando Django Forms.

Manejo de CSRF al usar React

Al usar JavaScript como React, debe encontrar una manera de manejar los tokens CSRF si no desea deshabilitarlo.

Hay muchos métodos que puede usar dependiendo del cliente HTTP que esté usando, pero generalmente necesita leer el token CSRF de una cookie de Django y enviarlo con cualquier solicitud al back-end de Django.

Manejo de tokens CSRF en React / Axios

Para el cliente Axios tiene tres opciones:

  • puede adjuntar manualmente el token CSRF en el encabezado de cada llamada de Axios
  • puedes usar Axios xsrfHeaderNamepara cada llamada
  • puedes usar un valor predeterminado xsrfHeaderNameaxios.defaults.xsrfHeaderName = "X-CSRFToken")

Así es como puede simplemente usar el token CSRF con Axios sin ninguna configuración adicional:

import axios from 'axios';

axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'

Manejo de tokens CSRF en React / Fetch

Ahora veamos cómo puede hacerlo usando la API de recuperación.

El primer paso es obtener el token CSRF que se puede recuperar de la csrftokencookie de Django (se configurará solo si habilitó la protección CSRF en Django).

Ahora, en los documentos de Django , puede averiguar cómo obtener el token csrf de la cookie utilizando esta sencilla función de JavaScript:

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

También puede encontrar otra implementación para esta función en Github .

Ahora puede recuperar el token CSRF llamando a la getCookie('csrftoken')función

var csrftoken = getCookie('csrftoken');

A continuación, puede usar este token csrf al enviar una solicitud fetch()asignando el token recuperado al X-CSRFTokenencabezado.

  fetch(url, {
    credentials: 'include',
    method: 'POST',
    mode: 'same-origin',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'X-CSRFToken': csrftoken
    },
    body: {}
   })
  }

Representación del token CSRF en formularios React

Si está utilizando React para representar formularios en lugar de plantillas de Django, también debe representar el token csrf porque la etiqueta Django { % csrf_token % }no está disponible en el lado del cliente, por lo que debe crear un componente de orden superior que recupere el token usando la getCookie()función y lo renderice de cualquier manera.

Entonces, primero comience creando un HOC en csrftoken.js

import React from 'react';

var csrftoken = getCookie('csrftoken');

const CSRFToken = () => {
    return (
        <input type="hidden" name="csrfmiddlewaretoken" value={csrftoken} />
    );
};
export default CSRFToken;

Luego, simplemente puede importarlo y llamarlo dentro de su formulario

import React, { Component , PropTypes} from 'react';

import CSRFToken from './csrftoken';


class aForm extends Component {
    render() {

        return (
                 <form action="/endpoint" method="post">
                        <CSRFToken />
                        <button type="submit">Send</button>
                 </form>
        );
    }
}

export default aForm;

La cookie CSRF de Django

React procesa los componentes de forma dinámica, por eso es posible que Django no pueda configurar una cookie de token CSRF si está procesando su formulario con React. Así dice Django docs sobre eso:

Si su vista no representa una plantilla que contiene la etiqueta de plantilla de token csrf , es posible que Django no establezca la cookie del token CSRF. Esto es común en los casos en que los formularios se agregan dinámicamente a la página. Para abordar este caso, Django proporciona un decorador de vistas que fuerza la configuración de la cookie: asegúrese de que csrf_cookie ().

Para resolver este problema, Django proporciona el decorador de cookies asegúrese de csrf que debe agregar a su función de vista. Por ejemplo:

from django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def myview(request):
    #...

Manejo de CSRF usando React / Redux

Si está utilizando Redux para administrar el estado de su aplicación, puede usar este módulo para manejar el token CSRF en Redux .

Puede usar instalándolo primero desde npm con

npm install redux-csrf --save

Luego, puede usar la setCsrfToken(token)API que configura el token CSRF en la tienda Redux.

Conclusión

La protección CSRF incorporada proporcionada por Django es muy útil para proteger su servidor de sitios web maliciosos que pueden explotar el navegador de su visitante para atacarlo, pero cuando utilice bibliotecas JavaScript modernas, deberá manejar CSRF de manera diferente. En este artículo, hemos visto diferentes formas de manejar CSRF en aplicaciones React en lugar de deshabilitarlo.

Publicar un comentario

0 Comentarios