Allow csp configuration to dynamically read env variables

[raythurnvoid]

Describe the problem

I have an "adapter-node" app deployed somewhere, I have different environments (dev, qa, prod) and i would like to provide different values to the csp configuration based on the env variables set in each environment at runtime.

Describe the proposed solution

Maybe sveltekit may support "app.html" like syntax to read the env variables at runtime:

csp: {
	directives: {
		'frame-src': ['self', '%sveltekit.env.APP_PUBLIC_TRUSTED_DOMAIN%']
	}
}

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response

[roelvanhintum]

Late response, but for others running into this problem: You could work around this by replacing the env variable names in the hooks.server.ts handle function.

import type { Handle } from '@sveltejs/kit';
import { env } from '$env/dynamic/private';

export const handle: Handle = async ({ event, resolve }) => {
	const response = await resolve(event);
	
	// Replace ENV variables in CSP
	const csp = response.headers.get('content-security-policy');
	response.headers.set(
		'Content-Security-Policy',
		csp?.replaceAll('APP_PUBLIC_TRUSTED_DOMAIN', env.APP_PUBLIC_TRUSTED_DOMAIN) || '',
	);
	
	return response;
};

[hhvrc]

Issue #13208 if solved should allow for very dynamic CSP HTTP headers which would solve this