How to use Csp Policy without sri enabled in SSR mode

[discoverlance-com]

I am using the node adapter to output server mode in my astro application.

I have setup the following shield content:

shield({
			// sri: {
			// 	enableMiddleware: true, // MUST be enabled for dynamic pages!
			// 	hashesModule: modulePath, // SHOULD be set!
			// },
			securityHeaders: {
				contentSecurityPolicy: {
					cspDirectives: {
						'default-src': "'self'",
						'connect-src': "'self'",
						'base-uri': "'self'",
						'form-action': "'self'",
						'script-src':
							"'self' fonts.googleapis.com fonts.gstatic.com https://*.clarity.ms https://c.bing.com",
						'style-src': "'self' font.googleapis.com",
						'font-src': "'self' fonts.gstatic.com fonts.googleapis.com",
						'img-src': "'self' data:",
						'frame-ancestors': "'self'",
					},
				},
			},
		}),

When I enable (uncomment) the sri part of my shield config, I get csp errors (Refused to apply inline style because it violates the following Content Security Policy directive: ...). The error is coming from a react component with a client:load client component directive.

I added 'unsafe-inline' to my 'style-src' directive in my csp policy but that does not solve the issue because sri basically generates hashes and CSP ignores 'unsafe-inline' if there's a hash or nonce in the policy.

But I realised that when I remove the sri (as seen in the code commented above), the csp policy header is not added at all for my pages. I built my app after removing the sri directive and there's no CSP header on my page after checking my network tab. I think it might partly be due to the fact that the csp is added to the middleware from the sri options so without it, it does not work for server pages.

Is there any way around this? Am I perhaps not on the right track in trying to find a solution to this?