Menggunakan Perlindungan CSRF dengan Permintaan Django dan AJAX

Melindungi Permintaan AJAX Django dengan Perlindungan CSRF

Perlindungan CSRF (Pemalsuan Permintaan Merentas Tapak) terbina dalam Django, didayakan secara lalai apabila membuat projek dengan django-admin startproject, menggunakan token CSRF untuk melindungi daripada permintaan berniat jahat. Perisian tengah ini ditambahkan pada settings.py anda.

Setiap permintaan POST ke aplikasi Django anda memerlukan token CSRF yang sah. Dalam templat Django, ini dicapai dengan memasukkan {% csrf_token %} dalam sebarang bentuk menggunakan kaedah POST. Walau bagaimanapun, pengendalian perlindungan CSRF dengan permintaan AJAX bahagian hadapan yang berasingan memerlukan pendekatan yang berbeza.

Tutorial ini menunjukkan keselamatan aplikasi Django mudah dengan permintaan AJAX daripada bahagian hadapan yang berasingan.

Persediaan Aplikasi

Aplikasi contoh kami menampilkan dua titik akhir:

• DAPATKAN /get-picture: Dapatkan semula URL imej yang disimpan pada pelayan.
• SIARAN /set-picture: Mengemas kini URL imej yang disimpan pada pelayan.

Untuk kesederhanaan, pengendalian ralat ditinggalkan. Kod hujung belakang awal (dalam urls.py) adalah seperti berikut:

<code class="language-python">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)
]</code>

Fungsi bahagian hadapan yang sepadan (dipermudahkan):

<code class="language-javascript">// 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 })
    });
}</code>

Untuk mengendalikan Perkongsian Sumber Silang Asal (CORS), kami akan menggunakan pakej django-cors-headers.

Mendayakan Perlindungan CORS dan CSRF

Pasang django-cors-headers:

<code class="language-bash">pip install django-cors-headers</code>

Konfigurasikan settings.py:

<code class="language-python">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</code>

Sementara permintaan GET kini akan berfungsi dengan betul, permintaan POST akan gagal kerana perlindungan CSRF. Untuk menyelesaikan masalah ini, kami perlu mengurus token CSRF secara manual.

Mengambil dan Menggunakan Token CSRF

Buat paparan baharu untuk menyampaikan token CSRF:

<code class="language-python">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),
]</code>

Kemas kini bahagian hadapan untuk mengambil token (menggunakan js-cookie):

<code class="language-javascript">fetch("http://localhost:8000/get-csrf-token", { credentials: "include" });</code>

Pilihan credentials: "include" memastikan penyemak imbas mengendalikan sebarang pengepala Set-Cookie, menyimpan kuki csrftoken. Periksa tab rangkaian dalam alatan pembangun penyemak imbas anda untuk mengesahkan kuki ditetapkan.

Mengubah suai Permintaan POST

Akhir sekali, ubah suai fungsi set_picture untuk memasukkan token CSRF dalam pengepala:

<code class="language-javascript">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 })
    });
}</code>

Ini menambah pengepala X-CSRFToken dengan nilai daripada kuki csrftoken, membolehkan permintaan POST berjaya.

Pertimbangan Penting

Pendekatan ini mempunyai had, terutamanya apabila menggunakan bahagian hadapan dan belakang pada domain yang berbeza. Dasar keselamatan penyemak imbas mungkin menghalang tetapan atau mengakses kuki pihak ketiga, memberi kesan kepada pengurusan token CSRF.

Sumber

• Django CSRF Documentation
• Rujukan Django CSRF
• Dokumentasi CORS
• django-cors-headers
• Django CSRF_TRUSTED_ORIGINS
• Kod Sumber

Atas ialah kandungan terperinci Menggunakan Perlindungan CSRF dengan Permintaan Django dan AJAX. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!