Refresh by replacing document body instead of using header

Co-authored-by: Étienne Barrié <[email protected]>

Author: adrianna-chang-shopify

app/controllers/maintenance_tasks/application_controller.rb

@@ -14,6 +14,10 @@ class ApplicationController < ActionController::Base
         "'sha384-" \
           "MJ6MP7wjBI68eI1gLBSKU86HYHooeOnBdlmsV/RfzritEYu5Xaa1vROm+3dkbeZt'",
       )
+      policy.script_src(
+        # page refresh script
+        "'sha256-fADwJN++FN9LuhJ4XRCiIoJ7KPwmDYx2qiBgm20D8rA='",
+      )
       policy.frame_ancestors(:self)
     end
 

app/views/layouts/maintenance_tasks/application.html.erb

@@ -15,10 +15,10 @@
     <%= csrf_meta_tags %>
 
     <%=
-      stylesheet_link_tag URI.join(controller.class::BULMA_CDN, 'npm/[email protected]/css/bulma.css'),
+      stylesheet_link_tag(URI.join(controller.class::BULMA_CDN, 'npm/[email protected]/css/bulma.css'),
         media: :all,
         integrity: 'sha384-Zkr9rpl37lclZu6AwYQZZm0CxiMqLZFiibodW+UXLnAWPBr6qgIzPpcmHkpwnyWD',
-        crossorigin: 'anonymous'
+        crossorigin: 'anonymous') if request.headers.key?('Sec-Fetch-User')
     %>
 
     <style>
@@ -32,7 +32,19 @@
     </style>
 
     <% if defined?(@refresh) %>
-      <meta http-equiv="refresh" content="<%= @refresh %>">
+      <script>
+        function refresh() {
+          fetch(document.location).then(
+            async response => {
+              const text = await response.text()
+              const newDocument = new DOMParser().parseFromString(text, "text/html")
+              document.body.replaceWith(newDocument.body)
+            },
+            error => location.reload()
+          )
+        }
+        window.setInterval(refresh, <%= @refresh * 1000 %>)
+      </script>
     <% end %>
   </head>