Посилення Django: Захист AJAX запитів та боротьба з CSRF - javascript.org.ua

Уявіть собі, що ви натискаєте на, здавалося б, безпечну кнопку на вебсайті, і виявляється, що ви без відома ініціюєте шкідливу атаку. У світі веб-розробки такі загрози — коли кіберзлочинці маніпулюють користувачами, змушуючи їх надсилати несанкціоновані запити — є дуже реальними. Відомі як Cross-Site Request Forgery (CSRF), ці атаки можуть використовувати AJAX-запити, щоб обдурити користувачів і порушити цілісність даних.

Ось типова ситуація: ви заповнюєте форму на надійному сайті. Тим часом зловмисник створює шахрайську кнопку-маніпулятор на іншому вебсайті. Коли ви натискаєте на неї, підроблений AJAX-пейлоуд безшумно надсилається на цільовий сайт від вашого імені. Завдяки заздалегідь заповненим значенням, створеним зловмисником, він може опублікувати несанкціоновані дані, ініціювати транзакції або навіть маніпулювати вашим обліковим записом — все це без вашої згоди чи обізнаності.

У сьогоднішньому конкурентному онлайн-середовищі забезпечення безперебійної та інтерактивної роботи користувача є важливим аспектом. Функції, такі як динамічне фільтрування продуктів, оновлення в реальному часі та зручна навігація, критично важливі для збереження клієнтів, особливо на електронних комерційних платформах. Однак ці зручності для користувачів не повинні ставати причиною компромісу в безпеці.

Саме тут на допомогу приходить захист CSRF у Django, який виступає критично важливим захисним шаром. Він гарантує, що ваш веб-додаток залишатиметься одночасно інтерактивним та безпечним, перевіряючи кожен запит — навіть ті, що надсилаються через AJAX.

Важливість AJAX і CSRF-токенів у Django

AJAX (Asynchronous JavaScript and XML) революціонізує користувацький досвід, дозволяючи динамічну взаємодію між клієнтом і сервером без необхідності перезавантаження сторінки. Наприклад, електронна комерційна платформа може використовувати AJAX для фільтрації продуктів у реальному часі або миттєвого оновлення кошика. Однак ті самі механізми, які роблять AJAX потужним, також роблять його вразливим до атак CSRF.

CSRF-токени виконують роль «воріт» для безпечних веб-взаємодій. Вбудовуючи унікальний токен у кожен запит, Django гарантує, що кожен запит походить від авторизованого джерела. Без цього токена будь-яка спроба надіслати підроблені запити буде заблокована, захищаючи ваш додаток від несанкціонованих дій.

Що вас чекає в цьому блозі

Як кіберзлочинці експлуатують вразливості AJAX
Дізнайтеся, як зловмисники використовують підроблені AJAX-пейлоуди для захоплення сеансів і виконання несанкціонованих дій, ставлячи під загрозу як користувачів, так і додатки.
Роль CSRF-токенів у Django
Досліджуйте, як CSRF-посередник Django перевіряє кожен запит і гарантує цілісність взаємодій між клієнтом і сервером, навіть у високодинамічних додатках.
Реалізація безпечних AJAX-запитів з CSRF-токенами
Дотримуйтесь покрокового керівництва щодо налаштування jQuery, JavaScript і Django для безпечної взаємодії через AJAX.

Реальний випадок використання: Динамічне фільтрування продуктів в електронній комерції

Розглянемо платформу електронної комерції, яка використовує AJAX для того, щоб дозволити користувачам фільтрувати продукти за категоріями, ціновими діапазонами чи наявністю без перезавантаження сторінки. Ця динамічна функціональність значно покращує користувацький досвід.
Однак це також вводить певні ризики: без захисту від CSRF зловмисники можуть експлуатувати AJAX-запити для маніпулювання сесіями користувачів або виконання несанкціонованих транзакцій.

Інтегруючи CSRF-токени в AJAX-запити, Django забезпечує, щоб кожна дія була належним чином перевірена, захищаючи чутливі дані та зберігаючи довіру користувачів.

Що таке AJAX?

AJAX — це технологія, яка дозволяє веб-додаткам асинхронно взаємодіяти з сервером, дозволяючи частинам веб-сторінки оновлюватися без необхідності перезавантаження сторінки.

Переваги AJAX:

Покращений користувацький досвід: Швидке оновлення підвищує інтерактивність.
Ефективність: Знижує навантаження на сервер та використання пропускної здатності.
Зворотний зв'язок в реальному часі: Забезпечує миттєву реакцію на дії користувачів.

Що таке CSRF?

CSRF (Cross-Site Request Forgery) — це тип атаки, коли шкідливий вебсайт обманює браузер користувача, змушуючи його виконувати небажані дії на іншому сайті, на якому користувач авторизований.

Як працює захист від CSRF:

CSRF-токен — це унікальне, непередбачуване значення, пов’язане з сесією користувача.
Django автоматично генерує цей токен і вбудовує його в форми через тег шаблону {% csrf_token %}.
Сервер перевіряє цей токен під час відправлення форм або AJAX-запитів, щоб забезпечити автентичність.

Без захисту від CSRF зловмисники могли б експлуатувати автентифіковані сесії для виконання несанкціонованих дій, таких як покупки або зміни даних користувачів.

Реальний випадок використання: Динамічне фільтрування продуктів

Розглянемо платформу електронної комерції, де клієнти фільтрують продукти за категоріями, підкатегоріями, ціновими діапазонами та брендами. Реалізація цього за допомогою AJAX забезпечує плавний досвід перегляду без перезавантаження сторінки, в той час як CSRF-токени захищають процес від зловмисного використання.

Крок 1: Налаштування бекенду

Моделі

# Приклад моделей для категорій продуктів та самих продуктів
from django.db import models

class Category(models.Model):
 name = models.CharField(max_length=100)

class SubCategory(models.Model):
 category = models.ForeignKey(Category, on_delete=models.CASCADE, related_name="subcategories")
 name = models.CharField(max_length=100)

class Product(models.Model):
 subcategory = models.ForeignKey(SubCategory, on_delete=models.CASCADE, related_name="products")
 name = models.CharField(max_length=200)
 price = models.DecimalField(max_digits=10, decimal_places=2)
 brand = models.CharField(max_length=100)

Види

from django.http import JsonResponse
from django.shortcuts import render

def product_filter_view(request):
 categories = Category.objects.all()
 return render(request, 'product_filter.html', {'categories': categories})

def fetch_subcategories(request):
 if request.method == "POST":
  category_id = request.POST.get('category_id')
  subcategories = SubCategory.objects.filter(category_id=category_id).values('id', 'name')
  return JsonResponse({'subcategories': list(subcategories)})

def fetch_products(request):
 if request.method == "POST":
  subcategory_id = request.POST.get('subcategory_id')
  products = Product.objects.filter(subcategory_id=subcategory_id).values('id', 'name', 'price', 'brand')
  return JsonResponse({'products': list(products)})

URLs

from django.urls import path
from .

текст перекладу


import views  
urlpatterns = [  
 path('product-filter/', views.product_filter_view, name='product_filter'),  
 path('fetch-subcategories/', views.fetch_subcategories, name='fetch_subcategories'),  
 path('fetch-products/', views.fetch_products, name='fetch_products'),  
]

Крок 2: Реалізація на стороні клієнта

HTML Шаблон


 {% csrf_token %}  
Категорія:  

 Виберіть категорію  
 {% for category in categories %}  
 {{ category.name }}  
 {% endfor %}  

 Підкатегорія:  

 Виберіть підкатегорію  


    ```  **JavaScript**  ``` function fetchSubcategories() {    const categoryId = $('#category').val();    if (categoryId) {    $.post("/fetch-subcategories/", {    'category_id': categoryId,    'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val()    }).done(function(data) {    const subcategorySelect = $('#subcategory');    subcategorySelect.empty();    subcategorySelect.append('Виберіть підкатегорію');    data.subcategories.forEach(subcategory => {    subcategorySelect.append(`${subcategory.name}`);    });    }).fail(function() {    alert("Не вдалося отримати підкатегорії.");    });    }   }   function fetchProducts() {    const subcategoryId = $('#subcategory').val();    if (subcategoryId) {    $.post("/fetch-products/", {    'subcategory_id': subcategoryId,    'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val()    }).done(function(data) {    const productList = $('#product-list');    productList.empty();    data.products.forEach(product => {    productList.append(    `
${product.name}
Ціна: $${product.price}
Бренд: ${product.brand}
`    );    }).fail(function() {    alert("Не вдалося отримати продукти.");    });    }   } ```  **CSS**  ``` /* styles.css */   form {    margin: 20px;   }   select, button {    margin: 5px;    padding: 5px;   }   .product-item {    border: 1px solid #ccc;    margin: 10px;    padding: 10px;   } ```  ## Ключові аспекти безпеки: Чому CSRF має значення?  Уявімо ситуацію: Аліса заходить в свій обліковий запис на e-commerce платформі і залишає його відкритим у браузері. Вона потім заходить на шкідливий вебсайт. Без захисту від CSRF, цей сайт може відправити прихований запит на обліковий запис Аліси, виконуючи несанкціоновані дії, такі як оформлення замовлення або зміна деталей облікового запису. Токени CSRF запобігають цьому, перевіряючи джерело запиту.  **Кращі практики:**  - Завжди включайте `{% csrf_token %}` у формах. - Явно відправляйте токени CSRF в AJAX запитах. - Перевіряйте всі вхідні дані на сервері.  Працюючи з Django, важливо захищати AJAX запити для того, щоб уникнути шкідливих атак, таких як Cross-Site Request Forgery (CSRF). Однак можуть бути ситуації, коли розробники задумуються, чи можна обійти токени CSRF. Хоча це технічно можливо, важливо розуміти ризики та наслідки для безпеки.  ## 1. Відключення захисту CSRF  Якщо ви використовуєте декоратор `@csrf_exempt` для вигляду, Django пропустить перевірку CSRF для цієї конкретної кінцевої точки.
текст перекладу


Це означає, що ви можете робити AJAX запити до вигляду без включення токена CSRF.

**Приклад:**

from django.views.decorators.csrf import csrfexempt
from django.http import JsonResponse
@csrfexempt
def my_view(request):
return JsonResponse({"message": "Перевірка CSRF пропущена!"})
```

Хоча це може бути корисно для швидкого тестування або специфічних випадків, це створює серйозну уразливість для безпеки. Без захисту від CSRF, зловмисник може створити шкідливі запити, які виглядають як запити від автентифікованого користувача, що може призвести до несанкціонованих дій.

Важливо: Відключення захисту CSRF слід використовувати лише для тестування або в контрольованих середовищах, а не в продакшн.

2. Використання AJAX GET запитів

За замовчуванням, захист CSRF в Django застосовується лише до HTTP методів, які змінюють дані (POST, PUT, PATCH та DELETE). Запити типу GET вважаються безпечними і не вимагають токена CSRF, оскільки вони призначені для отримання даних, а не для їх зміни.

Це означає, що ви можете виконувати AJAX GET запити без токена CSRF. Однак є кілька зауважень:

GET запити повинні бути ідемпотентними: Використання GET для дій, що змінюють дані (наприклад, оновлення бази даних або видалення записів), порушує HTTP конвенції та робить вашу програму вразливою до інших типів атак.
Ризики безпеки: Хоча запити GET не захищені CSRF середнім, вони все одно можуть розкривати чутливу інформацію, якщо використовувати їх неналежним чином.

Висновок

Комбінуючи AJAX та захист CSRF у Django, ви можете створювати динамічні, зручні для користувача та безпечні веб-додатки. У цьому прикладі ми продемонстрували, як створити динамічну систему фільтрації продуктів для платформи електронної комерції, що забезпечує як зручність взаємодії, так і надійний захист.

Інтегруйте ці техніки у свої проекти для покращення зручності без шкоди для безпеки. Успіхів у програмуванні!

Джерела

https://www.facebook.com/appscopeduser_id/100000163088448 (2015). Annotation Tutorial: Перехід до AJAX API. [онлайн] Pirate Learner. Доступно за посиланням: https://piratelearner.com/en/C/course/computer-science/django/annotations-tutorial-moving-towards-ajax-apis/21/ [Звернено: 22 січ. 2025].

Перекладено з: Fortifying Django: Securing AJAX Calls and Defending Against CSRF