CSP Header Setting

Question

Good Day

I'm trying to configure a CSP header, and every time I try to load one of the maps, it just doesn't render, this is what I get:

This is my CSP setting:

frame-ancestors
 'self';
block-all-mixed-content;
default-src
 'self';
script-src
 'self'
 'report-sample'
 'unsafe-inline'
 'unsafe-eval'
style-src
 'self'
 'report-sample'
 'unsafe-inline'
 js.arcgis.com
object-src
 'none';
frame-src
 'self'
child-src
 'self';
img-src
 'self'
 data:
 blob:
 *.arcgis.com
font-src
 'self'
 data:
 js.arcgis.com;
connect-src
 'self'
 *.arcgisonline.com
 *.arcgis.com
manifest-src
 'self';
base-uri
 'self';
form-action
 'self';
media-src
 'self'
prefetch-src
 'self';
worker-src
 'self'
 blob:;

What do I need to add, or change?

Thanks

AndrewMurdoch1 · Answer

Thanks for the suggestion.

The issue, I was missing: https://js.arcgis.com/4.26/@arcgis/core/assets/esri/core/workers/RemoteClient.js in script-src.  Once I added that the workers were able to load and everything, so far, has been working great.

Thanks

RachelGomez · Answer

Based on the error message in the screenshot, it appears that the issue is related to the Content Security Policy (CSP) settings blocking the loading of the map. To resolve this issue, you can modify your CSP settings to allow the necessary domains for the map to render properly.

The script-src directive should include the domains used by the map, such as js.arcgis.com. Also, the img-src directive should allow *.arcgis.com for loading map images.

Here's an updated version of your CSP settings:

plaintext
Copy code
frame-ancestors 'self';
block-all-mixed-content;
default-src 'self';
script-src 'self' 'report-sample' 'unsafe-inline' 'unsafe-eval' js.arcgis.com;
style-src 'self' 'report-sample' 'unsafe-inline' js.arcgis.com;
object-src 'none';
frame-src 'self';
child-src 'self';
img-src 'self' data: blob: *.arcgis.com;
font-src 'self' data: js.arcgis.com;
connect-src 'self' *.arcgisonline.com *.arcgis.com;
manifest-src 'self';
base-uri 'self';
form-action 'self';
media-src 'self';
prefetch-src 'self';
worker-src 'self' blob:;
With these updated CSP settings, you should allow the necessary domains for the map to render without being blocked by the Content Security Policy.

Regards,

Rachel Gomez