refactor: fetch content policy headers instead of hardcoding

src/hooks.server.ts

@@ -36,29 +36,11 @@ const handleHeaders: Handle = async ({ event, resolve }) => {
 		'Cross-Origin-Resource-Policy': 'cross-origin'
 	};
 
-	const csp = Object.entries({
-		'default-src': ['self'],
-		'script-src': ['self'],
-		'style-src': ['self'],
-		'font-src': ['self'],
-		'img-src': ['self', 'data:', 'https:'],
-		'connect-src': ['self'],
-		'object-src': ['none'],
-		'base-uri': ['self'],
-		'form-action': ['self'],
-		'frame-ancestors': ['none']
-	})
-		.map(([directive, value]) => `${directive} ${value.join(' ')}`)
-		.join('; ');
-
 	if (!dev) {
 		headers['Strict-Transport-Security'] = 'max-age=31536000; includeSubDomains';
 	}
 
-	event.locals.securityHeaders = {
-		...headers,
-		['Content-Security-Policy']: csp
-	};
+	event.locals.securityHeaders = headers;
 
 	const response = await resolve(event);
 

src/routes/security/+page.server.ts

@@ -1,6 +1,8 @@
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = ({ locals }) => {
+export const load: PageServerLoad = ({ locals, setHeaders }) => {
+	setHeaders({ 'Cache-Control': 'public, max-age=1800' });
+
 	return {
 		headers: Object.entries(locals.securityHeaders).map(([name, value]) => ({ name, value }))
 	};

src/routes/security/+page.ts

@@ -0,0 +1,12 @@
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ fetch, data }) => {
+	const response = await fetch('/security');
+
+	//NOTE: This is a workaround to get the security headers from the server response.
+	const csp = response.headers.get('content-security-policy');
+
+	data.headers.push({ name: 'Content-Security-Policy', value: csp ?? '' });
+
+	return data;
+};