Bug: nonce config does not output nonce to script tag

[gtm-support]

Bug: nonce config does not output nonce to script tag

[Orrison]

@Shinigami92 see a live example of this not working here: https://codesandbox.io/s/hopeful-tharp-tvv97x?file=/src/main.js

[Shinigami92]

@Orrison you can ignore the comment. Someone posted a comment (you can read the comment in the quote of my previous post) and then deleted the comment again. I assume because they realized that the question was incorrect at all.
That deletion just confused you, sorry for that 🙂

[Shinigami92]

There are tests

vue-gtm/tests/vue-use.test.ts

Line 129 in 18fd337

test('should set src.nonce if configured', () => {

Could you please check if the test does not fulfill some expectations you have?
Maybe we need to add another test with some specific configurations?

[Orrison]

@Shinigami92 hmm, that test seems to make sense and validate the expectation I would have. But this does not seem to be happening in practice outside of tests.

My configuration is simple, only slightly different from the documentation.

import { createApp } from 'vue';
import App from './App.vue';
import { IonicVue } from '@ionic/vue';
import { createPinia } from 'pinia';
import router from './router';

const pinia = createPinia();

const app = createApp(App)
    .use(IonicVue)
    .use(pinia)
    .use(router)
    .use(
        createGtm({
            id: 'GTM-DEMO',
            enabled: true,
            loadScript: true,
            vueRouter: router,
            nonce: '2726c7f26c',
        })
    );

With this configuration, the output script tag does NOT include the nonce in practice.

<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-DEMO"></script>

Even if I remove all my other configuration to simplify this:

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App)
    .use(
        createGtm({
            id: 'GTM-DEMO',
            enabled: true,
            loadScript: true,
            vueRouter: router,
            nonce: '2726c7f26c',
        })
    );

Sidebar: I was wrong about defer, that is working as expected.

[Shinigami92]

Here the nonce will be set: https://github.com/gtm-support/core/blob/9391b2d691dcff0dd75446c4ddbce3b916e60652/src/utils.ts#L95-L97
I tried to tracked the path, but just in GitHub without checking out the project
To me I could not identify any issue 🤔

Would you like to checkout the repo (core) and try to debug it? It's really not much code, you just need to track down the options with nonce.

[Shinigami92]

@Shinigami92 As a a side note, if I understand the vue-gtm code base correctly, the script is only added in a browser context anyways, so the purpose of using a CSP nonce is kinda defeated or not?

I just quickly read through https://content-security-policy.com/nonce/ to check what CSP nonce are.
Based on that, I'm not sure what you mean by that it is defeated 🤔

[Orrison]

@Shinigami92 As a a side note, if I understand the vue-gtm code base correctly, the script is only added in a browser context anyways, so the purpose of using a CSP nonce is kinda defeated or not?

I just quickly read through https://content-security-policy.com/nonce/ to check what CSP nonce are. Based on that, I'm not sure what you mean by that it is defeated 🤔

Hey @Shinigami92, unsure of which comment you are replying to here.

The intention of a nonce is to generate it every time on the page load server side and supply it to the GTAG script so that it can set the nonce for the scripts it contains.
This provides security and is a great way to have a robust CSP policy while still allowing GTAG managers to add scripts without consulting development.

This package offers a option to set nonce and says "// Will add nonce to the script tag". Though the test is passing it seems that in a real usage, the nonce is not being set on the Script tag created by the package . As you can see in my example above.

By setting the nonce attribute on the script tag calling the GTAG, GTAG is able to supply that to the scripts it will load onto the page. This is a GTAG functionality that works in any other context where a GTAG script is loaded onto the page and executed.

[Orrison]

@Orrison you can ignore the comment. Someone posted a comment (you can read the comment in the quote of my previous post) and then deleted the comment again. I assume because they realized that the question was incorrect at all. That deletion just confused you, sorry for that 🙂

Got it, no problem at all!