Force an Asset Manager handshake on the draft stack

Each draft image on a page independently triggers its own Signon/Asset Manager OAuth handshake when there's no existing session. With more than one draft image, these handshakes race and clobber each other's CSRF state, so all but (at best) one image fail to load.

In this commit, we load a single placeholder image from the draft-assets host, and once its request has settled - whether it succeeds or fails, we only care that the handshake has finished; we then retry every draft image already on the page with a cache-busting query param, so they get a fresh attempt against what should now be a warm session cookie.

Added an `asset-manager-session.js` module that is inlined directly into the page via a `<script>` tag,
and only on draft-stack pages, rather than shipped as part of the
site's main JavaScript bundle. This is so that live pages are completely
unaffected and don't load or run any of this code. It still follows
GOV.UK's standard `data-module` convention, so it's found and started
automatically like any other page module.

Author: eYinka

app/assets/javascripts/asset-manager-session.js

@@ -0,0 +1,49 @@
+/* Warms up the Asset Manager draft-assets session cookie via a single
+ * placeholder image request, then retries any draft images already on
+ * the page once that request has settled (success or failure).
+ *
+ * Usage: add `data-module="AssetManagerSession"` and
+ * `data-placeholder-asset-url="..."` to an element.
+ */
+
+/* istanbul ignore next */
+window.GOVUK = window.GOVUK || {}
+/* istanbul ignore next */
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function AssetManagerSession (element) {
+    this.element = element
+  }
+
+  AssetManagerSession.prototype.init = function () {
+    window.addEventListener('load', this.warmUpSession.bind(this))
+  }
+
+  AssetManagerSession.prototype.warmUpSession = function () {
+    const draftAssets = this.draftAssetImages()
+    // fewer than 2 images means there's no concurrent-request race to fix, so nothing to warm up
+    if (draftAssets.length < 2) return
+
+    const reloadDraftImages = this.reloadDraftImages.bind(this, draftAssets)
+    const placeholder = new Image()
+    placeholder.onload = reloadDraftImages
+    placeholder.onerror = reloadDraftImages
+    placeholder.src = this.element.getAttribute('data-placeholder-asset-url')
+  }
+
+  AssetManagerSession.prototype.draftAssetImages = function () {
+    return [...document.images].filter((image) =>
+      image.src.includes('assets.') // currently, asset urls in draft preview point to their live link: 'assets.xyz' instead of 'draft-assets.xyz'. Created a backlog item for this: https://gov-uk.atlassian.net/browse/WHIT-4008.
+    )
+  }
+
+  AssetManagerSession.prototype.reloadDraftImages = function (draftAssets) {
+    draftAssets.forEach((image) => {
+      // re-setting src tries to fetch the image again, with the hope that a prior success is just served from cache
+      image.setAttribute('src', image.getAttribute('src'))
+    })
+  }
+
+  Modules.AssetManagerSession = AssetManagerSession
+})(window.GOVUK.Modules)

app/views/shared/_footer_navigation.html.erb

@@ -8,3 +8,24 @@
     </div>
   </div>
 <% end %>
+
+<% if draft_host? %>
+  <%
+    host = if GovukEnvironment.current == "staging"
+             "staging.publishing.service.gov.uk"
+           elsif GovukEnvironment.current == "integration"
+             "integration.publishing.service.gov.uk"
+           else
+             "publishing.service.gov.uk"
+           end
+    placeholder_asset_url = "https://draft-assets.#{host}/media/5e59279b86650c53b2cefbfe/placeholder.jpg"
+  %>
+  <div
+    data-module="AssetManagerSession"
+    data-placeholder-asset-url="<%= placeholder_asset_url %>"
+    class="govuk-visually-hidden">
+  </div>
+  <%= javascript_tag nonce: true do %>
+    <%= raw File.read(Rails.root.join("app/assets/javascripts/asset-manager-session.js")) %>
+  <% end %>
+<% end %>

spec/javascripts/modules/asset-manager-session.spec.js

@@ -0,0 +1,104 @@
+describe('An asset manager session module', function () {
+  let element, originalImage
+
+  const addImage = (src) => {
+    const img = document.createElement('img')
+    img.src = src
+    document.body.appendChild(img)
+    return img
+  }
+
+  const trackReloads = (image) => {
+    const reloadedUrls = []
+    const originalSetAttribute = image.setAttribute.bind(image)
+    image.setAttribute = (name, value) => {
+      if (name === 'src') reloadedUrls.push(value)
+      originalSetAttribute(name, value)
+    }
+    return reloadedUrls
+  }
+
+  const stubImage = ({ succeeds }) => {
+    class FakeImage {
+      get src () {
+        return this._src
+      }
+
+      set src (value) {
+        this._src = value
+        succeeds
+          ? this.onload && this.onload()
+          : this.onerror && this.onerror()
+      }
+    }
+    window.Image = FakeImage
+  }
+
+  beforeEach(function () {
+    originalImage = window.Image
+    element = document.createElement('div')
+    element.setAttribute('data-module', 'AssetManagerSession')
+    element.setAttribute(
+      'data-placeholder-asset-url',
+      'https://draft-assets.test.gov.uk/media/placeholder/placeholder.jpg'
+    )
+  })
+
+  afterEach(function () {
+    window.Image = originalImage
+    document.querySelectorAll('img').forEach((img) => img.remove())
+  })
+
+  it('does nothing when fewer than two draft images are on the page', function () {
+    addImage('https://draft-assets.test.gov.uk/media/1/one.jpg')
+    stubImage({ succeeds: true })
+
+    new GOVUK.Modules.AssetManagerSession(element).warmUpSession()
+
+    expect(document.images[0].src).toEqual(
+      'https://draft-assets.test.gov.uk/media/1/one.jpg'
+    )
+  })
+
+  it('retries all draft images once the placeholder request succeeds', function () {
+    const first = addImage('https://draft-assets.test.gov.uk/media/1/one.jpg')
+    const second = addImage(
+      'https://draft-assets.test.gov.uk/media/2/two.jpg?foo=bar'
+    )
+    const firstReloads = trackReloads(first)
+    const secondReloads = trackReloads(second)
+    stubImage({ succeeds: true })
+
+    new GOVUK.Modules.AssetManagerSession(element).warmUpSession()
+
+    expect(firstReloads).toEqual([
+      'https://draft-assets.test.gov.uk/media/1/one.jpg'
+    ])
+    expect(secondReloads).toEqual([
+      'https://draft-assets.test.gov.uk/media/2/two.jpg?foo=bar'
+    ])
+  })
+
+  it('also retries all draft images when the placeholder request errors', function () {
+    const first = addImage('https://draft-assets.test.gov.uk/media/1/one.jpg')
+    addImage('https://draft-assets.test.gov.uk/media/2/two.jpg')
+    const firstReloads = trackReloads(first)
+    stubImage({ succeeds: false })
+
+    new GOVUK.Modules.AssetManagerSession(element).warmUpSession()
+
+    expect(firstReloads).toEqual([
+      'https://draft-assets.test.gov.uk/media/1/one.jpg'
+    ])
+  })
+
+  it('ignores non-asset-manager images when counting/retrying', function () {
+    const other = addImage('https://static.test.gov.uk/media/1/one.jpg')
+    addImage('https://draft-assets.test.gov.uk/media/2/two.jpg')
+    stubImage({ succeeds: true })
+
+    new GOVUK.Modules.AssetManagerSession(element).warmUpSession()
+
+    expect(other.src).toEqual('https://static.test.gov.uk/media/1/one.jpg')
+  })
+})

spec/support/jasmine-browser.json

@@ -3,7 +3,8 @@
   "srcFiles": [
     "public/assets/frontend/test-dependencies-*.js",
     "public/assets/frontend/dependencies-*.js",
-    "tmp/nyc_output/assets/**/*.js"
+    "tmp/nyc_output/assets/**/*.js",
+    "app/assets/javascripts/asset-manager-session.js"
   ],
   "specDir": "spec/javascripts",
   "specFiles": [