#React-google-maps/api CSP error

1 messages · Page 1 of 1 (latest)

jolly onyx
#

Hi Remix fellows,
I'm trying to implement react-google-map/api in my remix project
I'm unable to load the map, I get errors in the console regarding the CSP if i'm correct :

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'self' 'nonce-00719663fda0401cf01e95b8ac300417'". Either the 'unsafe-inline' keyword, a hash ('sha256-pD1IvxrgXgKrAhNJmdMwtplCR1BZCy9ekf7LyKljrWI='), or a nonce ('nonce-...') is required to enable inline execution.

I set all the CSP with unsafe-inline in the loader, with a nonce, but still get this error. Also I use lazy loading + suspense to render the map component. Component here:

export const loader = async ({ request, params }: LoaderFunctionArgs) => {
    const nonce = generateNonce() // Generate a nonce for the CSP
    return typedjson(
        {},
        {
            headers: {
                'Content-Security-Policy': `
script-src 'self' 'nonce-${nonce}' 'strict-dynamic' 'unsafe-inline';
img-src 'self' https://maps.gstatic.com data:;
connect-src 'self' https://maps.googleapis.com ws://localhost:3001;
frame-src *.google.com; font-src https://fonts.gstatic.com;
style-src 'nonce-${nonce}' https://fonts.googleapis.com; worker-src blob;`,
            },
const GoogleMap = lazy(() => import('./components/mapComponent.tsx'))

            <Suspense
                fallback={<div>Loading</div>}
                <GoogleMap />
            </Suspense>

Thanks for your help, this is a bit obscur to me as a not so advanced dev coolpanic

#

React-google-maps/api CSP