Use CSRF token on development

Adds the 'yarn watch' command to rebuild the UI static files
whenever there is a change in the code. Running the Django
backend with './manage.py runserver' automatically collects
and serves the files with the CSRF token included.

Signed-off-by: Eva Millán <[email protected]>

.github/workflows/tests.yml

@@ -148,9 +148,8 @@ jobs:
         uses: cypress-io/github-action@v5
         with:
           install: false
-          start: yarn serve --api_url=http://localhost:8000/api/
-          command: yarn test:e2e --config baseUrl=http://localhost:8080
-          wait-on: 'http://localhost:8080, http://localhost:8000/api/'
+          command: yarn test:e2e --config baseUrl=http://localhost:8000
+          wait-on: 'http://localhost:8000/api/'
           spec: tests/e2e/specs/*.js
           working-directory: ./ui
         env:

README.md

@@ -124,11 +124,16 @@ $ cd ui/
 $ yarn install
 ```
 
-#### Running the frontend
+#### Running the frontend on development mode
 
-Run SortingHat frontend Vue app:
+Run SortingHat backend Django app:
+```
+(.venv)$ ./manage.py runserver --settings=config.settings.devel
+```
+
+Build the frontend and watch for changes:
 ```
-$ yarn serve --api_url=http://localhost:8000/api/
+$ yarn watch --api_url=http://localhost:8000/api/ --publicpath="/static/" --mode development
 ```
 
 

config/settings/devel.py

@@ -89,9 +89,8 @@
 STATICFILES_DIRS = [
     "./sortinghat/core/static",
 ]
-STATIC_ROOT = "/tmp/static/"
 
-STATIC_URL = '/'
+STATIC_URL = '/static/'
 
 MEDIA_URL = 'http://media.example.com/'
 

releases/unreleased/csrf-token-only-required-from-ui.yml

@@ -0,0 +1,11 @@
+---
+title: CSRF token is only required on web requests
+category: fixed
+author: Eva Millán <evamillan@bitergia
+issue: null
+notes: >
+  The GraphQL API required the 'X-CSRFToken' header, but the
+  token could only be retrieved by making a GET request.
+  Now, requests authenticated using JWT don't need to provide the
+  CSRF token and only the user interface, which is vulnerable
+  to CSRF attacks and uses a different authentication, requires it.

ui/cypress.config.js

@@ -9,5 +9,9 @@ module.exports = defineConfig({
     specPattern: "tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}",
     supportFile: "tests/e2e/support/index.js",
     video: false,
+    retries: {
+      runMode: 2,
+      openMode: 0,
+    },
   },
 });

ui/package.json

@@ -9,7 +9,8 @@
     "test:e2e": "cypress run --e2e",
     "lint": "vue-cli-service lint",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "watch": "vue-cli-service build --watch"
   },
   "dependencies": {
     "apollo-cache-inmemory": "^1.6.6",

ui/vue.config.js

@@ -2,7 +2,7 @@ var path = require("path");
 const { argv } = require("yargs");
 
 module.exports = {
-  publicPath: process.env.NODE_ENV === "production" ? "/identities/" : "/",
+  publicPath: argv.publicpath ? argv.publicpath : process.env.NODE_ENV === "production" ? "/identities/" : "/",
   outputDir: path.resolve(__dirname, "../sortinghat/", "core", "static"),
   indexPath: path.resolve(
     __dirname,