Added endpoint to generate csrf tokens

Author: abhayymishraa

backend/apps/core/api/csrf_token.py

@@ -0,0 +1,7 @@
+from django.http import JsonResponse
+from django.middleware.csrf import get_token
+
+def get_csrf_token(request):
+    """Returns a response with the CSRF token to set it in cookies."""
+    return JsonResponse({"csrftoken": get_token(request)})
+    

backend/settings/urls.py

@@ -8,11 +8,12 @@
 from django.conf.urls.static import static
 from django.contrib import admin
 from django.urls import include, path
-from django.views.decorators.csrf import csrf_exempt
+from django.views.decorators.csrf import csrf_protect
 from graphene_django.views import GraphQLView
 from rest_framework import routers
 
 from apps.core.api.algolia import algolia_search
+from apps.core.api.csrf_token import get_csrf_token
 from apps.github.api.urls import router as github_router
 from apps.owasp.api.urls import router as owasp_router
 from apps.slack.apps import SlackConfig
@@ -22,8 +23,9 @@
 router.registry.extend(owasp_router.registry)
 
 urlpatterns = [
-    path("idx/", csrf_exempt(algolia_search)),
-    path("graphql/", csrf_exempt(GraphQLView.as_view(graphiql=settings.DEBUG))),
+    path("idx/", csrf_protect(algolia_search)),
+    path("graphql/", csrf_protect(GraphQLView.as_view(graphiql=settings.DEBUG))),
+    path("csrf", get_csrf_token),
     path("api/v1/", include(router.urls)),
     path("a/", admin.site.urls),
 ]

frontend/__tests__/unit/utils/utility.test.ts

@@ -1,5 +1,9 @@
 import { getCsrfToken } from 'utils/utility'
 
+jest.mock('api/getCsrfToken', () => ({
+  getInitialCsrfToken: jest.fn(() => Promise.resolve('abc123')),
+}))
+
 describe('utility tests', () => {
   beforeEach(() => {
     jest.clearAllMocks()
@@ -9,33 +13,39 @@ describe('utility tests', () => {
     })
   })
 
-  test('returns CSRF token when it exists in cookies', () => {
+  test('returns CSRF token when it exists in cookies', async () => {
     document.cookie = 'csrftoken=abc123; otherkey=xyz789'
-    expect(getCsrfToken()).toBe('abc123')
+    const result = await getCsrfToken()
+    expect(result).toBe('abc123')
   })
 
-  test('returns undefined when no cookies are present', () => {
+  test('returns new token when no cookies are present', async () => {
     document.cookie = ''
-    expect(getCsrfToken()).toBeUndefined()
+    const result = await getCsrfToken()
+    expect(result).toBe('abc123')
   })
 
-  test('returns undefined when csrftoken cookie is not present', () => {
+  test('returns new csrftoken when csrftoken cookie is not present', async () => {
     document.cookie = 'someid=xyz789; othercookie=123'
-    expect(getCsrfToken()).toBeUndefined()
+    const result = await getCsrfToken()
+    expect(result).toBe('abc123')
   })
 
-  test('returns first csrftoken value when multiple cookies exist', () => {
+  test('returns first csrftoken value when multiple cookies exist', async () => {
     document.cookie = 'csrftoken=first; csrftoken=second; otherid=xyz789'
-    expect(getCsrfToken()).toBe('first')
+    const result = await getCsrfToken()
+    expect(result).toBe('first')
   })
 
-  test('handles cookie with no value', () => {
+  test('handles cookie with no value', async () => {
     document.cookie = 'csrftoken=; otherid=xyz789'
-    expect(getCsrfToken()).toBe('')
+    const result = await getCsrfToken()
+    expect(result).toBe('abc123')
   })
 
-  test('handles malformed cookie string', () => {
+  test('handles malformed cookie string', async () => {
     document.cookie = 'csrftoken; otherid=xyz789'
-    expect(getCsrfToken()).toBeUndefined()
+    const result = await getCsrfToken()
+    expect(result).toBe('abc123')
   })
 })

frontend/src/api/fetchAlgoliaData.ts

@@ -20,7 +20,7 @@ export const fetchAlgoliaData = async <T>(
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        'X-CSRFToken': getCsrfToken() || '',
+        'X-CSRFToken': (await getCsrfToken()) || '',
       },
       credentials: 'include',
       body: JSON.stringify({

frontend/src/api/getCsrfToken.ts

@@ -0,0 +1,22 @@
+import { AppError } from 'wrappers/ErrorWrapper'
+
+export const getInitialCsrfToken = async () => {
+  try {
+    const response = await fetch('http://localhost:8000/csrf', {
+      method: 'GET',
+    })
+
+    if (!response.ok) {
+      throw new AppError(response.status, 'Failed to fetch CSRF token')
+    }
+
+    const data = await response.json()
+    document.cookie = `csrftoken=${data.csrftoken}; path=/; SameSite=Lax`
+    return data.csrftoken
+  } catch (error) {
+    if (error instanceof AppError) {
+      throw error
+    }
+    throw new AppError(500, 'Internal server error')
+  }
+}

frontend/src/utils/helpers/apolloClient.ts

@@ -16,11 +16,11 @@ const createApolloClient = () => {
     uri: GRAPHQL_URL,
   })
 
-  const authLink = setContext((_, { headers }) => {
+  const authLink = setContext(async (_, { headers }) => {
     return {
       headers: {
         ...headers,
-        'X-CSRFToken': getCsrfToken() || '',
+        'X-CSRFToken': (await getCsrfToken()) || '',
       },
     }
   })

frontend/src/utils/utility.ts

@@ -1,3 +1,4 @@
+import { getInitialCsrfToken } from 'api/getCsrfToken'
 import { type ClassValue, clsx } from 'clsx'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -65,10 +66,17 @@ export type IndexedObject = {
   [key: string]: unknown
 }
 
-export const getCsrfToken = (): string | undefined => {
-  return document.cookie
+export const getCsrfToken = async () => {
+  const csrfToken = document.cookie
     .split(';')
     .map((cookie) => cookie.split('='))
     .find(([key]) => key.trim() === 'csrftoken')?.[1]
     ?.trim()
+
+  if (csrfToken) {
+    return csrfToken
+  }
+
+  const res = await getInitialCsrfToken()
+  return res
 }