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.

Author: eYinka

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

@@ -0,0 +1,39 @@
+'use strict'
+/* 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.
+ */
+;(function (Modules) {
+  function AssetManagerSession (element) {
+    this.element = element
+  }
+
+  AssetManagerSession.prototype.init = function () {
+    const draftAssets = this.draftAssetImages()
+    if (draftAssets.length < 2) return
+
+    const retry = this.retryDraftAssets.bind(this, draftAssets)
+    const placeholder = new Image()
+    placeholder.onload = retry
+    placeholder.onerror = retry
+    placeholder.src = this.element.getAttribute('data-placeholder-asset-url')
+  }
+
+  AssetManagerSession.prototype.draftAssetImages = function () {
+    return [...document.images].filter((image) =>
+      image.src.includes('draft-assets.')
+    )
+  }
+
+  AssetManagerSession.prototype.retryDraftAssets = function (draftAssets) {
+    draftAssets.forEach((image) => {
+      const separator = image.src.includes('?') ? '&' : '?'
+      image.src = `${image.src}${separator}_asset_manager_retry=${Date.now()}`
+    })
+  }
+
+  Modules.AssetManagerSession = AssetManagerSession
+})(window.GOVUK.Modules)

app/views/shared/_footer_navigation.html.erb

@@ -8,3 +8,11 @@
     </div>
   </div>
 <% end %>
+
+<% if draft_host? %>
+  <div
+    data-module="AssetManagerSession"
+    data-placeholder-asset-url="<%= placeholder_asset_url %>"
+    hidden>
+  </div>
+<% end %>

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

@@ -0,0 +1,85 @@
+describe('A 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 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).init()
+
+    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'
+    )
+    stubImage({ succeeds: true })
+
+    new GOVUK.Modules.AssetManagerSession(element).init()
+
+    expect(first.src).toContain('one.jpg?_asset_manager_retry=')
+    expect(second.src).toContain('two.jpg?foo=bar&_asset_manager_retry=')
+  })
+
+  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')
+    stubImage({ succeeds: false })
+
+    new GOVUK.Modules.AssetManagerSession(element).init()
+
+    expect(first.src).toContain('_asset_manager_retry=')
+  })
+
+  it('ignores non-draft-assets images when counting/retrying', function () {
+    const live = addImage('https://assets.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).init()
+
+    expect(live.src).toEqual('https://assets.test.gov.uk/media/1/one.jpg')
+  })
+})