Table des matières
Sécurisation des requêtes Django AJAX avec la protection CSRF
Configuration de l'application
Activation de la protection CORS et CSRF
Récupération et utilisation du jeton CSRF
Modifier la requête POST
Considérations importantes
Ressources
Maison développement back-end Tutoriel Python Utilisation de la protection CSRF avec les requêtes Django et AJAX

Utilisation de la protection CSRF avec les requêtes Django et AJAX

Jan 07, 2025 pm 06:15 PM

Using CSRF Protection with Django and AJAX Requests

Sécurisation des requêtes Django AJAX avec la protection CSRF

La protection CSRF (Cross-Site Request Forgery) intégrée de Django, activée par défaut lors de la création d'un projet avec django-admin startproject, utilise un jeton CSRF pour se protéger contre les requêtes malveillantes. Ce middleware est ajouté à votre settings.py.

Chaque requête POST adressée à votre application Django nécessite un jeton CSRF valide. Dans les modèles Django, ceci est réalisé en incluant {% csrf_token %} dans n'importe quel formulaire en utilisant la méthode POST. Cependant, la gestion de la protection CSRF avec des requêtes AJAX frontales distinctes nécessite une approche différente.

Ce tutoriel montre comment sécuriser une application Django simple avec des requêtes AJAX provenant d'un front-end séparé.

Configuration de l'application

Notre exemple d'application comporte deux points de terminaison :

  • GET /get-picture : Récupère l'URL d'une image stockée sur le serveur.
  • POST /set-picture : Met à jour l'URL de l'image stockée sur le serveur.

Pour plus de simplicité, la gestion des erreurs est omise. Le code backend initial (dans urls.py) est le suivant :

from django.urls import path
from django.http import JsonResponse
import json

picture_url = "https://picsum.photos/id/247/720/405"

def get_picture(request):
    return JsonResponse({"picture_url": picture_url})

def set_picture(request):
    if request.method == "POST":
        global picture_url
        picture_url = json.loads(request.body)["picture_url"]
        return JsonResponse({"picture_url": picture_url})

urlpatterns = [
    path("get-picture", get_picture),
    path("set-picture", set_picture)
]
Copier après la connexion

Les fonctions front-end correspondantes (simplifiées) :

// GET request to retrieve the image URL
async function get_picture() {
    const res = await fetch("http://localhost:8000/get-picture");
    const data = await res.json();
    return data.picture_url;
}

// POST request to update the image URL
async function set_picture(picture_url) {
    const res = await fetch("http://localhost:8000/set-picture", {
        method: "POST",
        body: JSON.stringify({ "picture_url": picture_url })
    });
}
Copier après la connexion

Pour gérer le partage de ressources cross-origine (CORS), nous utiliserons le package django-cors-headers.

Activation de la protection CORS et CSRF

Installer django-cors-headers :

pip install django-cors-headers
Copier après la connexion

Configurer settings.py :

INSTALLED_APPS = [
    "corsheaders",
    # ... other apps
]

MIDDLEWARE = [
    "corsheaders.middleware.CorsMiddleware",
    # ... other middleware
]

CORS_ALLOWED_ORIGINS = ["http://localhost:4040"] # Adjust port as needed
CSRF_TRUSTED_ORIGINS = ["http://localhost:4040"] # Add your frontend origin
Copier après la connexion

Bien que les requêtes GET fonctionnent désormais correctement, les requêtes POST échoueront en raison de la protection CSRF. Pour résoudre ce problème, nous devons gérer manuellement les jetons CSRF.

Récupération et utilisation du jeton CSRF

Créez une nouvelle vue pour servir le jeton CSRF :

from django.views.decorators.csrf import ensure_csrf_cookie
from django.http import JsonResponse

@ensure_csrf_cookie
def get_csrf_token(request):
    return JsonResponse({"success": True})

urlpatterns = [
    # ... other paths
    path("get-csrf-token", get_csrf_token),
]
Copier après la connexion

Mettez à jour le front-end pour récupérer le jeton (en utilisant js-cookie) :

fetch("http://localhost:8000/get-csrf-token", { credentials: "include" });
Copier après la connexion

L'option credentials: "include" garantit que le navigateur gère tous les en-têtes Set-Cookie, en stockant le cookie csrftoken. Inspectez l'onglet Réseau dans les outils de développement de votre navigateur pour vérifier que le cookie est défini.

Modifier la requête POST

Enfin, modifiez la fonction set_picture pour inclure le token CSRF dans l'en-tête :

async function set_picture(picture_url) {
    const res = await fetch("http://localhost:8000/set-picture", {
        method: "POST",
        credentials: "include",
        headers: {
            'X-CSRFToken': Cookies.get("csrftoken")
        },
        body: JSON.stringify({ "picture_url": picture_url })
    });
}
Copier après la connexion

Cela ajoute l'en-tête X-CSRFToken avec la valeur du cookie csrftoken, permettant ainsi les requêtes POST réussies.

Considérations importantes

Cette approche présente des limites, notamment lors du déploiement du front-end et du back-end sur des domaines différents. Les politiques de sécurité du navigateur peuvent empêcher la configuration ou l'accès à des cookies tiers, ce qui a un impact sur la gestion des jetons CSRF.

Ressources

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Python vs C: applications et cas d'utilisation comparés Python vs C: applications et cas d'utilisation comparés Apr 12, 2025 am 12:01 AM

Python convient à la science des données, au développement Web et aux tâches d'automatisation, tandis que C convient à la programmation système, au développement de jeux et aux systèmes intégrés. Python est connu pour sa simplicité et son écosystème puissant, tandis que C est connu pour ses capacités de contrôle élevées et sous-jacentes.

Combien de python pouvez-vous apprendre en 2 heures? Combien de python pouvez-vous apprendre en 2 heures? Apr 09, 2025 pm 04:33 PM

Vous pouvez apprendre les bases de Python dans les deux heures. 1. Apprenez les variables et les types de données, 2. Structures de contrôle maître telles que si les instructions et les boucles, 3. Comprenez la définition et l'utilisation des fonctions. Ceux-ci vous aideront à commencer à écrire des programmes Python simples.

Python: jeux, GUIS, et plus Python: jeux, GUIS, et plus Apr 13, 2025 am 12:14 AM

Python excelle dans les jeux et le développement de l'interface graphique. 1) Le développement de jeux utilise Pygame, fournissant des fonctions de dessin, audio et d'autres fonctions, qui conviennent à la création de jeux 2D. 2) Le développement de l'interface graphique peut choisir Tkinter ou Pyqt. Tkinter est simple et facile à utiliser, PYQT a des fonctions riches et convient au développement professionnel.

Le plan Python de 2 heures: une approche réaliste Le plan Python de 2 heures: une approche réaliste Apr 11, 2025 am 12:04 AM

Vous pouvez apprendre les concepts de programmation de base et les compétences de Python dans les 2 heures. 1. Apprenez les variables et les types de données, 2. Flux de contrôle maître (instructions et boucles conditionnelles), 3. Comprenez la définition et l'utilisation des fonctions, 4. Démarrez rapidement avec la programmation Python via des exemples simples et des extraits de code.

Python: Explorer ses applications principales Python: Explorer ses applications principales Apr 10, 2025 am 09:41 AM

Python est largement utilisé dans les domaines du développement Web, de la science des données, de l'apprentissage automatique, de l'automatisation et des scripts. 1) Dans le développement Web, les cadres Django et Flask simplifient le processus de développement. 2) Dans les domaines de la science des données et de l'apprentissage automatique, les bibliothèques Numpy, Pandas, Scikit-Learn et Tensorflow fournissent un fort soutien. 3) En termes d'automatisation et de script, Python convient aux tâches telles que les tests automatisés et la gestion du système.

Python vs C: courbes d'apprentissage et facilité d'utilisation Python vs C: courbes d'apprentissage et facilité d'utilisation Apr 19, 2025 am 12:20 AM

Python est plus facile à apprendre et à utiliser, tandis que C est plus puissant mais complexe. 1. La syntaxe Python est concise et adaptée aux débutants. Le typage dynamique et la gestion automatique de la mémoire le rendent facile à utiliser, mais peuvent entraîner des erreurs d'exécution. 2.C fournit des fonctionnalités de contrôle de bas niveau et avancées, adaptées aux applications haute performance, mais a un seuil d'apprentissage élevé et nécessite une gestion manuelle de la mémoire et de la sécurité.

Python et temps: tirer le meilleur parti de votre temps d'étude Python et temps: tirer le meilleur parti de votre temps d'étude Apr 14, 2025 am 12:02 AM

Pour maximiser l'efficacité de l'apprentissage de Python dans un temps limité, vous pouvez utiliser les modules DateTime, Time et Schedule de Python. 1. Le module DateTime est utilisé pour enregistrer et planifier le temps d'apprentissage. 2. Le module de temps aide à définir l'étude et le temps de repos. 3. Le module de planification organise automatiquement des tâches d'apprentissage hebdomadaires.

Python: automatisation, script et gestion des tâches Python: automatisation, script et gestion des tâches Apr 16, 2025 am 12:14 AM

Python excelle dans l'automatisation, les scripts et la gestion des tâches. 1) Automatisation: La sauvegarde du fichier est réalisée via des bibliothèques standard telles que le système d'exploitation et la fermeture. 2) Écriture de script: utilisez la bibliothèque PSUTIL pour surveiller les ressources système. 3) Gestion des tâches: utilisez la bibliothèque de planification pour planifier les tâches. La facilité d'utilisation de Python et la prise en charge de la bibliothèque riche en font l'outil préféré dans ces domaines.

See all articles