From bb6cbb6594ecf22eac1291dcbe0f1dca836cf178 Mon Sep 17 00:00:00 2001
From: Frederik Rommel <frederik.rommel@webidea24.de>
Date: Tue, 27 Aug 2024 23:22:38 +0200
Subject: [PATCH] get rid of csp-module and implement secure-renderer

---
 Plugin/AddCspInlineScripts.php                | 26 ----------
 composer.json                                 |  1 -
 etc/frontend/di.xml                           |  7 ---
 etc/module.xml                                |  1 -
 .../hyva/add-webp-class-to-body.phtml         | 46 ++++++++++++-----
 .../templates/hyva/gallery-additions.phtml    | 51 ++++++++-----------
 6 files changed, 54 insertions(+), 78 deletions(-)
 delete mode 100644 Plugin/AddCspInlineScripts.php
 delete mode 100644 etc/frontend/di.xml

diff --git a/Plugin/AddCspInlineScripts.php b/Plugin/AddCspInlineScripts.php
deleted file mode 100644
index 06ff649..0000000
--- a/Plugin/AddCspInlineScripts.php
+++ /dev/null
@@ -1,26 +0,0 @@
-<?php declare(strict_types=1);
-
-namespace Yireo\Webp2\Plugin;
-
-use Magento\Framework\View\Element\Template;
-use Yireo\CspUtilities\Util\ReplaceInlineScripts;
-
-class AddCspInlineScripts
-{
-    private ReplaceInlineScripts $replaceInlineScripts;
-
-    public function __construct(
-        ReplaceInlineScripts $replaceInlineScripts
-    ) {
-        $this->replaceInlineScripts = $replaceInlineScripts;
-    }
-
-    public function afterToHtml(Template $block, $html): string
-    {
-        if (false === strstr((string)$block->getNameInLayout(), 'yireo_webp2.')) {
-            return (string)$html;
-        }
-
-        return $this->replaceInlineScripts->replace((string)$html);
-    }
-}
diff --git a/composer.json b/composer.json
index f5e4f7f..3e6c2c3 100644
--- a/composer.json
+++ b/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",
diff --git a/etc/frontend/di.xml b/etc/frontend/di.xml
deleted file mode 100644
index 96d7b98..0000000
--- a/etc/frontend/di.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0"?>
-<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
-    <type name="Magento\Framework\View\Element\Template">
-        <plugin name="Yireo_Webp2::addCspInlineScripts" type="Yireo\Webp2\Plugin\AddCspInlineScripts"/>
-    </type>
-</config>
diff --git a/etc/module.xml b/etc/module.xml
index 738f7c6..fd76d2d 100644
--- a/etc/module.xml
+++ b/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" />
diff --git a/view/frontend/templates/hyva/add-webp-class-to-body.phtml b/view/frontend/templates/hyva/add-webp-class-to-body.phtml
index 05cedf6..0d5b963 100644
--- a/view/frontend/templates/hyva/add-webp-class-to-body.phtml
+++ b/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>
\ No newline at end of file
+
+        if (window.hasWebP()) {
+            document.body.classList.add("webp");
+        } else {
+            document.body.classList.add("no-webp");
+        }
+    })();
+JS;
+
+echo $secureRenderer->renderTag('script', [], $script, false);
diff --git a/view/frontend/templates/hyva/gallery-additions.phtml b/view/frontend/templates/hyva/gallery-additions.phtml
index eb1cd14..f3d7322 100644
--- a/view/frontend/templates/hyva/gallery-additions.phtml
+++ b/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>
\ No newline at end of file
+echo $secureRenderer->renderTag('script', [], $script, false);