Using an inline script makes CSP unsafe

[flowtsohg]

Due to the inline script used to initialize window.dataLayer, CSP requires script-src 'unsafe-inline' which makes the page less safe (for example).

Since this is meant for Next/React, there is no reason to actually use the inline script - for now I stopped using this library for this reason and changed to the following code which uses a React effect instead of an inline script.

It would be nice if the library could do something similar to avoid the safety issue.

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import Script from 'next/script';

export function GoogleAnalytics(): JSX.Element {
  const router = useRouter();

  useEffect(() => {
    const gtagWindow = window as (Window & typeof globalThis & { dataLayer: unknown[] });

    gtagWindow.dataLayer = gtagWindow.dataLayer || [];

    const gtag: Gtag.Gtag = (...args: unknown[]): void => {
      gtagWindow.dataLayer.push(args);
    };

    gtag('js', new Date());
    gtag('config', process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID as string);
  }, [router.pathname]);

  return (
    <Script src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID}`} strategy="afterInteractive" />
  );
}

[MauricioRobayo]

Hello @flowtsohg !

I was not aware of this, thanks for opening the issue.

"Due to the inline script used to initialize window.dataLayer, CSP requires script-src 'unsafe-inline'".

Is it required to use script-src 'unsafe-inline'?

From the link you provided:

When you want to allow inline scripts or styles on a page that uses CSP, there two much better options: nonce or hash.

Would it be possible to use any of those instead of 'unsafe-inline'?

Maybe we could expose a nonce prop so it can be set and not lose the benefits of using Nextjs/Script tag, what do you think about this?

I'm not against your approach and I think it should be a fairly easy change in the GoogleAnalytics component. If you have the time feel free to open a PR, I'll be glad to merge it.

[flowtsohg]

I went back to using your library because my code actually didn't work correctly, haha (albeit that's because I don't know gtag and am focusing on other things).
I did ultimately use a hash since the browser reports the required hashes of CSP blocked files.
Adding an optional nonce could be a nice middle-way solution.

[MauricioRobayo]

Hi @flowtsohg !

The nonce prop has been added, it's on v2.3.2.

Is it ok to close this issue?

[flowtsohg]

Thanks! seems good to close