Trouble Implementing Content Security Policy (CSP) with Google Maps and Google Tag Manager in React Project #1228

I'm facing issues implementing Content Security Policy (CSP) in my React project while allowing scripts for Google Maps and Google Tag Manager. I've configured my nginx server to send CSP headers, and here's the relevant configuration:

nginx

add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://maps.googleapis.com https://www.googletagmanager.com https://cdnjs.cloudflare.com https://d3js.org; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; connect-src 'self';";

In my HTML file within the React project, I've included script tags for Google Maps and Google Tag Manager:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_TAG_ID"></script>

Despite configuring CSP to include these script sources, I'm still encountering errors or the scripts are being blocked.

Failed to find a valid digest in the 'integrity' attribute for resource 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDaq9FCKfD7v_bnTa6qdDzv5QBwrjwavvg&libraries=places' with computed SHA-384 integrity '8sbafhEHRTlan1R26NOYbn5Mv59WSzRhYoyoHgaKR/Nnq0BkfhLq0Cn3Dv0d2dOM'. The resource has been blocked.

How can I adjust my CSP directives to allow these scripts while maintaining security best practices? Additionally, are there any alternative approaches I should consider?