Merge pull request #988 from alphagov/allow-cross-origin-messages-for…

…-cookie-banner

Hide cookie banner if cross-origin message has hideCookieBanner set to true

CHANGELOG.md

@@ -7,9 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
-## Unreleased changes
+## Unreleased
 
-* Change paragraph to div for descriptions to support govspeak (PR #985)
+* Update cookie banner component to hide if cross-origin message has `hideCookieBanner` set to `true` (PR #988)
+* Change paragraph to div for descriptions to support govspeak description in checkboxes and radios (PR #985)
 
 ## 17.13.0
 

app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js

@@ -11,12 +11,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.setCookieConsent = this.setCookieConsent.bind(this)
 
     this.$module.cookieBanner = document.querySelector('.gem-c-cookie-banner')
-    this.$module.cookieBannerConfirmationMessage = document.querySelector('.gem-c-cookie-banner__confirmation')
+    this.$module.cookieBannerConfirmationMessage = this.$module.querySelector('.gem-c-cookie-banner__confirmation')
 
-    // Temporary check while we have 2 banners co-existing.
-    // Once the new banner has been deployed, we will be able to remove code relating to the old banner
-    // Separating the code out like this does mean some repetition, but will make it easier to remove later
     this.setupCookieMessage()
+
+    // Listen for cross-origin communication messages (e.g. hideCookieBanner for when previewing GOV.UK pages
+    // in publishing applications
+    this.listenForCrossOriginMessages()
   }
 
   CookieBanner.prototype.setupCookieMessage = function () {
@@ -84,5 +85,41 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.cookieBannerConfirmationMessage.style.display = 'block'
   }
 
+  CookieBanner.prototype.listenForCrossOriginMessages = function () {
+    window.addEventListener('message', this.receiveMessage.bind(this), false)
+  }
+
+  CookieBanner.prototype.receiveMessage = function (event) {
+    var trustedDomain = 'publishing.service.gov.uk'
+    var origin = event.origin
+
+    // Return if no origin is given or the browser doesn't support lastIndexOf
+    if (!origin || !origin.lastIndexOf) {
+      return
+    }
+
+    // Polyfill origin.endsWith(trustedDomain) for IE
+    var offset = origin.length - trustedDomain.length
+    var trustedOrigin = offset >= 0 && origin.lastIndexOf(trustedDomain, offset) === offset
+
+    // Return if the given origin is not trusted
+    if (!trustedOrigin) {
+      return
+    }
+
+    // Read JSON data from event
+    var dataObject = {}
+    try {
+      dataObject = JSON.parse(event.data)
+    } catch (err) {
+      // Don't throw errors as the emmited message may not be in a JSON format
+    } finally {
+      if (dataObject.hideCookieBanner === 'true') {
+        // Visually hide the cookie banner
+        this.$module.style.display = 'none'
+      }
+    }
+  }
+
   Modules.CookieBanner = CookieBanner
 })(window.GOVUK.Modules)

spec/javascripts/components/cookie-banner-spec.js

@@ -113,4 +113,20 @@ describe('Cookie banner', function () {
 
     expect(newCookieBanner).not.toBeVisible()
   })
+
+  it('hides the cookie banner if a cross-origin messages says so', function () {
+    var element = document.querySelector('[data-module="cookie-banner"]')
+    var cookieBannerModule = new GOVUK.Modules.CookieBanner()
+    cookieBannerModule.start($(element))
+
+    var mockMessage = {
+      data: JSON.stringify({ 'hideCookieBanner': 'true' }),
+      origin: 'https://content-publisher.publishing.service.gov.uk'
+    }
+
+    cookieBannerModule.receiveMessage(mockMessage)
+
+    var newCookieBanner = document.querySelector('.gem-c-cookie-banner')
+    expect(newCookieBanner).not.toBeVisible()
+  })
 })