From dba11c38634bbf91d2a80be62a29dc83782ccae1 Mon Sep 17 00:00:00 2001
From: Brian Warsing <brian.warsing@shopify.com>
Date: Tue, 18 Aug 2026 14:14:21 -0700
Subject: [PATCH] Apply Clusterize spacer heights via CSSOM so CSP cannot drop
 them

Fixes the task-log flickering reported in
Shopify/continuous-deployment#2208 (#gsd:48220): output streams fine, then
flickers, then stops updating.

`renderExtraTag` sets `tag.style.height` on a DETACHED node and returns
`tag.outerHTML`. `insertToDOM` joins those strings and `html()` assigns them
with `innerHTML`, so the height reaches the document as a style ATTRIBUTE
parsed from markup.

Under a `style-src` policy without 'unsafe-inline' the browser refuses to
apply such an attribute. Shipit serves exactly that:

    $ curl -sI https://shipit.shopify.io/
    content-security-policy: ... style-src 'self' https:

The spacers therefore render at height 0. Total scroll height collapses to
just the rendered cluster no matter how many rows exist, scrollTop is clamped
into that range, getClusterNum() derives a different cluster from the clamped
value, insertToDOM swaps in different rows, and the height changes again.

Measured on Shipit's task page with the real assets under the verbatim
production CSP, 10 seconds at 1 line/sec:

                            without CSP   with CSP   with CSP + fix
    html() swaps                     10        601               14
    re-entrant swaps                  0        145                0
    repaints/sec                     ~8         83               ~8
    scrollHeight at 800 rows      19316       4844            19316

The first visible line number goes from `236 237 238 239 ...` to
`173 173 239 173 242 173 ...` - the viewport alternating between two regions
of the log about eighty times a second.

Below `rows_in_block` no spacers are emitted, which is why the page starts out
fine and only degrades once the log grows. Note that the
`only_bottom_offset_changed` fast path already uses `lastChild.style.height`
on a LIVE node, which CSP permits; that asymmetry is why the failure presents
as oscillation rather than a static break.

CSSOM writes are not blocked by CSP, only markup-parsed style attributes and
inline <style> elements. Verified under the policy above:

    detached node -> outerHTML -> innerHTML    0px
    el.style.height on an inserted node      500px
    <style> element injected at runtime         0px

So carry the height through the markup round trip in a data attribute and
apply it via CSSOM once the nodes are live.

This keeps the fix inside the vendored library rather than weakening
`style-src` for the whole application. Clusterize 0.16.0 has been unmaintained
since 2018 and upstream still contains the same code, so there is no newer
release to move to.

Co-authored-by: AI (Pi/anthropic/claude-opus-5) <noreply@pi.dev>
Assisted-By: devx/346d79f1-a786-419e-ae33-9ffc08a2bc88
---
 vendor/assets/javascripts/clusterize.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/vendor/assets/javascripts/clusterize.js b/vendor/assets/javascripts/clusterize.js
index 5423e9fc2..78a829dcb 100644
--- a/vendor/assets/javascripts/clusterize.js
+++ b/vendor/assets/javascripts/clusterize.js
@@ -251,7 +251,12 @@
       var tag = document.createElement(this.options.tag),
         clusterize_prefix = 'clusterize-';
       tag.className = [clusterize_prefix + 'extra-row', clusterize_prefix + class_name].join(' ');
-      height && (tag.style.height = height + 'px');
+      // CSP FIX: this element is serialized to markup via outerHTML and re-parsed by
+      // innerHTML below. Under a `style-src` policy without 'unsafe-inline', the browser
+      // refuses to apply a style ATTRIBUTE that came from parsed markup, so the spacer
+      // renders at height 0 and virtual scrolling collapses. Carry the height in a data
+      // attribute instead and apply it through CSSOM after insertion, which CSP allows.
+      height && tag.setAttribute('data-clusterize-height', height);
       return tag.outerHTML;
     },
     // if necessary verify data changed and insert to DOM
@@ -279,6 +284,14 @@
       }
     },
     // unfortunately ie <= 9 does not allow to use innerHTML for table elements, so make a workaround
+    // CSP FIX: apply spacer heights via CSSOM once the nodes are live in the document.
+    applyExtraRowHeights: function() {
+      var rows = this.content_elem.getElementsByClassName('clusterize-extra-row');
+      for(var i = 0; i < rows.length; i++) {
+        var h = rows[i].getAttribute('data-clusterize-height');
+        if(h) rows[i].style.height = h + 'px';
+      }
+    },
     html: function(data) {
       var content_elem = this.content_elem;
       if(ie && ie <= 9 && this.options.tag == 'tr') {
@@ -294,6 +307,7 @@
       } else {
         content_elem.innerHTML = data;
       }
+      this.applyExtraRowHeights();
     },
     getChildNodes: function(tag) {
         var child_nodes = tag.children, nodes = [];