How to fix refused to load the script https://maps.googleapis.com/maps/api/...because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'

[Lanh Nguyen]

Hi everyone,

I got a issue and can not using autocomplete place, I have try to fix it but still not resolve it
In env local, I load script google map not get any issue, but env production I got the following error.

Refused to load the script 'https://maps.googleapis.com/maps/api/js?v=weekly&key=xxxxxyyyyyyddđd&libraries=places&language=vi' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com connect.facebook.net www.googleadservices.com www.google-analytics.com googleads.g.doubleclick.net onesignal.com tpc.googlesyndication.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

This is how I try, but still can not fix it:

<meta httpEquiv="Content-Security-Policy" content="script-src 'self' 'unsafe-eval' 'unsafe-inline' developers.google.com maps.googleapis.com https://www.googletagmanager.com https://connect.facebook.net https://www.googleadservices.com https://www.google-analytics.com https://googleads.g.doubleclick.net https://onesignal.com https://tpc.googlesyndication.com;" />

And don't know where the other sources are called from, because I don't use it like: www.googletagmanager.com, connect.facebook.net, www.googleadservices.com, www.google-analytics.com, googleads.g.doubleclick .net,...

Looking forward to all the helpers. Thanks all.

Source:

• NextJS: 11.1.2