Django CSRF cuando el backend y el frontend están separados

Question

Después de buscar en Internet, las personas normalmente se ocupan de esta situación --- el front-end es generado por la función django view que puede enviar al usuario la cookie del token csrf. Cuando el usuario tiene una solicitud al servidor que usa ajax, la gente puede reescribir el comportamiento ajaxSend que envía el csrf al servidor.

Sin embargo, mi situación es que mi front-end está totalmente separado del back-end, es decir, mi interfaz está en un servidor dedicado ejecutando nginx, y solo tengo un html que proporciona todas las páginas usando hashbang . Mi back-end se ejecuta en un servidor diferente usando un nombre de dominio diferente, y en este caso, ¿cómo obtiene el cliente la cookie csrf? Mi back-end solo me brindó json api return.

Gracias.

Answer 1

If you look at the CRSF token source: you can see that all the csrf_middleware does it check the cookie against the post value. Solo necesita recuperar el valor de la publicación en su servidor, ya que la cookie ya debería haberse establecido a través de ajax. If you look at the template tag source you can see that it is just taking the variable out of the context. O pegúelo en su respuesta sacándolo del contexto si está disponible o calling the context processor directly. Ahora solo tiene que devolverlo como la variable POST crsf_token.

Answer 2

Digamos que frontend tiene el dominio frontend.example.com y el dominio backend.example.com. (Si es algo así como el marco de descanso de Django) Si puede usar, existen dos formas de habilitar la capa de seguridad, es decir,. Protección CSRF o CORS

Para CORS,

pip install django-cors-headers 

y luego a la configuración de este INSTALLED_APPS, MIDDLEWARE_CLASSES y añadir el dominio de terminal a CORS_ORIGIN_WHITELIST.

CORS_ORIGIN_WHITELIST = (
    'frontend.example.com' 
) 

CORS bloquearán cualquier solicitud HTTP que surge de cualquier dominio que no sea frontend.example.com

---

Para CSRF,

CSRF_COOKIE_DOMAIN = ".mydomain.com" 

y si está utilizando una aplicación angular, haga clic abajo,

$httpProvider.defaults.xsrfCookieName = 'csrftoken'; 
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 
$httpProvider.defaults.withCredentials = true; 

y luego agregue encabezados mientras realiza una solicitud http.

headers : { 
    "x-csrftoken" : $cookies.csrftoken 
}