get rid of csp-module and implement secure-renderer

composer.json

@@ -20,7 +20,6 @@
   ],
   "require": {
     "yireo/magento2-next-gen-images": "~0.3",
-    "yireo/magento2-csp-utilities": "^1.0",
     "magento/framework": "^101.0.1|^101.1|^102.0|^103.0",
     "magento/module-backend": "^100.0|^101.0|^102.0",
     "magento/module-config": "^101.0",

etc/module.xml

@@ -3,7 +3,6 @@
     <module name="Yireo_Webp2" setup_version="0.4.0">
         <sequence>
             <module name="Yireo_NextGenImages" />
-            <module name="Yireo_CspUtilities" />
             <module name="Magento_Backend" />
             <module name="Magento_Config" />
             <module name="Magento_Store" />

view/frontend/templates/hyva/add-webp-class-to-body.phtml

@@ -1,15 +1,35 @@
-<?php declare(strict_types=1); ?> <script>
-    function hasWebP() {
-        var elem = document.createElement('canvas');
+<?php
 
-        if (!!(elem.getContext && elem.getContext('2d'))) {
-            return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
+declare(strict_types=1);
+
+/**
+ * @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer
+ */
+
+$script = <<<JS
+    (() => {
+        let _hasWebP = null;
+        window.hasWebP = () => {
+            if (_hasWebP !== null) {
+                return _hasWebP;
+            }
+
+            var elem = document.createElement('canvas');
+
+            if (!!(elem.getContext && elem.getContext('2d'))) {
+                _hasWebP = elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
+            } else {
+                _hasWebP = false;
+            }
+            return _hasWebP;
         }
-        return false;
-    }
-
-    if (hasWebP()) {
-        document.body.classList.add("webp");
-    } else {
-        document.body.classList.add("no-webp");
-    }</script>
+
+        if (window.hasWebP()) {
+            document.body.classList.add("webp");
+        } else {
+            document.body.classList.add("no-webp");
+        }
+    })();
+JS;
+
+echo $secureRenderer->renderTag('script', [], $script, false);

view/frontend/templates/hyva/gallery-additions.phtml

@@ -1,36 +1,27 @@
-<script>
-    document.addEventListener('gallery-init', ({detail: galleryData}) => {
-        if (typeof hasWebP != 'function') {
-            console.error('[Yireo_WebP2] JavaScript function "hasWebP" does not exist');
-            return;
-        }
+<?php
 
-        function replaceImage(image) {
-            if (image.full && image.full_webp) {
-                image.full = image.full_webp;
-                delete image.full_webp;
-            }
+declare(strict_types=1);
 
-            if (image.img && image.img_webp) {
-                image.img = image.img_webp;
-                delete image.img_webp;
-            }
+/**
+ * @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer
+ */
 
-            if (image.thumb && image.thumb_webp) {
-                image.thumb = image.thumb_webp;
-                delete image.thumb_webp;
-            }
+$script = <<<JS
+    document.addEventListener('gallery-init', ({detail: galleryData}) => {
+        const keys = ['full', 'img', 'thumb'];
+        function replaceImage(image) {
+            keys.forEach((key) => {
+                const webpKey = key + '_webp';
+                if (key in image && webpKey in image) {
+                    image[key] = image[webpKey];
+                    delete image[webpKey];
+                }
+            })
         }
 
-        if (galleryData.images) {
-            galleryData.images.forEach(function(image) {
-                replaceImage(image);
-            });
-        }
+        galleryData.images?.forEach(replaceImage);
+        galleryData.initialImages?.forEach(replaceImage);
+    });
+JS;
 
-        if (galleryData.initialImages) {
-            galleryData.initialImages.forEach(function(image) {
-                replaceImage(image);
-            });
-        }
-    });</script>
+echo $secureRenderer->renderTag('script', [], $script, false);