DRF 前後端分離項目如何解決CSRF 數據交互

来源:https://www.cnblogs.com/cs-songbai/p/18289072
-Advertisement-
Play Games

★ 背景說明 在Django REST framework (DRF) 前後端分離項目中,解決CSRF問題通常有以下幾種方法: 1. 禁用CSRF驗證,但這會降低安全性。(不推薦) 2. 使用csrftoken cookie 3. 在前端每次 POST、PUT 或 DELETE 請求前先發起一個GE ...


★ 背景說明

在Django REST framework (DRF) 前後端分離項目中,解決CSRF問題通常有以下幾種方法:
1. 禁用CSRF驗證,但這會降低安全性。(不推薦)
2. 使用csrftoken cookie
3. 在前端每次 POST、PUT 或 DELETE 請求前先發起一個GET請求(GET請求不需要經過CSRF檢查)獲取CSRFToken並將響應中的CSRFToken添加到新的請求頭中。(推薦)

★ 解決思路

  • 方案二

    • 步驟一: 在返回給瀏覽器(客戶端)的響應中設置 csrftoken相關的 Cookie信息(需要保證csrftoken在有效期內)

    • 步驟二:在發送請求前獲取最新的CSRF token,並且在前端的每次請求中都包含了這個token

      // 首先,獲取CSRF token
      function getCookie(name) {
          let cookieValue = null;
          if (document.cookie && document.cookie !== '') {
              const cookies = document.cookie.split(';');
              for (let i = 0; i < cookies.length; i++) {
                  const cookie = cookies[i].trim();
                  // 假設CSRF cookie名為csrftoken
                  if (cookie.substring(0, name.length + 1) === (name + '=')) {
                      cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                      break;
                  }
              }
          }
          return cookieValue;
      }
      const csrftoken = getCookie('csrftoken');
       
      // 然後,配置axios全局預設值
      axios.defaults.headers.common['X-CSRFToken'] = csrftoken;
      axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
       
      // 之後,所有通過axios發送的請求都會自動攜帶CSRF token
      
  • 方案三

    • 步驟一: 使用請求攔截器在每次 POST、PUT 或 DELETE 請求中前先發起一個GET請求獲取CSRF token 添加到請求頭中

      // frontend.js
      
      import axios from 'axios';
      
      const api = axios.create({
          baseURL: '/api/',
          headers: {
              'Content-Type': 'application/json'
          }
      });
      
      api.interceptors.request.use(async config => {
          const { method } = config;
          if (method === 'post' || method === 'put' || method === 'delete') {
              const csrfToken = await getCSRFToken();
              config.headers['X-CSRF-Token'] = csrfToken;
          }
          return config;
      });
      
      async function getCSRFToken() {
          const response = await axios.get('/get-csrf-token/');
          return response.data.csrfToken;
      }
      
      async function postData(url = '', data = {}) {
          const response = await api.post(url, data);
          return response.data;
      }
      
      postData('data/', { key: 'value' })
          .then(data => {
              console.log(data);
      });
      
      
    • 步驟二: 在Django後端中使用 Django REST framework 編寫了類視圖,實現返回csrftoken的邏輯

      • 視圖views.py

        # views.py
        from rest_framework.views import APIView
        from rest_framework.response import Response
        from rest_framework import status
        from django.middleware.csrf import get_token
        
        class CSRFTokenView(APIView):
            def get(self, request):
                csrf_token = get_token(request)
                return Response({'csrfToken': csrf_token})
        
            def post(self, request):
                # 處理 POST 請求的邏輯
                return Response({'message': 'Data received'}, status=status.HTTP_200_OK)
        
        
      • 路由urls.py

        # urls.py
        
        from django.urls import path
        from .views import CSRFTokenView
        
        urlpatterns = [
            path('get-csrf-token/', CSRFTokenView.as_view(), name='get_csrf_token'),
            path('api/data/', CSRFTokenView.as_view(), name='post_data'),
        ]
        
      • 代碼說明:

        在這個完整的示例中,前端代碼使用 axios 創建了一個名為 api 的實例,並通過請求攔截器自動添加 CSRF token 到請求頭中。後端使用 Django REST framework 編寫了類視圖 CSRFTokenView,其中包含了獲取 CSRF token 和處理 POST 請求的邏輯。最後,在 urls.py 中設置了兩個路由,分別映射到獲取 CSRF token 和處理 POST 請求的視圖函數。
        

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.Java基礎 1.1 為什麼Java代碼可以實現一次編寫、到處運行? 參考答案 JVM(Java虛擬機)是Java跨平臺的關鍵。 在程式運行前,Java源代碼(.java)需要經過編譯器編譯成位元組碼(.class)。在程式運行時,JVM負責將位元組碼翻譯成特定平臺下的機器碼並運行,也就是說,只要在 ...
  • 盒子IM —— 一個仿微信實現的網頁版聊天軟體,支持私聊、群聊、離線消息、發送語音、圖片、文件、emoji 表情等功能,不依賴任何第三方收費組件。 ...
  • 前言 上一篇文章香橙派5plus上跑雲手機方案一 redroid(帶硬體加速)中說了怎麼運行redroid,這篇補一下怎麼修改參數編譯內核。 補充 上篇文章有個內容需要補充一下:更新完內核需要用下麵的命令防止內核被apt更新,不然後面使用apt update又回到官方的內核(註意版本號,當前是100 ...
  • 技術債可能來源於多種原因,比如時間壓力、資源限制、技術選型不當等。它可以表現為代碼中的臨時性修補、未能徹底解決的設計問題、缺乏文檔或測試覆蓋等。雖然技術債可以幫助快速推進項目進度,但長期來看,它會增加軟體維護的成本和風險,降低系統的穩定性和可維護性。 ...
  • 大模型技術的發展和應用,預示著更加智能化、個性化未來的到來。如果將大模型比喻為正在疾馳的科技列車,語料便是珍貴的“燃料”。本次世界人工智慧大會期間,合合信息為大模型打造的“加速器”解決方案備受關註。 在大模型訓練的上游階段,“加速器”中的文檔解析引擎將助力大模型突破在書籍、論文、研報等文檔中的版面解 ...
  • 大家好,我是碼農先森。 回想起以前用模版渲染數據的歲月,那時都沒有 API 介面開發的概念。PHP 服務端和前端 HTML、CSS、JS 代碼混合式開發,也不分前端、後端程式員,大家都是全乾工程師。隨著前後端分離、移動端開發的興起,用後端渲染數據的開發方式效率低下,已經不能滿足業務對需求快速上線的要 ...
  • ★ JWT基本概念 JWT(JSON Web Token)是一種用於在網路應用之間傳遞信息的安全方式。它是一種基於 JSON 的開放標準(RFC 7519),用於在網路應用之間安全地傳輸聲明。JWT 通常用於身份驗證和授權,以及在分散式系統中傳遞聲明。 ★ JWT組成部分 JWT 由三部分組成:頭部 ...
  • 什麼是監視器(Monitor)? 在Java中,監視器(Monitor)是用來實現線程同步的一種機制。每個Java對象都有一個與之關聯的監視器,線程可以通過synchronized關鍵字來獲取和釋放對象的監視器。監視器的主要作用是確保在同一時刻只有一個線程可以執行同步塊或同步方法,從而實現線程的互斥 ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...