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.

Sign up for GitHub

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

Jump to bottom

feat: #235 add csp nonce for google tag and analytics packages #448

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

feat: #235 add csp nonce for google tag and analytics packages #448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
},
"dependencies": {
"acorn": "^8.7.0",
"brotli-size": "0.0.3",
"brotli-size": "4.0.0",
Copy link
Author

Choose a reason for hiding this comment

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

remove iltorb package to prevent native module build during pnpm install

"gzip-size": "^5.0.0",
"prettier": "^1.18.2",
"pretty-bytes": "^5.1.0"
Expand Down
23 changes: 12 additions & 11 deletions packages/analytics-plugin-google-analytics-v3/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,18 +127,19 @@ const analytics = Analytics({

### Configuration options for browser

| Option | description |
|:---------------------------|:-----------|
| `trackingId` <br/>**required** - string| Google Analytics site tracking Id |
| `debug` <br/>_optional_ - boolean| Enable Google Analytics debug mode |
| `anonymizeIp` <br/>_optional_ - boolean| Enable [Anonymizing IP addresses](https://bit.ly/3c660Rd) sent to Google Analytics. [See details below](#anonymize-visitor-ips) |
| `customDimensions` <br/>_optional_ - object| Map [Custom dimensions](https://bit.ly/3c5de88) to send extra information to Google Analytics. [See details below](#using-ga-custom-dimensions) |
| Option | description |
|:------------------------------------------------------|:-----------|
| `trackingId` <br/>**required** - string | Google Analytics site tracking Id |
| `debug` <br/>_optional_ - boolean | Enable Google Analytics debug mode |
| `anonymizeIp` <br/>_optional_ - boolean | Enable [Anonymizing IP addresses](https://bit.ly/3c660Rd) sent to Google Analytics. [See details below](#anonymize-visitor-ips) |
| `customDimensions` <br/>_optional_ - object | Map [Custom dimensions](https://bit.ly/3c5de88) to send extra information to Google Analytics. [See details below](#using-ga-custom-dimensions) |
| `resetCustomDimensionsOnPage` <br/>_optional_ - object| Reset custom dimensions by key on analytics.page() calls. Useful for single page apps. |
| `setCustomDimensionsToPage` <br/>_optional_ - boolean| Mapped dimensions will be set to the page & sent as properties of all subsequent events on that page. If false, analytics will only pass custom dimensions as part of individual events |
| `instanceName` <br/>_optional_ - string| Custom tracker name for google analytics. Use this if you need multiple googleAnalytics scripts loaded |
| `customScriptSrc` <br/>_optional_ - string| Custom URL for google analytics script, if proxying calls |
| `cookieConfig` <br/>_optional_ - object| Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings) |
| `tasks` <br/>_optional_ - object| [Set custom google analytic tasks](https://developers.google.com/analytics/devguides/collection/analyticsjs/tasks) |
| `setCustomDimensionsToPage` <br/>_optional_ - boolean | Mapped dimensions will be set to the page & sent as properties of all subsequent events on that page. If false, analytics will only pass custom dimensions as part of individual events |
| `instanceName` <br/>_optional_ - string | Custom tracker name for google analytics. Use this if you need multiple googleAnalytics scripts loaded |
| `customScriptSrc` <br/>_optional_ - string | Custom URL for google analytics script, if proxying calls |
| `cookieConfig` <br/>_optional_ - object | Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings) |
| `tasks` <br/>_optional_ - object | [Set custom google analytic tasks](https://developers.google.com/analytics/devguides/collection/analyticsjs/tasks) |
| `nonce` <br/>_optional_ - string | Content-Security-Policy nonce value |

## Server-side usage

Expand Down
5 changes: 3 additions & 2 deletions packages/analytics-plugin-google-analytics-v3/src/browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ let loadedInstances = {}
* @param {string} [pluginConfig.customScriptSrc] - Custom URL for google analytics script, if proxying calls
* @param {object} [pluginConfig.cookieConfig] - Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings)
* @param {object} [pluginConfig.tasks] - [Set custom google analytic tasks](https://developers.google.com/analytics/devguides/collection/analyticsjs/tasks)
* @param {string} [pluginConfig.nonce] - Content-Security-Policy nonce value
* @return {*}
* @example
*
Expand All @@ -58,7 +59,7 @@ function googleAnalyticsV3(pluginConfig = {}) {
initialize: (pluginApi) => {
const { config, instance } = pluginApi
if (!config.trackingId) throw new Error('No GA trackingId defined')
const { customDimensions, customScriptSrc } = config
const { customDimensions, customScriptSrc, nonce } = config
// var to hoist
const scriptSrc = customScriptSrc || 'https://www.google-analytics.com/analytics.js'
// Load google analytics script to page
Expand All @@ -68,7 +69,7 @@ function googleAnalyticsV3(pluginConfig = {}) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; nonce && a.setAttribute('nonce', nonce); m.parentNode.insertBefore(a, m)
})(window, document, 'script', scriptSrc, 'ga')
/* eslint-enable */
}
Expand Down
25 changes: 13 additions & 12 deletions packages/analytics-plugin-google-analytics/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,19 +108,20 @@ const analytics = Analytics({

### Configuration options for browser

| Option | description |
|:---------------------------|:-----------|
| `measurementIds` <br/>**required** - Array.<string>| Google Analytics MEASUREMENT IDs |
| `debug` <br/>_optional_ - boolean| Enable Google Analytics debug mode |
| `dataLayerName` <br/>_optional_ - string| The optional name for dataLayer object. Defaults to ga4DataLayer. |
| `gtagName` <br/>_optional_ - string| The optional name for dataLayer object. Defaults to `gtag`. |
| `gtagConfig.anonymize_ip` <br/>_optional_ - boolean| Enable [Anonymizing IP addresses](https://bit.ly/3c660Rd) sent to Google Analytics. |
| `gtagConfig.cookie_domain` <br/>_optional_ - object| Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings) |
| Option | description |
|:----------------------------------------------------|:-----------|
| `measurementIds` <br/>**required** - Array.<string> | Google Analytics MEASUREMENT IDs |
| `debug` <br/>_optional_ - boolean | Enable Google Analytics debug mode |
| `dataLayerName` <br/>_optional_ - string | The optional name for dataLayer object. Defaults to ga4DataLayer. |
| `gtagName` <br/>_optional_ - string | The optional name for dataLayer object. Defaults to `gtag`. |
| `gtagConfig.anonymize_ip` <br/>_optional_ - boolean | Enable [Anonymizing IP addresses](https://bit.ly/3c660Rd) sent to Google Analytics. |
| `gtagConfig.cookie_domain` <br/>_optional_ - object | Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings) |
| `gtagConfig.cookie_expires` <br/>_optional_ - object| Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings) |
| `gtagConfig.cookie_prefix` <br/>_optional_ - object| Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings) |
| `gtagConfig.cookie_update` <br/>_optional_ - object| Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings) |
| `gtagConfig.cookie_flags` <br/>_optional_ - object| Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings) |
| `customScriptSrc` <br/>_optional_ - string| Custom URL for google analytics script, if proxying calls |
| `gtagConfig.cookie_prefix` <br/>_optional_ - object | Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings) |
| `gtagConfig.cookie_update` <br/>_optional_ - object | Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings) |
| `gtagConfig.cookie_flags` <br/>_optional_ - object | Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings) |
| `customScriptSrc` <br/>_optional_ - string | Custom URL for google analytics script, if proxying calls |
| `nonce` <br/>_optional_ - string | Content-Security-Policy nonce value |


## Additional examples
Expand Down
6 changes: 5 additions & 1 deletion packages/analytics-plugin-google-analytics/src/browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ const defaultConfig = {
* @param {object} [pluginConfig.gtagConfig.cookie_update] - Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings)
* @param {object} [pluginConfig.gtagConfig.cookie_flags] - Additional cookie properties for configuring the [ga cookie](https://developers.google.com/analytics/devguides/collection/analyticsjs/cookies-user-id#configuring_cookie_field_settings)
* @param {string} [pluginConfig.customScriptSrc] - Custom URL for google analytics script, if proxying calls
* @param {string} [pluginConfig.nonce] - Content-Security-Policy nonce value
* @return {*}
* @example
*
Expand All @@ -82,7 +83,7 @@ function googleAnalytics(pluginConfig = {}) {
config: initConfig,
// Load gtag.js and define gtag
initialize: ({ config, instance }) => {
const { dataLayerName, customScriptSrc, gtagName, gtagConfig, debug } = config
const { dataLayerName, customScriptSrc, gtagName, gtagConfig, debug, nonce } = config
/* Inject google gtag.js script if not found */
/* If other gtags are loaded already, add ours anyway */
const customLayerName = dataLayerName ? `&l=${dataLayerName}` : "";
Expand All @@ -91,6 +92,9 @@ function googleAnalytics(pluginConfig = {}) {
const script = document.createElement('script')
script.async = true
script.src = src
if (nonce) {
script.setAttribute('nonce', nonce);
}
document.body.appendChild(script)
}
/* Set up gtag and datalayer */
Expand Down
Empty file removed packages/analytics-plugin-google-analytics/x.js
View file
Open in desktop
Empty file.
17 changes: 9 additions & 8 deletions packages/analytics-plugin-google-tag-manager/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,14 +104,15 @@ const analytics = Analytics({

### Configuration options for browser

| Option | description |
|:---------------------------|:-----------|
| `containerId` <br/>**required** - string| The Container ID uniquely identifies the GTM Container. |
| `dataLayerName` <br/>_optional_ - string| The optional name for dataLayer-object. Defaults to dataLayer. |
| `customScriptSrc` <br/>_optional_ - string| Load Google Tag Manager script from a custom source |
| `preview` <br/>_optional_ - string| The preview-mode environment |
| `auth` <br/>_optional_ - string| The preview-mode authentication credentials |
| `execution` <br/>_optional_ - string| The script execution mode |
| Option | description |
|:-------------------------------------------|:---------------------------------------------------------------|
| `containerId` <br/>**required** - string | The Container ID uniquely identifies the GTM Container. |
| `dataLayerName` <br/>_optional_ - string | The optional name for dataLayer-object. Defaults to dataLayer. |
| `customScriptSrc` <br/>_optional_ - string | Load Google Tag Manager script from a custom source |
| `preview` <br/>_optional_ - string | The preview-mode environment |
| `auth` <br/>_optional_ - string | The preview-mode authentication credentials |
| `execution` <br/>_optional_ - string | The script execution mode |
| `nonce` <br/>_optional_ - string | Content-Security-Policy nonce value |


## Additional examples
Expand Down
6 changes: 5 additions & 1 deletion packages/analytics-plugin-google-tag-manager/src/browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ let initializedDataLayerName;
* @param {string} [pluginConfig.preview] - The preview-mode environment
* @param {string} [pluginConfig.auth] - The preview-mode authentication credentials
* @param {string} [pluginConfig.execution] - The script execution mode
* @param {string} [pluginConfig.nonce] - Content-Security-Policy nonce value
* @return {object} Analytics plugin
* @example
*
Expand All @@ -41,7 +42,7 @@ function googleTagManager(pluginConfig = {}) {
...pluginConfig
},
initialize: ({ config }) => {
const { containerId, dataLayerName, customScriptSrc, preview, auth, execution } = config
const { containerId, dataLayerName, customScriptSrc, preview, auth, execution, nonce } = config
if (!containerId) {
throw new Error('No google tag manager containerId defined')
}
Expand All @@ -64,6 +65,9 @@ function googleTagManager(pluginConfig = {}) {
j[execution] = true;
}
j.src = `${scriptSrc}?id=` + i + dl + p;
if (nonce) {
j.setAttribute('nonce', nonce);
}
f.parentNode.insertBefore(j, f);
})(window, document, 'script', dataLayerName, containerId);
/* eslint-enable */
Expand Down
Loading