Multiple Content Security Policies in _headers file not being parsed correctly from browser

I’m trying to add a Content Security Policy through setting them through _headers file. The only issue is that our complete CSP policy character length is 2300+ characters and that is greater than the 2000 character limit per line as stated in this documentation here:,joined%20with%20a%20comma%20separator.

Theres an old post here from a year ago:
with some suggestions to split up the CSP policy into multiple policies to reduce the character length of each line under 2000, but this doesn’t seem to be parsed by the browser correctly.

Essentially, my CSP before splitting looked like this:

Content-Security-Policy-Report-Only: default-src 'self'; connect-src 'self'; script-src 'self'; img-src 'self'; 

Breaking it down using the suggestions in the past community post I linked above, into this:

Content-Security-Policy-Report-Only: default-src 'self'; 
Content-Security-Policy-Report-Only: connect-src 'self'; 
Content-Security-Policy-Report-Only: script-src 'self'; 
Content-Security-Policy-Report-Only: img-src 'self'; 

When I check the response headers from cloudflare for the web app, Content-Security-Policy-Report-Only correctly gets added to the headers but with a weird format as so:

Content-Security-Policy-Report-Only: default-src 'self;, connect-src 'self';, script-src 'self';, img-src 'self'

Notice the commas in between different directives.

I also get this console error in the browser explicitly stating [Report Only] Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "default-src none". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback. which seems incorrect since I have img-src being explicitly set. Similar messages also occur for connect-src and script-src even though those are also being explicitly set as well.

Has anyone encountered any issues with multiple Content Security Policies and how to fix this?
Thanks in advance