Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow passing a nonce to two third-party libraries #61820

Open
wants to merge 1 commit into
base: canary
Choose a base branch
from

Conversation

Vinnl
Copy link

@Vinnl Vinnl commented Feb 8, 2024

Specifically, <GoogleAnalytics> and <GoogleTagManager>. I did not know how to add it to the YouTube and Google Maps embeds, since they do not use the <Script> tag directly and I didn't quite know how those are run, but this at least partially fixes #61714.

Unfortunately, my laptop froze when trying to run non-unit tests or build, so I haven't been able to do that. I also didn't find existing unit tests I could expand on. However, I did copy the code into ours, and it worked well there.

@Vinnl Vinnl requested review from jh3y and delbaoliveira and removed request for a team February 8, 2024 15:57
Specifically, <GoogleAnalytics> and <GoogleTagManager>. I did not
know how to add it to the YouTube and Google Maps embeds, since
they do not use the <Script> tag.
@@ -43,11 +50,13 @@ export function GoogleTagManager(props: GTMParams) {
${dataLayer ? `w[l].push(${JSON.stringify(dataLayer)})` : ''}
})(window,'${dataLayerName}');`,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Google docs have a modified version of scripts when using a CSP, that seems to pass the nonce as an attribute. This might need to change

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Vinnl Do you have the bandwidth to update your PR?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for asking, but not really - I don't use GTM myself, so I'm not sure what should be needed here, and it doesn't look like this PR is going to get looked at anyway...

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the reply. Basically need a small fix to the script according to @Stuj1's suggestion. Do you want to give it a try or I can raise another PR to fix that?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Happy to merge a PR into mine, or for you to create a separate PR - whatever works for you!

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would be great if this can be used soon!

@balazsorban44 balazsorban44 added Documentation Related to Next.js' official documentation. and removed area: documentation labels Apr 17, 2024
Copy link
Member

@huozhi huozhi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi! Thanks for the PR, can we add a test for it?

@@ -11,11 +13,13 @@ export type GTMParams = {
dataLayerName?: string
auth?: string
preview?: string
nonce?: ScriptProps['nonce']
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can use simple type to avoid relying on next/script only for types

Suggested change
nonce?: ScriptProps['nonce']
nonce?: string

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Happy to change, but I figured this made more sense in case <Script> accepts different values for nonce in the future - is there a downside to importing from next/script?

As for your top-level comment:

can we add a test for it?

I mentioned above, I'd like to, but:

Unfortunately, my laptop froze when trying to run non-unit tests or build, so I haven't been able to do that. I also didn't find existing unit tests I could expand on. However, I did copy the code mozilla/blurts-server#4160, and it worked well there.

But if you have some pointers on what it would look like, I could see if I could give it a shot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Documentation Related to Next.js' official documentation.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[@next/third-parties] nonce doesn't get added to third-party script tags
7 participants