Blocked CSP on GoogleTagManager (@next/third-parties) #57985

levipadre · 2023-11-03T12:22:07Z

levipadre
Nov 3, 2023

Summary

To Reproduce
1, install npx create-next-app --example with-strict-csp with-strict-csp-app
2, install npm install @next/third-parties
3, add:

import { GoogleTagManager } from '@next/third-parties/google'
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
    </html>
  )
}

4,change GTM code to a working one
5, add googletagmanager site to script-src: script-src 'self' 'nonce-${nonce}' 'strict-dynamic' *.googletagmanager.com;
This would make it work with normal Script

Current behavior
Error message: Refused to load the script 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX' because it violates the following Content Security Policy directive: "script-src 'self' 'nonce-ZGFiZDVjOWMtNDZmZS00MmVhLTk3YmUtNGNhNGIzYzhiZDhm' 'strict-dynamic' *.googletagmanager.com". Note that 'strict-dynamic' is present, so host-based allowlisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

and:

Additional information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:42:42 PDT 2023; root:xnu-10002.1.13~1/RELEASE_X86_64
    Binaries:
      Node: 18.17.0
      npm: 9.6.7
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.5.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A
    Next.js Config:
      output: N/A

Example

Sorry, due to exposing GTM code I can't provide link

KWarnockAuthx · 2023-11-29T21:48:34Z

KWarnockAuthx
Nov 29, 2023

@levipadre We recently enabled nonces for a client of ours and had to work with the team implementing Google Tag Manager to make it "nonce aware". This article may be of help to you: https://developers.google.com/tag-platform/security/guides/csp

3 replies

levipadre Nov 29, 2023
Author

Thanks @KWarnockAuthx. I know it works with Script (normal tag manager implementation), but have you tried/used with <GoogleTagManager nonce={generated} gtmId=”GTM-ZYX” />? Will it work?

0xdbe Jan 26, 2024

By following the official guideline for CSP, nonce will be injected automatically for each server-side generated script tags. This is a feature from React (PR 26738).

@levipadre: GoogleTagManager from @next/third-parties is, to this day, a client side component. That means it is not able to create script tag with a nonce.

literat Jul 10, 2025

Hi, I have come over this discussion and found out that the nonce prop is already there - https://github.com/vercel/next.js/blob/canary/packages/third-parties/src/google/gtm.tsx#L18. But the official documentation only mention it for GoogleAnalytics component - https://nextjs.org/docs/app/guides/third-party-libraries. I have already send a feedback, so I hope they will update the docs.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Blocked CSP on GoogleTagManager (@next/third-parties) #57985

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Blocked CSP on GoogleTagManager (@next/third-parties) #57985

Uh oh!

Uh oh!

levipadre Nov 3, 2023

Summary

Additional information

Example

Replies: 1 comment · 3 replies

Uh oh!

KWarnockAuthx Nov 29, 2023

Uh oh!

levipadre Nov 29, 2023 Author

Uh oh!

0xdbe Jan 26, 2024

Uh oh!

literat Jul 10, 2025

levipadre
Nov 3, 2023

Replies: 1 comment 3 replies

KWarnockAuthx
Nov 29, 2023

levipadre Nov 29, 2023
Author