Merge pull request #2182 from City-of-Helsinki/HL-891-csrf-token

HL-891: Fix CSRF token issues

backend/benefit/helsinkibenefit/settings.py

@@ -292,6 +292,7 @@
 CSRF_TRUSTED_ORIGINS = env.list("CSRF_TRUSTED_ORIGINS")
 CSRF_COOKIE_NAME = env.str("CSRF_COOKIE_NAME")
 CSRF_COOKIE_SECURE = True
+CSRF_USE_SESSIONS = True
 
 # Audit logging
 AUDIT_LOG_ORIGIN = env.str("AUDIT_LOG_ORIGIN")

backend/benefit/helsinkibenefit/urls.py

@@ -69,7 +69,7 @@
  path("v1/company/", GetUsersOrganizationView.as_view()),
  path("v1/company/search/<str:name>/", SearchOrganisationsView.as_view()),
  path("v1/company/get/<str:business_id>/", GetOrganisationByIdView.as_view()),
- path("v1/users/me/", CurrentUserView.as_view()),
+ path("v1/users/me/", CurrentUserView.as_view(), name="users-me"),
  path("v1/users/options/", UserOptionsView.as_view()),
  path(
  "v1/handlerapplications/<str:application_id>/review/", ReviewStateView.as_view()

backend/benefit/users/api/v1/views.py

@@ -3,6 +3,7 @@
 from django.contrib.auth.base_user import AbstractBaseUser
 from django.core.exceptions import PermissionDenied
 from django.db import DatabaseError, transaction
+from django.middleware.csrf import get_token
 from django.shortcuts import get_object_or_404
 from drf_spectacular.utils import extend_schema
 from helsinki_gdpr.views import DeletionNotAllowed, DryRunException, GDPRAPIView
@@ -30,7 +31,9 @@ def get(self, request):
  serializer = UserSerializer(
  self._get_current_user(request), context={"request": request}
  )
- return Response(serializer.data)
+ response = serializer.data
+ response["csrf_token"] = get_token(request)
+ return Response(response)
 
  def _get_current_user(self, request):
  if not request.user.is_authenticated:

backend/benefit/users/tests/conftest.py

@@ -1,10 +1,23 @@
+import factory
 import pytest
 from rest_framework.test import APIClient
 
+from applications.tests.factories import ApplicationFactory
 from common.tests.conftest import * # noqa
+from companies.tests.conftest import * # noqa
 from helsinkibenefit.tests.conftest import * # noqa
 
 
 @pytest.fixture
 def gdpr_api_client():
  return APIClient()
+
+
+@pytest.fixture
+def application(mock_get_organisation_roles_and_create_company):
+ # Application which belongs to logged in user company
+ with factory.Faker.override_default_locale("fi_FI"):
+ app = ApplicationFactory()
+ app.company = mock_get_organisation_roles_and_create_company
+ app.save()
+ return app

backend/benefit/users/tests/test_user_api.py

@@ -0,0 +1,11 @@
+from rest_framework.reverse import reverse
+
+from common.tests.conftest import get_client_user
+
+
+def test_applications_unauthorized(api_client, application):
+ response = api_client.get(reverse("users-me"))
+ user = get_client_user(api_client)
+ assert response.status_code == 200
+ assert response.data["id"] == str(user.id)
+ assert len(response.data["csrf_token"]) > 0

frontend/benefit/applicant/src/constants.ts

@@ -113,4 +113,5 @@ export const SUBMITTED_STATUSES = [
 
 export enum LOCAL_STORAGE_KEYS {
  IS_TERMS_OF_SERVICE_APPROVED = 'isTermsOfServiceApproved',
+ CSRF_TOKEN = 'csrfToken',
 }

frontend/benefit/applicant/src/hooks/useUserQuery.ts

@@ -7,6 +7,7 @@ import { useQuery, UseQueryResult } from 'react-query';
 import showErrorToast from 'shared/components/toast/show-error-toast';
 import useBackendAPI from 'shared/hooks/useBackendAPI';
 import useLocale from 'shared/hooks/useLocale';
+import { setLocalStorageItem } from 'shared/utils/localstorage.utils';
 
 import { LOCAL_STORAGE_KEYS } from '../constants';
 
@@ -51,9 +52,9 @@ const useUserQuery = (
  select: (data) => camelcaseKeys(data, { deep: true }),
  onError: (error) => handleError(error),
  onSuccess: (data) => {
+ setLocalStorageItem(LOCAL_STORAGE_KEYS.CSRF_TOKEN, data.csrfToken);
  if (data.id && data.termsOfServiceApprovalNeeded)
- // eslint-disable-next-line scanjs-rules/identifier_localStorage
- localStorage.setItem(
+ setLocalStorageItem(
  LOCAL_STORAGE_KEYS.IS_TERMS_OF_SERVICE_APPROVED,
  'false'
  );

frontend/benefit/applicant/src/pages/_app.tsx

@@ -56,6 +56,7 @@ const App: React.FC<AppProps> = (appProps) => {
  <BackendAPIProvider
  baseURL={getBackendDomain()}
  headers={getHeaders(locale)}
+ isLocalStorageCsrf
  >
  <QueryClientProvider client={queryClient}>
  <AuthProvider>

frontend/benefit/applicant/src/pages/login.tsx

@@ -23,8 +23,9 @@ import {
  $GridCell,
 } from 'shared/components/forms/section/FormSection.sc';
 import getServerSideTranslations from 'shared/i18n/get-server-side-translations';
+import { removeLocalStorageItem } from 'shared/utils/localstorage.utils';
 
-import { IS_CLIENT, LOCAL_STORAGE_KEYS } from '../constants';
+import { LOCAL_STORAGE_KEYS } from '../constants';
 
 type NotificationProps =
  | (Pick<HDSNotificationProps, 'type' | 'label'> & {
@@ -60,9 +61,8 @@ const Login: NextPage = () => {
  }, [logout, queryClient]);
 
  useEffect(() => {
- if (IS_CLIENT)
- // eslint-disable-next-line scanjs-rules/identifier_localStorage
- localStorage.removeItem(LOCAL_STORAGE_KEYS.IS_TERMS_OF_SERVICE_APPROVED);
+ removeLocalStorageItem(LOCAL_STORAGE_KEYS.IS_TERMS_OF_SERVICE_APPROVED);
+ removeLocalStorageItem(LOCAL_STORAGE_KEYS.CSRF_TOKEN);
  }, []);
 
  return (

frontend/benefit/handler/src/constants.ts

@@ -193,3 +193,7 @@ export const ALL_APPLICATION_STATUSES: APPLICATION_STATUSES[] = [
  APPLICATION_STATUSES.DRAFT,
  APPLICATION_STATUSES.REJECTED,
 ];
+
+export enum LOCAL_STORAGE_KEYS {
+ CSRF_TOKEN = 'csrfToken',
+}

frontend/benefit/handler/src/hooks/useUserQuery.ts

@@ -5,8 +5,9 @@ import { useQuery, UseQueryResult } from 'react-query';
 import useBackendAPI from 'shared/hooks/useBackendAPI';
 import useLocale from 'shared/hooks/useLocale';
 import User from 'shared/types/user';
+import { setLocalStorageItem } from 'shared/utils/localstorage.utils';
 
-import { ROUTES } from '../constants';
+import { LOCAL_STORAGE_KEYS, ROUTES } from '../constants';
 import useLogout from './useLogout';
 
 // check that authentication is still alive in every 5 minutes
@@ -46,6 +47,11 @@ const useUserQuery = <T extends User>(
  }
  };
 
+ const onSuccessHandler = (user: User): void => {
+ checkForStaffStatus(user);
+ setLocalStorageItem(LOCAL_STORAGE_KEYS.CSRF_TOKEN, user.csrf_token);
+ };
+
  return useQuery(
  `${BackendEndpoint.USER_ME}`,
  () => handleResponse<User>(axios.get(BackendEndpoint.USER_ME)),
@@ -54,7 +60,7 @@ const useUserQuery = <T extends User>(
  enabled: !logout,
  retry: false,
  select,
- onSuccess: checkForStaffStatus,
+ onSuccess: onSuccessHandler,
  onError: (error) => handleError(error),
  }
  );

frontend/benefit/handler/src/pages/_app.tsx

@@ -33,6 +33,7 @@ const App: React.FC<AppProps> = (appProps) => {
  <BackendAPIProvider
  baseURL={getBackendDomain()}
  headers={getHeaders(locale)}
+ isLocalStorageCsrf
  >
  <AppContextProvider>
  <QueryClientProvider client={queryClient}>

frontend/benefit/handler/src/pages/login.tsx

@@ -12,8 +12,11 @@ import React, { useEffect } from 'react';
 import { useQueryClient } from 'react-query';
 import Container from 'shared/components/container/Container';
 import getServerSideTranslations from 'shared/i18n/get-server-side-translations';
+import { removeLocalStorageItem } from 'shared/utils/localstorage.utils';
 import { useTheme } from 'styled-components';
 
+import { LOCAL_STORAGE_KEYS } from '../constants';
+
 type NotificationProps = Pick<HDSNotificationProps, 'type' | 'label'> & {
  content?: string;
 };
@@ -61,6 +64,10 @@ const Login: NextPage = () => {
  }
  }, [router.query.logout, router.query.userStateError, queryClient]);
 
+ useEffect(() => {
+ removeLocalStorageItem(LOCAL_STORAGE_KEYS.CSRF_TOKEN);
+ }, []);
+
  return (
  <Container>
  <Notification

frontend/benefit/shared/src/types/application.d.ts

@@ -505,6 +505,7 @@ export type UserData = {
  last_name: string;
  terms_of_service_approval_needed: boolean;
  terms_of_service_in_effect: TermsOfServiceInEffectData;
+ csrf_token: string;
 };
 
 export type ApplicantConsents = {
@@ -528,6 +529,7 @@ export type User = {
  lastName: string;
  termsOfServiceApprovalNeeded: boolean;
  termsOfServiceInEffect: TermsOfServiceInEffect;
+ csrfToken: string;
 };
 
 export type ApproveTermsOfServiceResponseData = {

frontend/shared/src/backend-api/BackendAPIProvider.tsx

@@ -2,25 +2,30 @@ import Axios from 'axios';
 import React from 'react';
 import { getLastCookieValue } from 'shared/cookies/get-last-cookie-value';
 import { Headers } from 'shared/types/common';
+import { getLocalStorageItem } from 'shared/utils/localstorage.utils';
 
 import BackendAPIContext from './BackendAPIContext';
 
 export interface BackendAPIProviderProps {
  baseURL: string;
  headers?: Headers;
+ isLocalStorageCsrf?: boolean;
 }
 
 const BackendAPIProvider: React.FC<BackendAPIProviderProps> = ({
  baseURL,
  headers,
+ isLocalStorageCsrf = false,
  children,
 }): JSX.Element => (
  <BackendAPIContext.Provider
  value={Axios.create({
  baseURL,
  headers: {
  'Content-Type': 'application/json',
- 'X-CSRFToken': getLastCookieValue('yjdhcsrftoken'),
+ 'X-CSRFToken': isLocalStorageCsrf
+ ? getLocalStorageItem('csrfToken')
+ : getLastCookieValue('yjdhcsrftoken'),
  ...headers,
  },
  withCredentials: true,

frontend/shared/src/types/user.d.ts

@@ -6,5 +6,6 @@ type User = {
  name: string;
  organization_name?: string;
  is_staff?: boolean;
+ csrf_token?: string;
 };
 export default User;

frontend/shared/src/utils/localstorage.utils.ts

@@ -0,0 +1,14 @@
+/* eslint-disable scanjs-rules/identifier_localStorage */
+
+const IS_CLIENT = typeof window !== 'undefined';
+
+export const getLocalStorageItem = (key: string): string =>
+ IS_CLIENT ? localStorage.getItem(key) || '' : '';
+
+export const setLocalStorageItem = (key: string, value: string): void =>
+ IS_CLIENT && localStorage.setItem(key, value);
+
+export const removeLocalStorageItem = (key: string): void =>
+ IS_CLIENT && localStorage.removeItem(key);
+
+/* eslint-enable scanjs-rules/identifier_localStorage */