From 47aec414beb4217c79236efd3a6507d89c032def Mon Sep 17 00:00:00 2001 From: Julian Bez Date: Tue, 19 Nov 2019 12:43:11 +0100 Subject: [PATCH 1/6] Add script nonce --- src/Snippets.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Snippets.js b/src/Snippets.js index b798e3db..5c95f64d 100644 --- a/src/Snippets.js +++ b/src/Snippets.js @@ -3,7 +3,7 @@ import warn from './utils/warn' // https://developers.google.com/tag-manager/quickstart const Snippets = { - tags: function ({ id, events, dataLayer, dataLayerName, preview, auth }) { + tags: function ({ id, events, dataLayer, dataLayerName, preview, auth, nonce="" }) { const gtm_auth = `>m_auth=${auth}` const gtm_preview = `>m_preview=${preview}` @@ -18,6 +18,7 @@ const Snippets = { w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js', ${JSON.stringify(events).slice(1, -1)}}); 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+'${gtm_auth}${gtm_preview}>m_cookies_win=x'; + j.setAttribute('nonce',${nonce}); f.parentNode.insertBefore(j,f); })(window,document,'script','${dataLayerName}','${id}');` From 0a58682646999e2c810873f3f1c52c855d0bfa84 Mon Sep 17 00:00:00 2001 From: Julian Bez Date: Tue, 19 Nov 2019 12:48:01 +0100 Subject: [PATCH 2/6] Add nonce to other script --- src/Snippets.js | 2 +- src/TagManager.js | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Snippets.js b/src/Snippets.js index 5c95f64d..bbf7d44e 100644 --- a/src/Snippets.js +++ b/src/Snippets.js @@ -3,7 +3,7 @@ import warn from './utils/warn' // https://developers.google.com/tag-manager/quickstart const Snippets = { - tags: function ({ id, events, dataLayer, dataLayerName, preview, auth, nonce="" }) { + tags: function ({ id, events, dataLayer, dataLayerName, preview, auth, nonce = '' }) { const gtm_auth = `>m_auth=${auth}` const gtm_preview = `>m_preview=${preview}` diff --git a/src/TagManager.js b/src/TagManager.js index f2abf1a1..a92f90bd 100644 --- a/src/TagManager.js +++ b/src/TagManager.js @@ -18,6 +18,7 @@ const TagManager = { const script = () => { const script = document.createElement('script') script.innerHTML = snippets.script + script.setAttribute('nonce', args.nonce); return script } @@ -29,14 +30,15 @@ const TagManager = { dataScript } }, - initialize: function ({ gtmId, events = {}, dataLayer, dataLayerName = 'dataLayer', auth = '', preview = '' }) { + initialize: function ({ gtmId, events = {}, dataLayer, dataLayerName = 'dataLayer', auth = '', preview = '', nonce = '' }) { const gtm = this.gtm({ id: gtmId, events: events, dataLayer: dataLayer || undefined, dataLayerName: dataLayerName, auth, - preview + preview, + nonce }) if (dataLayer) document.head.appendChild(gtm.dataScript) document.head.insertBefore(gtm.script(), document.head.childNodes[0]) From 1e3fba362ed39b22ba6539eb931a0686efd56f34 Mon Sep 17 00:00:00 2001 From: Julian Bez Date: Tue, 19 Nov 2019 12:54:31 +0100 Subject: [PATCH 3/6] Build --- dist/Snippets.js | 6 ++++-- dist/TagManager.js | 8 ++++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/dist/Snippets.js b/dist/Snippets.js index 199cc415..9c289616 100644 --- a/dist/Snippets.js +++ b/dist/Snippets.js @@ -15,7 +15,9 @@ var Snippets = { dataLayer = _ref.dataLayer, dataLayerName = _ref.dataLayerName, preview = _ref.preview, - auth = _ref.auth; + auth = _ref.auth, + _ref$nonce = _ref.nonce, + nonce = _ref$nonce === undefined ? '' : _ref$nonce; var gtm_auth = '>m_auth=' + auth; var gtm_preview = '>m_preview=' + preview; @@ -24,7 +26,7 @@ var Snippets = { var iframe = '\n '; - var script = '\n (function(w,d,s,l,i){w[l]=w[l]||[];\n w[l].push({\'gtm.start\': new Date().getTime(),event:\'gtm.js\', ' + JSON.stringify(events).slice(1, -1) + '});\n var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!=\'dataLayer\'?\'&l=\'+l:\'\';\n j.async=true;j.src=\'https://www.googletagmanager.com/gtm.js?id=\'+i+dl+\'' + gtm_auth + gtm_preview + '>m_cookies_win=x\';\n f.parentNode.insertBefore(j,f);\n })(window,document,\'script\',\'' + dataLayerName + '\',\'' + id + '\');'; + var script = '\n (function(w,d,s,l,i){w[l]=w[l]||[];\n w[l].push({\'gtm.start\': new Date().getTime(),event:\'gtm.js\', ' + JSON.stringify(events).slice(1, -1) + '});\n var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!=\'dataLayer\'?\'&l=\'+l:\'\';\n j.async=true;j.src=\'https://www.googletagmanager.com/gtm.js?id=\'+i+dl+\'' + gtm_auth + gtm_preview + '>m_cookies_win=x\';\n j.setAttribute(\'nonce\',' + nonce + ');\n f.parentNode.insertBefore(j,f);\n })(window,document,\'script\',\'' + dataLayerName + '\',\'' + id + '\');'; var dataLayerVar = this.dataLayer(dataLayer, dataLayerName); diff --git a/dist/TagManager.js b/dist/TagManager.js index 115c753c..e08d466a 100644 --- a/dist/TagManager.js +++ b/dist/TagManager.js @@ -24,6 +24,7 @@ var TagManager = { var script = function script() { var script = document.createElement('script'); script.innerHTML = snippets.script; + script.setAttribute('nonce', args.nonce); return script; }; @@ -45,7 +46,9 @@ var TagManager = { _ref$auth = _ref.auth, auth = _ref$auth === undefined ? '' : _ref$auth, _ref$preview = _ref.preview, - preview = _ref$preview === undefined ? '' : _ref$preview; + preview = _ref$preview === undefined ? '' : _ref$preview, + _ref$nonce = _ref.nonce, + nonce = _ref$nonce === undefined ? '' : _ref$nonce; var gtm = this.gtm({ id: gtmId, @@ -53,7 +56,8 @@ var TagManager = { dataLayer: dataLayer || undefined, dataLayerName: dataLayerName, auth: auth, - preview: preview + preview: preview, + nonce: nonce }); if (dataLayer) document.head.appendChild(gtm.dataScript); document.head.insertBefore(gtm.script(), document.head.childNodes[0]); From dab764f0e0ac0d0249ec00c34c6f34ec3f93fd5a Mon Sep 17 00:00:00 2001 From: Julian Bez Date: Tue, 19 Nov 2019 13:57:25 +0100 Subject: [PATCH 4/6] Fix quotes --- src/Snippets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Snippets.js b/src/Snippets.js index bbf7d44e..b77282ef 100644 --- a/src/Snippets.js +++ b/src/Snippets.js @@ -18,7 +18,7 @@ const Snippets = { w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js', ${JSON.stringify(events).slice(1, -1)}}); 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+'${gtm_auth}${gtm_preview}>m_cookies_win=x'; - j.setAttribute('nonce',${nonce}); + j.setAttribute('nonce','${nonce}'); f.parentNode.insertBefore(j,f); })(window,document,'script','${dataLayerName}','${id}');` From c72aa67399d5b4013736a568ed4644a1eb91121f Mon Sep 17 00:00:00 2001 From: Julian Bez Date: Tue, 19 Nov 2019 14:01:32 +0100 Subject: [PATCH 5/6] Build --- dist/Snippets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dist/Snippets.js b/dist/Snippets.js index 9c289616..7163776c 100644 --- a/dist/Snippets.js +++ b/dist/Snippets.js @@ -26,7 +26,7 @@ var Snippets = { var iframe = '\n '; - var script = '\n (function(w,d,s,l,i){w[l]=w[l]||[];\n w[l].push({\'gtm.start\': new Date().getTime(),event:\'gtm.js\', ' + JSON.stringify(events).slice(1, -1) + '});\n var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!=\'dataLayer\'?\'&l=\'+l:\'\';\n j.async=true;j.src=\'https://www.googletagmanager.com/gtm.js?id=\'+i+dl+\'' + gtm_auth + gtm_preview + '>m_cookies_win=x\';\n j.setAttribute(\'nonce\',' + nonce + ');\n f.parentNode.insertBefore(j,f);\n })(window,document,\'script\',\'' + dataLayerName + '\',\'' + id + '\');'; + var script = '\n (function(w,d,s,l,i){w[l]=w[l]||[];\n w[l].push({\'gtm.start\': new Date().getTime(),event:\'gtm.js\', ' + JSON.stringify(events).slice(1, -1) + '});\n var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!=\'dataLayer\'?\'&l=\'+l:\'\';\n j.async=true;j.src=\'https://www.googletagmanager.com/gtm.js?id=\'+i+dl+\'' + gtm_auth + gtm_preview + '>m_cookies_win=x\';\n j.setAttribute(\'nonce\',\'' + nonce + '\');\n f.parentNode.insertBefore(j,f);\n })(window,document,\'script\',\'' + dataLayerName + '\',\'' + id + '\');'; var dataLayerVar = this.dataLayer(dataLayer, dataLayerName); From 1c0aed39e874a92df43254a35db190f1efff2c79 Mon Sep 17 00:00:00 2001 From: Julian Bez Date: Thu, 21 Nov 2019 14:25:55 +0100 Subject: [PATCH 6/6] Init as undefined, add conditionally --- dist/Snippets.js | 5 +++-- dist/TagManager.js | 6 ++++-- src/Snippets.js | 6 +++--- src/TagManager.js | 8 +++++--- 4 files changed, 15 insertions(+), 10 deletions(-) diff --git a/dist/Snippets.js b/dist/Snippets.js index 7163776c..dc888bea 100644 --- a/dist/Snippets.js +++ b/dist/Snippets.js @@ -17,7 +17,7 @@ var Snippets = { preview = _ref.preview, auth = _ref.auth, _ref$nonce = _ref.nonce, - nonce = _ref$nonce === undefined ? '' : _ref$nonce; + nonce = _ref$nonce === undefined ? undefined : _ref$nonce; var gtm_auth = '>m_auth=' + auth; var gtm_preview = '>m_preview=' + preview; @@ -26,7 +26,8 @@ var Snippets = { var iframe = '\n '; - var script = '\n (function(w,d,s,l,i){w[l]=w[l]||[];\n w[l].push({\'gtm.start\': new Date().getTime(),event:\'gtm.js\', ' + JSON.stringify(events).slice(1, -1) + '});\n var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!=\'dataLayer\'?\'&l=\'+l:\'\';\n j.async=true;j.src=\'https://www.googletagmanager.com/gtm.js?id=\'+i+dl+\'' + gtm_auth + gtm_preview + '>m_cookies_win=x\';\n j.setAttribute(\'nonce\',\'' + nonce + '\');\n f.parentNode.insertBefore(j,f);\n })(window,document,\'script\',\'' + dataLayerName + '\',\'' + id + '\');'; + var nonceLine = !!nonce ? 'j.setAttribute(\'nonce\',\'' + nonce + '\');' : ''; + var script = '\n (function(w,d,s,l,i){w[l]=w[l]||[];\n w[l].push({\'gtm.start\': new Date().getTime(),event:\'gtm.js\', ' + JSON.stringify(events).slice(1, -1) + '});\n var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!=\'dataLayer\'?\'&l=\'+l:\'\';\n j.async=true;j.src=\'https://www.googletagmanager.com/gtm.js?id=\'+i+dl+\'' + gtm_auth + gtm_preview + '>m_cookies_win=x\';\n ' + nonceLine + 'f.parentNode.insertBefore(j,f);\n })(window,document,\'script\',\'' + dataLayerName + '\',\'' + id + '\');'; var dataLayerVar = this.dataLayer(dataLayer, dataLayerName); diff --git a/dist/TagManager.js b/dist/TagManager.js index e08d466a..e4b3c403 100644 --- a/dist/TagManager.js +++ b/dist/TagManager.js @@ -24,7 +24,9 @@ var TagManager = { var script = function script() { var script = document.createElement('script'); script.innerHTML = snippets.script; - script.setAttribute('nonce', args.nonce); + if (args.nonce) { + script.setAttribute('nonce', args.nonce); + } return script; }; @@ -48,7 +50,7 @@ var TagManager = { _ref$preview = _ref.preview, preview = _ref$preview === undefined ? '' : _ref$preview, _ref$nonce = _ref.nonce, - nonce = _ref$nonce === undefined ? '' : _ref$nonce; + nonce = _ref$nonce === undefined ? undefined : _ref$nonce; var gtm = this.gtm({ id: gtmId, diff --git a/src/Snippets.js b/src/Snippets.js index b77282ef..15dc5a94 100644 --- a/src/Snippets.js +++ b/src/Snippets.js @@ -3,7 +3,7 @@ import warn from './utils/warn' // https://developers.google.com/tag-manager/quickstart const Snippets = { - tags: function ({ id, events, dataLayer, dataLayerName, preview, auth, nonce = '' }) { + tags: function ({ id, events, dataLayer, dataLayerName, preview, auth, nonce = undefined }) { const gtm_auth = `>m_auth=${auth}` const gtm_preview = `>m_preview=${preview}` @@ -13,13 +13,13 @@ const Snippets = { ` + const nonceLine = !!nonce ? `j.setAttribute('nonce','${nonce}');` : ''; const script = ` (function(w,d,s,l,i){w[l]=w[l]||[]; w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js', ${JSON.stringify(events).slice(1, -1)}}); 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+'${gtm_auth}${gtm_preview}>m_cookies_win=x'; - j.setAttribute('nonce','${nonce}'); - f.parentNode.insertBefore(j,f); + ${nonceLine}f.parentNode.insertBefore(j,f); })(window,document,'script','${dataLayerName}','${id}');` const dataLayerVar = this.dataLayer(dataLayer, dataLayerName) diff --git a/src/TagManager.js b/src/TagManager.js index a92f90bd..fdef8476 100644 --- a/src/TagManager.js +++ b/src/TagManager.js @@ -18,7 +18,9 @@ const TagManager = { const script = () => { const script = document.createElement('script') script.innerHTML = snippets.script - script.setAttribute('nonce', args.nonce); + if (args.nonce) { + script.setAttribute('nonce', args.nonce); + } return script } @@ -30,7 +32,7 @@ const TagManager = { dataScript } }, - initialize: function ({ gtmId, events = {}, dataLayer, dataLayerName = 'dataLayer', auth = '', preview = '', nonce = '' }) { + initialize: function ({ gtmId, events = {}, dataLayer, dataLayerName = 'dataLayer', auth = '', preview = '', nonce = undefined }) { const gtm = this.gtm({ id: gtmId, events: events, @@ -44,7 +46,7 @@ const TagManager = { document.head.insertBefore(gtm.script(), document.head.childNodes[0]) document.body.insertBefore(gtm.noScript(), document.body.childNodes[0]) }, - dataLayer: function ({dataLayer, dataLayerName = 'dataLayer'}) { + dataLayer: function ({ dataLayer, dataLayerName = 'dataLayer' }) { if (window[dataLayerName]) return window[dataLayerName].push(dataLayer) const snippets = Snippets.dataLayer(dataLayer, dataLayerName) const dataScript = this.dataScript(snippets)