@dpgradio/creative 7.1.0 → 7.2.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.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpgradio/creative",
-  "version": "7.1.0",
+  "version": "7.2.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/config/config.js

@@ -18,10 +18,10 @@ class Configuration {
   /**
    * Retrieve the configuration for the current hostname or present query parameter and the given app (optional).
    */
-  async retrieveConfigForDetectedStation(appId = null) {
+  async retrieveConfigForDetectedStation(appId = null, { parameterName = 'stationId' } = {}) {
     const parameters = new URLSearchParams(window.location.search)
-    if (parameters.has('stationId')) {
-      return this.retrieveConfigForStation(parameters.get('stationId'), appId)
+    if (parameters.has(parameterName)) {
+      return this.retrieveConfigForStation(parameters.get(parameterName), appId)
     }
     return this.retrieveConfigByHostname(appId)
   }

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()
   }
@@ -49,10 +52,39 @@ class Privacy {
       this.consentSubscribers.forEach((subscriber) => subscriber(null))
     }, timeoutTime)
 
-    this.pushFunctional(() => {
-      clearTimeout(timeout)
-      this.consent = new Consent(window._privacy.consentString, window._privacy.purposesProvider.enabledPurposes)
-      this.consentSubscribers.forEach((subscriber) => subscriber(this.consent))
+    this.pushConsentGiven((consentData) => {
+      let updatedConsentData = {
+        consentString: consentData.tcString,
+        purposes: new Set(consentData.dpgConsentString.split('|')),
+      }
+      const iabPurposePromises = []
+
+      // We have 10 IAB purposes, so we create 10 promises that resolve with the purpose number or null if the purpose is not given.
+      for (let i = 1; i < 11; i++) {
+        iabPurposePromises.push(
+          new Promise((resolve) => {
+            this.push(
+              i,
+              () => resolve(i), // Resolve with the purpose number
+              () => resolve(null) // Resolve without a value, indicating that the purpose is not given
+            )
+          })
+        )
+      }
+
+      Promise.all(iabPurposePromises).then((purposeConsents) => {
+        updatedConsentData = purposeConsents.reduce((acc, purpose) => {
+          if (purpose) {
+            acc.purposes.add(purpose)
+          }
+          return acc
+        }, updatedConsentData)
+
+        this.consent = new Consent(updatedConsentData)
+        this.consentSubscribers.forEach((subscriber) => subscriber(this.consent))
+
+        clearTimeout(timeout)
+      })
     })
   }
 
@@ -75,8 +107,12 @@ class Privacy {
     })
   }
 
-  push(type, callback) {
-    window._privacy.push([type, callback])
+  push(type, successCallback, failCallback = () => {}) {
+    window._privacy.push([type, successCallback, failCallback])
+  }
+
+  pushConsentGiven(callback) {
+    this.push('consentgiven', callback)
   }
 
   pushFunctional(callback) {
@@ -84,16 +120,14 @@ class Privacy {
   }
 }
 
-const targetedAdvertisingPurposes = [3, 4]
-
 class Consent {
-  constructor(consentString, purposes) {
-    this.consentString = consentString
-    this.purposes = purposes
+  constructor(consentData) {
+    this.consentString = consentData.consentString
+    this.purposes = consentData.purposes
   }
 
   allowsTargetedAdvertising() {
-    return targetedAdvertisingPurposes.every((purpose) => this.purposes.has(purpose.toString()))
+    return this.purposes.has('targeted_advertising')
   }
 }
 

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