-1

I got a issue and can not using use-places-autocomplete, 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

Lành Nguyễn Văn
  • 1

1 Answers1

0

You are on a right way (I mean an adding maps.googleapis.com into script-src), but looks like you already published CSP via HTTP header, therefore your <meta> tag is not working.

Check if you already have a CSP header, a manual is here.
If you already have a CSP header, you need to make corrections to it, and not publish the second CSP in the meta tag.

It is very likely that your CSP header is published by Helmet middleware, it's in NodeJS dependencies.

granty
  • 7,234
  • 1
  • 14
  • 21