How to handle Scripts that are coming from Google Tag Manager #31
Comments
|
if you use the package with Next 12 and the drop-in components for In import { chain, nextSafe, strictDynamic } from '@next-safe/middleware';
const isDev = process.env.NODE_ENV === 'development';
export default chain(nextSafe({ isDev }), strictDynamic());In import Document, { provideComponents } from '@next-safe/middleware/dist/document';
import { Html, Main } from 'next/document';
import React from 'react';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return initialProps
}
render() {
// those components are automagically wired with strictDynamic
const { Head, NextScript } = provideComponents(this.props);
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}in import Script from 'next/script';
const gtmInlineScript = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
`
function MyApp({ Component, pageProps }) {
return (
<>
<Script
id="gtm"
strategy="beforeInteractive"
>
{gtmInlineScript}
</Script>
<Component {...pageProps} />
</>
);
}
export default MyApp;Please let me know if this works for you or if you have problems or further questions. |
|
Hi @nibtime Thanks for the detailed explanation. I'll try to setup this package in the application today and will see how things go with GTM. My only concern is whether hash based implementation will work for custom GTM tags or not, if it works that will be great! |
|
it will work from the CSP side of thing, both for Hash-based and Nonce-based and the package makes the decision for you per page. Why it will work, see https://content-security-policy.com/strict-dynamic/ I made the package primarily for my own use cases, and those include Tag Manager and also Consent Tools. They both are heavy in dynamic script insertion. The transitive trust propagation with GTM works as such:
Please let me know if that works for your specific use case or if I;ve been missing something, so I can fix it. |
|
That perfectly makes sense @nibtime. I'll let you know about the result. Thanks again for jumping! |
|
Hi @nibtime |
|
the middleware for CSP base config behaves exactly like https://trezy.gitbook.io/next-safe/usage/configuration. Unfortunately, is doesn't seem to support disabling single directive, only whole CSP with false. Fortunately, this package has utils for building middleware around CSPs so you can accomplish what you want quite easy with them. I forked the demo project for the package and made a setup that accomplishes what you want: https://stackblitz.com/edit/nextjs-vg1ozj?file=pages%2F_middleware.js Hope this solves your problem. |
|
Hi @nibtime |
|
that is indeed a problem of the lib. For But there is a simple workaround you can do in the meantime, by using How to do that, see here: https://stackblitz.com/edit/nextjs-vg1ozj?file=pages%2F_middleware.js,pages%2F_document.js |
I am trying to implement strict CSP in an application and found this package. It looks like this package will handle both cases where either page is rendered on the server side(using nonce implementation) or page is statically generated at the build time( hash based implementation). My understanding is that hash based implementation will generate hash for scripts available at build time and it will not work for scripts that will be fetched via Google Tag Manager(when the website will be loaded on client side) and GTM adds scripts dynamically based on some user actions so I think those scripts will get blocked in hash based implementation. For that I was using nonce based approach but nonce based approach does not work for statically generated pages.
The application in which I'm working I was able to setup strict CSP for server rendered pages using nonce based approach and was able to allow custom GTM scripts to load using this technique and I need a way to setup strict CSP for statically generated pages as well.
Any suggestions will be warmly welcomed. :)
The text was updated successfully, but these errors were encountered: