Add missing tag nonce in getInitScript (#21)

* add missing tag nonce in getInitScript

* update package version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@piwikpro/tracking-base-library",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Piwik PRO basic tracking library for the frontend.",
   "author": "Piwik Pro Integration Team <[email protected]>",
   "license": "MIT",

src/core/index.test.ts

@@ -1,6 +1,6 @@
 import { DataLayerEntry } from '../services/dataLayer/dataLayer.service'
 import * as DataLayer from '../services/dataLayer/dataLayer.service'
-import { init } from './index'
+import { getInitScript, init } from './index'
 
 afterEach(() => {
   const body = document.getElementsByTagName('body')[0]
@@ -107,3 +107,26 @@ describe('init', () => {
     expect((window[dataLayerName] as DataLayerEntry[])[1]).toEqual(event)
   })
 })
+
+describe('getInitScript nonce handling', () => {
+  it('should include nonce in query parameters when nonce value is provided', () => {
+    const scriptContent = getInitScript({
+      containerId: 'test-container',
+      containerUrl: 'https://example.com',
+      dataLayerName: 'dataLayer',
+      nonceValue: 'test-nonce',
+    })
+
+    expect(scriptContent).toContain(',tags.nonce="test-nonce"')
+  })
+
+  it('should not include nonce in query parameters when nonce value is not provided', () => {
+    const scriptContent = getInitScript({
+      containerId: 'test-container',
+      containerUrl: 'https://example.com',
+      dataLayerName: 'dataLayer',
+    })
+
+    expect(scriptContent).not.toContain('tags.nonce=')
+  })
+})

src/core/index.ts

@@ -76,6 +76,7 @@ export function init(
     containerId,
     containerUrl,
     dataLayerName: config.dataLayerName,
+    nonceValue: config.nonce,
   })
 
   const body: HTMLHeadElement = document.getElementsByTagName('body')[0]
@@ -86,18 +87,21 @@ export function getInitScript({
   containerId,
   containerUrl,
   dataLayerName,
+  nonceValue,
 }: {
   containerId: string
   containerUrl: string
   dataLayerName?: string
+  nonceValue?: string
 }) {
   const dataLayer = dataLayerName || DEFAULT_DATA_LAYER_NAME
+  const nonceTag = nonceValue ? `,tags.nonce="${nonceValue}"` : ''
 
   return `(function(window, document, dataLayerName, id) {
   window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script');
   function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d="; expires="+e.toUTCString();f="; SameSite=Strict"}document.cookie=a+"="+b+d+f+"; path=/"}
   var isStgDebug=(window.location.href.match("stg_debug")||document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?14:-1);
-  var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):"";
+  var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName)${nonceTag},isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):"";
   tags.async=!0,tags.src="${containerUrl}/"+id+".js"+qPString,scripts.parentNode.insertBefore(tags,scripts);
   !function(a,n,i){a[n]=a[n]||{};for(var c=0;c<i.length;c++)!function(i){a[n][i]=a[n][i]||{},a[n][i].api=a[n][i].api||function(){var a=[].slice.call(arguments,0);"string"==typeof a[0]&&window[dataLayerName].push({event:n+"."+i+":"+a[0],parameters:[].slice.call(arguments,1)})}}(i[c])}(window,"ppms",["tm","cm"]);
   })(window, document, '${dataLayer}', '${containerId}');`