How to add multiple values to csp directives #77

discoverlance-com · 2024-04-24T17:51:11Z

discoverlance-com
Apr 24, 2024

First of all, thanks for this package. Really helped me a lot. The example in the website does not specify one where you can use multiple values for one directive so not sure what's the right thing to do as the only example is a single one with 'none'.

I am trying to use it to configure my csp, but I am having issues with the generated csp policy.
This is my csp config:

securityHeaders: {
        contentSecurityPolicy: {
          cspDirectives: {
                'default-src': "'self'",
	        'base-uri': "'self'",
	        'form-action':  "'self'",						
		'script-src':  "'self' 'strict-dynamic' 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:",
		'object-src':  "'none'",
		'frame-ancestors': "'self'"
          }
        }
      }

But it seems not to work as I am getting an error in my console.

Also, I see that the function that serializes the headers checks for single quotes and if not available, it adds them. I think not all directives need that as ones like 'self' 'strict-dynamic' request quotes but urls and other values don't. Could that be the issue or I am just getting something wrong here. Please help. Thanks.

// I mean this serialise function.
export const safeSerialiseHashes = hashes =>
	Array.from(hashes)
		.sort()
		.map(h => (h.match(/^'[^']+'$/i) ? h : `'${h}'`))
		.join(' ')