I'm having issues accessing my Amazon Location Services API in the Web application. I see CSP errors for utilizing the API in front end.
Refused to load the image 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA=' because it violates the following Content Security Policy directive: "default-src 'self' https://.amazon.com https://.a2z.com https://.amazonaws.com https://.amazon.dev https://*.amazoncognito.com". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
main.js:32618 Profile: {at_hash: 'bxa4JNzdV6IH3FqBUPjLAQ', sub: 'd3f3ef3b-a6e5-43a8-9f4a-90c22eff9e70', cognito:groups: Array(1), custom:WORKFLOW-DEV: '["workflow-dev"]', iss: 'https://cognito-idp.us-east-1.amazonaws.com/us-east-1_B52K7NH1Z', …}
main.js:32733 isAuthenticated in app.js: true
main.js:33039 Refused to load the script 'https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
(anonymous) @ main.js:33039
commitHookEffectListMount @ main.js:22069
commitPassiveHookEffects @ main.js:22107
callCallback @ main.js:2526
invokeGuardedCallbackDev @ main.js:2575
invokeGuardedCallback @ main.js:2630
flushPassiveEffectsImpl @ main.js:25191
unstable_runWithPriority @ main.js:28022
runWithPriority$1 @ main.js:13377
flushPassiveEffects @ main.js:25158
performSyncWorkOnRoot @ main.js:24075
(anonymous) @ main.js:13427
unstable_runWithPriority @ main.js:28022
runWithPriority$1 @ main.js:13377
flushSyncCallbackQueueImpl @ main.js:13422
flushSyncCallbackQueue @ main.js:13410
flushPassiveEffectsImpl @ main.js:25221
unstable_runWithPriority @ main.js:28022
runWithPriority$1 @ main.js:13377
flushPassiveEffects @ main.js:25158
(anonymous) @ main.js:25037
workLoop @ main.js:27966
flushWork @ main.js:27921
performWorkUntilDeadline @ main.js:27533
Map:11 Refused to load the image 'https://internal-cdn.amazon.com/badgephotos.amazon.com/?uid=bsindhur' because it violates the following Content Security Policy directive: "img-src 'self' data: https://maps.geo.us-west-2.amazonaws.com https://maps.amazonaws.com https://api.mapbox.com https://tiles.mapbox.com".
How to solve these.
Also is there a feature to select a point on map and draw a circle with it highlighting the cities in the circle
Should we initially get the AppSec approvals to add external resources in application CSP