Allow CSRF to a different hostname in dev and Surge builds

.env.development

 VUE_APP_API_BASE_URL=http://localhost:8000/api/v1
 VUE_APP_ROUTER_MODE=history
+VUE_APP_CSRF_ALL_ORIGINS=true

package-lock.json

@@ -12,7 +12,7 @@
         "@sentry/integrations": "^7.16.0",
         "@sentry/vue": "^7.16.0",
         "ansi-to-html": "^0.7.2",
-        "axios": "^1.4.0",
+        "axios": "^1.6.2",
         "bulma": "^0.9.3",
         "bulma-switch": "^2.0.0",
         "bulma-tooltip": "^3.0.2",
@@ -4949,9 +4949,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz",
-      "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
       "dependencies": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",
@@ -23215,9 +23215,9 @@
       }
     },
     "axios": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz",
-      "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
       "requires": {
         "follow-redirects": "^1.15.0",
         "form-data": "^4.0.0",

package.json

@@ -20,7 +20,7 @@
     "@sentry/integrations": "^7.16.0",
     "@sentry/vue": "^7.16.0",
     "ansi-to-html": "^0.7.2",
-    "axios": "^1.4.0",
+    "axios": "^1.6.2",
     "bulma": "^0.9.3",
     "bulma-switch": "^2.0.0",
     "bulma-tooltip": "^3.0.2",

src/config.ts

@@ -34,6 +34,7 @@ export const CSRF_COOKIE_NAME: string = process.env.VUE_APP_CSRF_COOKIE_NAME ||
 // Fallback to default value
 ) || 'arkindex.csrf'
 export const CSRF_COOKIE_HEADER = 'X-CSRFToken'
+export const CSRF_ALL_ORIGINS = process.env.VUE_APP_CSRF_ALL_ORIGINS === 'true'
 export const VERSION: string | undefined = process.env.VUE_APP_VERSION
 export const ROUTER_MODE: string = process.env.VUE_APP_ROUTER_MODE || 'history'
 

src/main.ts

@@ -7,6 +7,7 @@ import {
   API_BASE_URL,
   CSRF_COOKIE_NAME,
   CSRF_COOKIE_HEADER,
+  CSRF_ALL_ORIGINS,
   SENTRY_DSN,
   SENTRY_ENVIRONMENT,
   UUID,
@@ -35,6 +36,13 @@ axios.defaults.baseURL = API_BASE_URL
 axios.defaults.xsrfCookieName = CSRF_COOKIE_NAME
 axios.defaults.xsrfHeaderName = CSRF_COOKIE_HEADER
 axios.defaults.withCredentials = true
+/*
+ * `false` means no CSRF token is ever sent in any request,
+ * `undefined` means the CSRF token is only sent to the same origin (default),
+ * `true` means the token is sent to everyone.
+ * Dev builds will need `true`, since devs will need to reach localhost:8000 from :8080.
+ */
+axios.defaults.withXSRFToken = CSRF_ALL_ORIGINS ? true : undefined
 
 // Try to ensure we do not get anything other than JSON…
 axios.defaults.headers.Accept = 'application/json'