wip: csp

apps/website/components/ContributorCard.vue

@@ -33,6 +33,8 @@ const cardGradientColor = computed(() => {
 	computedBackground = computed(() => {
 		return `background: linear-gradient(-35deg, ${cardGradientColor.value.secondary} 20%, ${cardGradientColor.value.primary} 130%); box-shadow: 0 2px 52px 0 ${cardShadowColor.value}`;
 	});
+
+const nonce = useNonce();
 </script>
 
 <template>
@@ -53,6 +55,7 @@ const cardGradientColor = computed(() => {
 		<div class="relative ml2">
 			<NuxtImg
 				v-if="user?.user?.avatar"
+				:nonce="nonce"
 				:src="`${user?.user?.avatar}?size=40`"
 				class="h-auto w-10 min-w-10 rd-100"
 				draggable="false"

apps/website/components/Footer.vue

@@ -97,6 +97,8 @@ const linkSections = computed(() => [
 		],
 	},
 ] as LinkSection[] satisfies LinkSection[]);
+
+const nonce = useNonce();
 </script>
 
 <template>
@@ -115,7 +117,7 @@ const linkSections = computed(() => [
 						target="_blank"
 						rel="noopener noreferrer"
 					>
-						<NuxtImg :src="partner.image" :alt="partner.label" height="32px" width="32px" />
+						<NuxtImg :src="partner.image" :alt="partner.label" height="32px" width="32px" :nonce="nonce" />
 					</a>
 				</div>
 			</div>

apps/website/components/UserChip.vue

@@ -24,6 +24,8 @@ const userColor = computed(() => {
 });
 
 const localePath = useLocalePath();
+
+const nonce = useNonce();
 </script>
 
 <template>
@@ -34,6 +36,7 @@ const localePath = useLocalePath();
 					class="rounded-full h-6 w-6"
 					:src="userAvatar"
 					alt="User avatar"
+					:nonce="nonce"
 				/>
 				<p
 					class="font-bold" :style="{

apps/website/nuxt.config.ts

@@ -12,11 +12,11 @@ export default defineNuxtConfig({
 				"img-src": ["'self'", "data:", "https:"],
 				"script-src": [
 					"'self'",
-					"https:",
-					"'unsafe-inline'",
-					"'strict-dynamic'",
 					"'nonce-{{nonce}}'",
-					"'unsafe-eval'",
+					"'strict-dynamic'",
+					 // Add Cloudflare's script sources
+					"*.cloudflare.com",
+					"*.cloudflareinsights.com",
 				],
 				"script-src-attr": ["'self'"],
 			},

apps/website/pages/index.vue

@@ -140,6 +140,8 @@ const computedUsage = computed(() =>
 );
 
 const localePath = useLocalePath();
+
+const nonce = useNonce();
 </script>
 
 <template>
@@ -156,6 +158,7 @@ const localePath = useLocalePath();
 					class="mb-2 w-32"
 					width="128px"
 					height="128px"
+					:nonce="nonce"
 				/>
 				<h1 class="font-extrabold mb-4 text-4xl">
 					{{ $t("page.home.title") }}

apps/website/pages/users/[id].vue

@@ -10,13 +10,15 @@ const presences = computed(() => [...data.value.authorPresences, ...data.value.c
 if (status.value === "success" && !user.value) {
 	router.replace("/store");
 }
+
+const nonce = useNonce();
 </script>
 
 <template>
 	<div class="flex flex-col gap-10 w-full">
 		<template v-if="user">
 			<div class="flex justify-center items-center gap-3">
-				<NuxtImg :src="`${user?.avatar}?size=1024`" alt="User Avatar" class="w-20 h-20 rounded-full" />
+				<NuxtImg :src="`${user?.avatar}?size=1024`" alt="User Avatar" class="w-20 h-20 rounded-full" :nonce="nonce" />
 				<h1 class="font-bold text-xl">
 					{{ user?.name }}
 				</h1>