@dpgradio/creative 7.0.7 → 7.1.1

package/README.md

@@ -61,11 +61,11 @@ await configuration.retrieveConfigForDetectedStation(appId) // Default, by hostn
 // Or, if you want to retrieve the config by hostnames only.
 await configuration.retrieveConfigByHostname(appId)
 // Or, if you want to retrieve the config for a specific station:
-await configuration.retrieveConfigByStation(stationId, appId)
+await configuration.retrieveConfigForStation(stationId, appId)
 
 // By default the first station ID (stationIdA) is used as the current station of the configuration.
 // If you want to use a different station, you can do so by calling setStation:
-await configuration.retrieveConfigByStations([stationIdA, stationIdB, stationIdC], appId)
+await configuration.retrieveConfigForStations([stationIdA, stationIdB, stationIdC], appId)
 configuration.setStation(stationIdC)
 ```
 You can change the station later on at any time without having to retrieve the config again.
@@ -366,6 +366,25 @@ const image = new ImageGeneratorProperties('https://static.qmusic.be/acties/joe-
 (await shareable.generateUsingImage(image)).openWhatsappUrl()
 ```
 
+## CSP
+
+Sometimes it's necessary to set strict Content Security Policy (CSP) headers. When that's the case a nicety of some of the methods in this package is that they support a random nonce to be passed in so extra sources (GTM, Privacy gate) don't need to be explicitly whitelisted (since they might be unknown at the time of development). Our datalayer and privacy gate initializers have an optional `nonce` parameter that can be passed in.
+
+```js
+import { privacy, dataLayer } from '@dpgradio/creative'
+
+privacy.initialize(privacyManagerId, websiteUrl, cmpCname, { nonce: "abc1234" })
+dataLayer.initialize({ nonce: "abc1234" })
+```
+
+Which then allows you to whitelist that nonce in your CSP header
+
+```
+Content-Security-Policy: script-src 'nonce-abc1234'
+```
+
+**!! Take note that this nonce need to be random on every request, as else this security is useless !!**
+
 ## Utilities
 
 This package provides a number of utility functions.

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpgradio/creative",
-  "version": "7.6.0-beta.2",
+  "version": "7.1.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpgradio/creative",
-  "version": "7.0.7",
+  "version": "7.1.1",
   "description": "Support package for standalone Javascript applications",
   "main": "src/index.js",
   "scripts": {

package/src/analytics/dataLayer.js

@@ -10,8 +10,28 @@ class DataLayer {
     this.userInformation = {}
   }
 
-  initialize(gtmId = 'GTM-TW99VZN') {
-    loadScript(`https://www.googletagmanager.com/gtm.js?id=${gtmId}`)
+  /**
+   * @param {Object} parameters   The parameters object.
+   * @param {string} [parameters.gtmId]   The GTM ID - Defaults to our default GTM tag
+   * @param {string} [parameters.nonce]   The nonce value for the script tag (Used for CSP).
+   */
+  initialize(parameters) {
+    // Backwards compatability
+    if (typeof parameters === 'string') {
+      parameters = { gtmId: parameters }
+
+      // Deprecation warning in development
+      if (process.env.NODE_ENV === 'development') {
+        console.warn(
+          '@dpgmedia/creative',
+          'DEPRECATION WARNING: new Datalayer(gtmId) is deprecated, please use new Datalayer({ gtmId }) instead.'
+        )
+      }
+    }
+
+    const { gtmId = 'GTM-TW99VZN', nonce } = parameters || {}
+
+    loadScript(`https://www.googletagmanager.com/gtm.js?id=${gtmId}`, { nonce })
 
     this.pushGtmStart()
     this.pushUserWhenAuthenticated()

package/src/privacy/privacy.js

@@ -15,11 +15,14 @@ class Privacy {
    * @param {string}  privacyManagerId   e.g. '148844'
    * @param {string}  websiteUrl         e.g. 'https://qmusic.nl'
    * @param {string}  cmpCname           e.g. 'https://cmp.qmusic.nl'
+   * @param {Object}  options            Additional options.
+   * @param {string}  [options.nonce]    The nonce value for the script tag (Used for CSP).
    */
   initialize(
     privacyManagerId = config('privacy_manager_id'),
     websiteUrl = config('website_url'),
-    cmpCname = config('cmp_cname')
+    cmpCname = config('cmp_cname'),
+    { nonce = undefined } = {}
   ) {
     window.cmpProperties = {
       privacyManagerId,
@@ -28,7 +31,7 @@ class Privacy {
       language: 'nl',
     }
 
-    loadScript('https://myprivacy-static.dpgmedia.net/consent.js')
+    loadScript('https://myprivacy-static.dpgmedia.net/consent.js', { nonce })
 
     this.requestConsentInformation()
   }

package/src/utils/loadScript.js

@@ -1,12 +1,15 @@
 // From: https://github.com/medialaan/radio-radioplayer-frontend/blob/develop/src/general/utils/loadScript.js
 // TODO: Refactor
 
-export default function loadScript(url, { timeout = undefined } = {}) {
+export default function loadScript(url, { timeout = undefined, nonce = undefined } = {}) {
   return new Promise((resolve, reject) => {
     let script = document.createElement('script')
     const firstScript = document.getElementsByTagName('script')[0]
     script.async = true
     script.defer = true
+    if (nonce) {
+      script.nonce = nonce
+    }
 
     const loadScriptTimeout = timeout ? setTimeout(() => reject(`Loading script [${url}] blocked.`), timeout) : null