feat: add CSP whitelist and update Alpine.js to version 3.15.11 with hash security

src/etc/frontend/csp_whitelist.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<csp_whitelist xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+               xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Csp:etc/csp_whitelist.xsd">
+    <policies>
+        <policy id="script-src">
+            <values>
+                <value id="mageforge_jsdelivr_cdn" type="host">cdn.jsdelivr.net</value>
+            </values>
+        </policy>
+    </policies>
+</csp_whitelist>

src/view/frontend/templates/inspector.phtml

@@ -15,36 +15,49 @@
 <link rel="stylesheet" type="text/css" href="<?= $escaper->escapeUrl($block->getCssUrl()) ?>" />
 
 <!-- Alpine.js Bootstrap (load only if not already present) -->
-<script>
+<?php
+$alpineBootstrap = <<<JS
 (function() {
     'use strict';
 
-    // Check if Alpine.js is already loaded (Hyvä themes)
+    // Check if Alpine.js is already loaded (Hyvä themes) to avoid conflicts
     if (typeof Alpine !== 'undefined') {
         console.log('[MageForge Inspector] Alpine.js already loaded');
         return;
     }
 
-    // Load Alpine.js dynamically for non-Hyvä themes
     console.log('[MageForge Inspector] Loading Alpine.js from CDN');
 
     var alpineScript = document.createElement('script');
-    alpineScript.src = 'https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js';
-    alpineScript.defer = true;
+    alpineScript.src = 'https://cdn.jsdelivr.net/npm/alpinejs@3.15.11/dist/cdn.min.js';
+    alpineScript.integrity = 'sha256-vuumPQiVb2T6Bg9rainIejQb8Gn7lslFnCIsb9QuWK4=';
+    alpineScript.crossOrigin = 'anonymous';
     alpineScript.onload = function() {
         console.log('[MageForge Inspector] Alpine.js loaded successfully');
     };
     alpineScript.onerror = function() {
         console.error('[MageForge Inspector] Failed to load Alpine.js');
     };
 
-    document.head.appendChild(alpineScript);
+    // Defer injection until DOMContentLoaded so that all <script defer> tags
+    // (including inspector.js) have already executed and registered their
+    // alpine:init listener before Alpine starts.
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function() {
+            document.head.appendChild(alpineScript);
+        });
+    } else {
+        // DOMContentLoaded already fired (e.g. script injected late)
+        document.head.appendChild(alpineScript);
+    }
 })();
-</script>
+JS;
+?>
+<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $alpineBootstrap, false) ?>
 
 <script defer src="<?= $escaper->escapeUrl($block->getJsUrl()) ?>"></script>
 
-<!-- Inspector Component Wrapper -->
+<!-- MageForge Inspector Component Wrapper -->
 <div class="mageforge-inspector"
      x-data="mageforgeInspector"
      data-theme="<?= $escaper->escapeHtmlAttr($block->getTheme()) ?>"></div>

src/view/frontend/web/js/inspector.js

@@ -4,7 +4,10 @@
  * Alpine.js component for inspecting templates, blocks, and modules
  */
 
-document.addEventListener('alpine:init', () => {
+// Extracted into a named function so it can be called either from the
+// alpine:init event (normal case) or immediately when Alpine has already
+// started (e.g. Hyvä themes where Alpine loads before this deferred script).
+function _registerMageforgeInspector() {
     Alpine.data('mageforgeInspector', () => ({
         isOpen: false,
         isPickerActive: false,
@@ -2373,4 +2376,20 @@ document.addEventListener('alpine:init', () => {
             this.panelData.module = data.module || 'N/A';
         },
     }));
-});
+}
+
+// If Alpine has already initialised (e.g. it was loaded by Hyvä before this
+// deferred script executed), register the component straight away and
+// re-initialise any [x-data="mageforgeInspector"] elements that Alpine skipped
+// because the component was not yet registered at that point.
+// Otherwise, register on alpine:init which fires before Alpine processes the DOM.
+if (typeof Alpine !== 'undefined') {
+    _registerMageforgeInspector();
+    document.querySelectorAll('[x-data="mageforgeInspector"]').forEach(function (el) {
+        if (typeof Alpine.initTree === 'function') {
+            Alpine.initTree(el);
+        }
+    });
+} else {
+    document.addEventListener('alpine:init', _registerMageforgeInspector);
+}