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,50 @@
+/* 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))
+    console.log('eventListener added')
+  }
+
+  AssetManagerSession.prototype.warmUpSession = 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')
+    console.log('warmup called with', placeholder.src)
+  }
+
+  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'
+    )
+  }
+
+  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,21 @@
     </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 %>"
+    hidden>
+  </div>
+<% end %>

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

@@ -0,0 +1,85 @@
+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 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'
+    )
+    stubImage({ succeeds: true })
+
+    new GOVUK.Modules.AssetManagerSession(element).warmUpSession()
+
+    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).warmUpSession()
+
+    expect(first.src).toContain('_asset_manager_retry=')
+  })
+
+  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')
+  })
+})