修改CSRF Token存储方式

HenryJi529 · Apr 27, 2024 · d280e99 · d280e99
1 parent 98c80bf
commit d280e99
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 14 deletions.
diff --git a/apps/recognizer/frontend/package.json b/apps/recognizer/frontend/package.json
@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "js-cookie": "^3.0.5",
     "vue": "^3.3.4"
   },
   "devDependencies": {

diff --git a/apps/recognizer/frontend/src/App.vue b/apps/recognizer/frontend/src/App.vue
@@ -2,8 +2,8 @@
 import { ref } from "vue"
 
 import axios from "axios";
+import Cookies from "js-cookie"
 axios.defaults.baseURL = process.env.BASE_URL
-const endpoint = "/"
 
 import Header from "./components/Header.vue"
 import Footer from "./components/Footer.vue"
@@ -15,6 +15,11 @@ const category = ref("");
 const score = ref(0);
 const isLoading = ref(false);
 
+onMounted(async()=> {
+  await axios.get('csrf-token/')
+  axios.defaults.headers.common['X-CSRFToken'] = Cookies.get('csrftoken');
+})
+
 const handleFileChange = (event) => {
   const selectedFile = event.target.files[0];
   if (selectedFile) {
@@ -37,9 +42,7 @@ const clearImage = (event) => {
 
 const uploadImage = async () => {
   isLoading.value = true
-  const { data: { csrfToken } } = await axios.get('csrf-token/')
-  axios.defaults.headers.common['X-CSRFToken'] = csrfToken;
-  const response = await axios.post(endpoint, {
+  const response = await axios.post("/", {
     "imageDataURL": imageDataURL.value,
     "modelName": selectedModelName.value
   })

diff --git a/apps/recognizer/frontend/yarn.lock b/apps/recognizer/frontend/yarn.lock
@@ -700,6 +700,11 @@ jiti@^1.21.0:
   resolved "https://registry.npmmirror.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
@@ -969,6 +974,7 @@ source-map-js@^1.2.0:
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -987,6 +993,7 @@ string-width@^5.0.1, string-width@^5.1.2:
     strip-ansi "^7.0.1"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==

diff --git a/apps/recognizer/views.py b/apps/recognizer/views.py
@@ -37,5 +37,6 @@ def index(request: Request):
 
 @api_view(["get"])
 def get_csrf_token(request: Request):
-    csrf_token = get_token(request)
-    return Response({"csrfToken": csrf_token}, status=status.HTTP_200_OK)
+    response = Response()
+    response.set_cookie("csrftoken", get_token(request))
+    return response
diff --git a/apps/share/frontend/package.json b/apps/share/frontend/package.json
@@ -12,6 +12,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "axios": "^1.4.0",
+    "js-cookie": "^3.0.5",
     "pinia": "^2.1.3",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2"

diff --git a/apps/share/frontend/src/views/HomeView.vue b/apps/share/frontend/src/views/HomeView.vue
@@ -1,29 +1,30 @@
 <script setup>
-import {ref} from 'vue'
+import {onMounted, ref} from 'vue'
 import axios from 'axios';
 import {useRoute} from 'vue-router'
+import Cookies from 'js-cookie'
 const baseURL = process.env.BASE_URL
 axios.defaults.baseURL = baseURL
 
-
 const route = useRoute()
 const currentPath = ref(window.location.href)
 
-
 const endpoint = "/submit/"
 
 const url = ref("")  // NOTE: 提交的信息
 const link = ref("") // NOTE: 返回的加密链接
 
+onMounted(async()=> {
+  await axios.get('csrf-token/')
+  axios.defaults.headers.common['X-CSRFToken'] = Cookies.get('csrftoken');
+})
 
 const handleSubmit = async ()=>{
   if(url.value.length > 1000 || url.value.startsWith("http") == false){
     alert("链接不合法")
     return
   }
 
-  const { data: { csrfToken } } = await axios.get('csrf-token/')
-  axios.defaults.headers.common['X-CSRFToken'] = csrfToken;
   const response = await axios.post(endpoint,{
     "url": url.value,
   })

diff --git a/apps/share/frontend/yarn.lock b/apps/share/frontend/yarn.lock
@@ -734,6 +734,11 @@ jiti@^1.21.0:
   resolved "https://registry.npmmirror.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
@@ -1020,6 +1025,7 @@ signal-exit@^4.0.1:
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -1038,6 +1044,7 @@ string-width@^5.0.1, string-width@^5.1.2:
     strip-ansi "^7.0.1"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==

diff --git a/apps/share/views.py b/apps/share/views.py
@@ -20,10 +20,11 @@
 from .models import Item
 
 
+@api_view(["GET"])
 def get_csrf_token(request: HttpRequest):
-    if request.method == "GET":
-        csrf_token = get_token(request)
-        return JsonResponse({"csrfToken": csrf_token})
+    response = Response()
+    response.set_cookie("csrftoken", get_token(request))
+    return response
 
 
 @api_view(["GET"])