2 years ago

#66987

test-img

MrMenchaca

Content-Security-Policy with React, Electron and Webpack

i'm developing an app to show trekking routes with Electron, React and Typescript (also Webpack). But, when i try to load GoogleMaps api, i get the following error:

Refused to load the script 'https://maps.googleapis.com/maps/api/js?callback=__googleMapsCallback&key={MY_KEY}' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'unsafe-inline' data:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. error

I tried to configure my Content-Security-Policy with webpack like this:

new CspHtmlWebpackPlugin({ 'base-uri': "'self'", 'object-src': "'none'", 'script-src': ["'self'", "'unsafe-inline'", "https:", "https://*.googleapis.com","https://maps.gstatic.com", "'unsafe-eval'"], 'style-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"], }) plugins

And, if i inspect the header, it looks like it's working: header

reactjs

typescript

webpack

electron

scp

reactjs

typescript

webpack

electron

scp

0 Answers

Your Answer

Accepted video resources