How to allow content security policy to run external javascript from google api?

user_13088939 0
Viewed 1572

This is my current script-src content security policy for my app:

script-src 'self' 'unsafe-inline' https://maps.googleapis.com https://maps.gstatic.com;

trying to load the following external js code:

https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&libraries=places&language=he

using unsafe-inline it works, but probably unsafe, so I want to remove it in my code, but then it doesn't allow the script to run. tried to add to script-src a value such as https://maps.googleapis.com/* but it still didn't work. how would one allow scripts from a specific domain?

content-security-policy reactjs google-maps html javascript
1 Answers

I had the same problem but was able to resolve it by using a hash with https://*.googleapis.com whitelisted.

The script-src directive lets developers whitelist a particular inline script by specifying its hash as an allowed source of script.

Usage is straightforward. The server computes the hash of a particular script block’s contents, and includes the base64 encoding of that value in the Content-Security-Policy header.

For example:

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-...4aQo=' https://*.googleapis.com">

Note that for dynamic applications it's better to use a nonce.

Hope this helps!

user_117425020
Related