feat: implementation of csrf, csp and secure cookies

frontend/src/app/plans/_components/share-plan-button.tsx

@@ -7,6 +7,7 @@ import { v4 as uuidv4 } from "uuid";
 import { Icons } from "@/components/icons";
 import { Button } from "@/components/ui/button";
 import { env } from "@/env.mjs";
+import { fetchClient } from "@/lib/fetch";
 import type { PlanState } from "@/types";
 
 export function SharePlanButton({ plan }: { plan: PlanState }) {
@@ -34,16 +35,9 @@ export function SharePlanButton({ plan }: { plan: PlanState }) {
     const randomUUID = uuidv4();
 
     try {
-      const csrfToken = document.cookie
-        .split("; ")
-        .find((row) => row.startsWith("XSRF-TOKEN="))
-        ?.split("=")[1];
-      const response = await fetch(`${env.NEXT_PUBLIC_API_URL}/shared`, {
+      const response = await fetchClient({
+        url: "/shared",
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          "X-XSRF-TOKEN": csrfToken ?? "",
-        },
         body: JSON.stringify({
           plan: JSON.stringify(preparedData),
           id: randomUUID,

frontend/src/app/plans/edit/[id]/page.client.tsx

@@ -36,9 +36,9 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
-import { env } from "@/env.mjs";
 import { useSession } from "@/hooks/use-session";
 import { useShare } from "@/hooks/use-share";
+import { fetchClient } from "@/lib/fetch";
 import { usePlan } from "@/lib/use-plan";
 import { registrationReplacer } from "@/lib/utils";
 import { createOnlinePlan } from "@/lib/utils/create-online-plan";
@@ -79,18 +79,10 @@ export function CreateNewPlanPage({
     enabled: faculty !== null && faculty !== "",
     queryKey: ["registrations", faculty],
     queryFn: async () => {
-      const csrfToken = document.cookie
-        .split("; ")
-        .find((row) => row.startsWith("XSRF-TOKEN="))
-        ?.split("=")[1];
-      const response = await fetch(
-        `${env.NEXT_PUBLIC_API_URL}/departments/${encodeURIComponent(faculty ?? "")}/registrations`,
-        {
-          headers: {
-            "X-XSRF-TOKEN": csrfToken ?? "",
-          },
-        },
-      );
+      const response = await fetchClient({
+        url: `/departments/${encodeURIComponent(faculty ?? "")}/registrations`,
+        method: "GET",
+      });
 
       if (!response.ok) {
         throw new Error("Network response was not ok");
@@ -125,18 +117,10 @@ export function CreateNewPlanPage({
   const coursesFunction = useMutation({
     mutationKey: ["courses"],
     mutationFn: async (registrationId: string) => {
-      const csrfToken = document.cookie
-        .split("; ")
-        .find((row) => row.startsWith("XSRF-TOKEN="))
-        ?.split("=")[1];
-      const response = await fetch(
-        `${env.NEXT_PUBLIC_API_URL}/departments/${encodeURIComponent(faculty ?? "")}/registrations/${encodeURIComponent(registrationId)}/courses`,
-        {
-          headers: {
-            "X-XSRF-TOKEN": csrfToken ?? "",
-          },
-        },
-      );
+      const response = await fetchClient({
+        url: `/departments/${encodeURIComponent(faculty ?? "")}/registrations/${encodeURIComponent(registrationId)}/courses`,
+        method: "GET",
+      });
 
       if (!response.ok) {
         throw new Error("Network response was not ok");

frontend/src/lib/fetch.ts

@@ -0,0 +1,34 @@
+"use client";
+
+import { env } from "@/env.mjs";
+
+export const fetchClient = async ({
+  url,
+  method,
+  body,
+}: {
+  url: string;
+  method: RequestInit["method"];
+  body?: string | null;
+}): Promise<Response> => {
+  const csrfToken = document.cookie
+    .split("; ")
+    .find((row) => row.startsWith("XSRF-TOKEN="))
+    ?.split("=")[1];
+
+  const fetchOptions: RequestInit = {
+    method,
+    headers: {
+      "Content-Type": "application/json",
+      "X-XSRF-TOKEN": csrfToken ?? "",
+    },
+    credentials: "include",
+  };
+
+  if (method !== "GET" && method !== "HEAD" && body !== undefined) {
+    fetchOptions.body = body;
+  }
+
+  const response = fetch(`${env.NEXT_PUBLIC_API_URL}${url}`, fetchOptions);
+  return await response;
+};