翼度科技»论坛 编程开发 python 查看内容

DRF 前后端分离项目如何解决CSRF 数据交互

3

主题

3

帖子

9

积分

新手上路

Rank: 1

积分
9
★ 背景说明
  1. 在Django REST framework (DRF) 前后端分离项目中,解决CSRF问题通常有以下几种方法:
  2. 1. 禁用CSRF验证,但这会降低安全性。(不推荐)
  3. 2. 使用csrftoken cookie
  4. 3. 在前端每次 POST、PUT 或 DELETE 请求前先发起一个GET请求(GET请求不需要经过CSRF检查)获取CSRFToken并将响应中的CSRFToken添加到新的请求头中。(推荐)
复制代码
★ 解决思路


  • 方案二

    • 步骤一: 在返回给浏览器(客户端)的响应中设置 csrftoken相关的 Cookie信息(需要保证csrftoken在有效期内)
    • 步骤二:在发送请求前获取最新的CSRF token,并且在前端的每次请求中都包含了这个token
      1. // 首先,获取CSRF token
      2. function getCookie(name) {
      3.     let cookieValue = null;
      4.     if (document.cookie && document.cookie !== '') {
      5.         const cookies = document.cookie.split(';');
      6.         for (let i = 0; i < cookies.length; i++) {
      7.             const cookie = cookies[i].trim();
      8.             // 假设CSRF cookie名为csrftoken
      9.             if (cookie.substring(0, name.length + 1) === (name + '=')) {
      10.                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
      11.                 break;
      12.             }
      13.         }
      14.     }
      15.     return cookieValue;
      16. }
      17. const csrftoken = getCookie('csrftoken');
      18. // 然后,配置axios全局默认值
      19. axios.defaults.headers.common['X-CSRFToken'] = csrftoken;
      20. axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
      21. // 之后,所有通过axios发送的请求都会自动携带CSRF token
      复制代码

  • 方案三

    • 步骤一: 使用请求拦截器在每次 POST、PUT 或 DELETE 请求中前先发起一个GET请求获取CSRF token 添加到请求头中
      1. // frontend.js
      2. import axios from 'axios';
      3. const api = axios.create({
      4.     baseURL: '/api/',
      5.     headers: {
      6.         'Content-Type': 'application/json'
      7.     }
      8. });
      9. api.interceptors.request.use(async config => {
      10.     const { method } = config;
      11.     if (method === 'post' || method === 'put' || method === 'delete') {
      12.         const csrfToken = await getCSRFToken();
      13.         config.headers['X-CSRF-Token'] = csrfToken;
      14.     }
      15.     return config;
      16. });
      17. async function getCSRFToken() {
      18.     const response = await axios.get('/get-csrf-token/');
      19.     return response.data.csrfToken;
      20. }
      21. async function postData(url = '', data = {}) {
      22.     const response = await api.post(url, data);
      23.     return response.data;
      24. }
      25. postData('data/', { key: 'value' })
      26.     .then(data => {
      27.         console.log(data);
      28. });
      复制代码
    • 步骤二: 在Django后端中使用 Django REST framework 编写了类视图,实现返回csrftoken的逻辑

      • 视图views.py
        1. # views.py
        2. from rest_framework.views import APIView
        3. from rest_framework.response import Response
        4. from rest_framework import status
        5. from django.middleware.csrf import get_token
        6. class CSRFTokenView(APIView):
        7.     def get(self, request):
        8.         csrf_token = get_token(request)
        9.         return Response({'csrfToken': csrf_token})
        10.     def post(self, request):
        11.         # 处理 POST 请求的逻辑
        12.         return Response({'message': 'Data received'}, status=status.HTTP_200_OK)
        复制代码
      • 路由urls.py
        1. # urls.py
        2. from django.urls import path
        3. from .views import CSRFTokenView
        4. urlpatterns = [
        5.     path('get-csrf-token/', CSRFTokenView.as_view(), name='get_csrf_token'),
        6.     path('api/data/', CSRFTokenView.as_view(), name='post_data'),
        7. ]
        复制代码
      • 代码说明:
        1. 在这个完整的示例中,前端代码使用 axios 创建了一个名为 api 的实例,并通过请求拦截器自动添加 CSRF token 到请求头中。后端使用 Django REST framework 编写了类视图 CSRFTokenView,其中包含了获取 CSRF token 和处理 POST 请求的逻辑。最后,在 urls.py 中设置了两个路由,分别映射到获取 CSRF token 和处理 POST 请求的视图函数。
        复制代码



来源:https://www.cnblogs.com/cs-songbai/p/18289072
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具