Add CSP nonces to inline scripts

yireo · Aug 23, 2024 · 7b0dcc4 · 7b0dcc4
1 parent cfd6e7d
commit 7b0dcc4
Show file tree

Hide file tree

Showing 14 changed files with 50 additions and 96 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.14.1] - 23 August 2024
+### Fixed
+- Add CSP nonces to inline scripts
+
 ## [0.14.0] - 20 June 2024
 ### Fixed
 - Move GraphQL support in seperate [module](https://github.com/yireo/Yireo_Webp2GraphQl)

diff --git a/Plugin/AddCspInlineScripts.php b/Plugin/AddCspInlineScripts.php
@@ -0,0 +1,26 @@
+<?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 $html;
+        }
+
+        return $this->replaceInlineScripts->replace((string)$html);
+    }
+}
diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
   "name": "yireo/magento2-webp2",
   "license": "OSL-3.0",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "type": "magento2-module",
   "homepage": "https://www.yireo.com/software/magento-extensions/webp2",
   "description": "Magento 2 module to add WebP support to the Magento frontend",
@@ -20,6 +20,7 @@
   ],
   "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.0|^101.1.0",

diff --git a/etc/frontend/di.xml b/etc/frontend/di.xml
@@ -0,0 +1,7 @@
+<?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
@@ -3,6 +3,7 @@
     <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_Catalog" />
             <module name="Magento_Config" />

diff --git a/view/frontend/layout/hyva_catalog_product_view.xml b/view/frontend/layout/hyva_catalog_product_view.xml
@@ -3,7 +3,7 @@
       xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
     <body>
         <referenceContainer name="content">
-            <block template="Yireo_Webp2::hyva/gallery-additions.phtml"/>
+            <block name="yireo_webp2.gallery-additions" template="Yireo_Webp2::hyva/gallery-additions.phtml"/>
         </referenceContainer>
     </body>
 </page>
diff --git a/view/frontend/layout/hyva_default.xml b/view/frontend/layout/hyva_default.xml
@@ -3,7 +3,7 @@
       xsi:noNamespaceSchemaLocation="urn:magento:module:View/Layout:etc/page_configuration.xsd">
     <body>
         <referenceContainer name="content">
-            <block template="Yireo_Webp2::hyva/add-webp-class-to-body.phtml"/>
+            <block name="yireo_webp2.add-webp-class-to-body" template="Yireo_Webp2::hyva/add-webp-class-to-body.phtml"/>
         </referenceContainer>
     </body>
 </page>
diff --git a/view/frontend/templates/hyva/add-webp-class-to-body.phtml b/view/frontend/templates/hyva/add-webp-class-to-body.phtml
@@ -1,7 +1,4 @@
-<?php declare(strict_types=1);
-
-?>
-<script>
+<?php declare(strict_types=1); ?> <script>
     function hasWebP() {
         var elem = document.createElement('canvas');
 
@@ -15,5 +12,4 @@
         document.body.classList.add("webp");
     } else {
         document.body.classList.add("no-webp");
-    }
-</script>
+    }</script>
diff --git a/view/frontend/templates/hyva/gallery-additions.phtml b/view/frontend/templates/hyva/gallery-additions.phtml
@@ -33,5 +33,4 @@
                 replaceImage(image);
             });
         }
-    });
-</script>
+    });</script>
diff --git a/view/frontend/templates/test/image_with_custom_style.phtml b/view/frontend/templates/test/image_with_custom_style.phtml
@@ -1,15 +1 @@
-<?php declare(strict_types=1);
-
-/** @var $block \Magento\Framework\View\Element\Template */
-/** @var $imageProvider \Yireo\Webp2\Test\Utils\ImageProvider */
-$imageProvider = $block->getImageProvider();
-$image = $imageProvider->getImage();
-$imageUrl = $block->escapeUrl($block->getViewFileUrl('Yireo_Webp2/' . $image));
-?>
-
-<h1><?= /* @noEscape */ $block->getNameInLayout() ?></h1>
-
-<img class="alt-img" src="<?= /* @noEscape */ $imageUrl ?>" alt="test sample" style="display:insane; opacity:666;">
-
-<h2>Layout handles</h2>
-<pre><?= implode(', ', /* @noEscape */ $block->getLayout()->getUpdate()->getHandles()); ?></pre>
+<?php declare(strict_types=1); /** @var $block \Magento\Framework\View\Element\Template */ /** @var $imageProvider \Yireo\Webp2\Test\Utils\ImageProvider */ $imageProvider = $block->getImageProvider(); $image = $imageProvider->getImage(); $imageUrl = $block->escapeUrl($block->getViewFileUrl('Yireo_Webp2/' . $image)); ?> <h1><?= /* @noEscape */ $block->getNameInLayout() ?></h1><img class="alt-img" src="<?= /* @noEscape */ $imageUrl ?>" alt="test sample" style="display:insane; opacity:666;"><h2>Layout handles</h2><pre><?= implode(', ', /* @noEscape */ $block->getLayout()->getUpdate()->getHandles()); ?></pre>
diff --git a/view/frontend/templates/test/multiple_existing_picturesets.phtml b/view/frontend/templates/test/multiple_existing_picturesets.phtml
@@ -1,24 +1 @@
-<?php declare(strict_types=1);
-
-/** @var $block \Magento\Framework\View\Element\Template */
-/** @var $imageProvider \Yireo\Webp2\Test\Utils\ImageProvider */
-$imageProvider = $block->getImageProvider();
-$images = $imageProvider->getImages();
-
-$imageUrl = $block->escapeUrl($block->getViewFileUrl('Yireo_Webp2/' . $image));
-?>
-
-<h1><?= /* @noEscape */
-    $block->getNameInLayout() ?></h1>
-
-<?php foreach ($images as $image): ?>
-    <div>
-        <picture>
-            <img src="<?= /* @noEscape */
-            $imageUrl ?>" width="100" height="100"/>
-        </picture>
-    </div>
-<?php endforeach; ?>
-
-<h2>Layout handles</h2>
-<pre><?= implode(', ', /* @noEscape */ $block->getLayout()->getUpdate()->getHandles()); ?></pre>
+<?php declare(strict_types=1); /** @var $block \Magento\Framework\View\Element\Template */ /** @var $imageProvider \Yireo\Webp2\Test\Utils\ImageProvider */ $imageProvider = $block->getImageProvider(); $images = $imageProvider->getImages(); $imageUrl = $block->escapeUrl($block->getViewFileUrl('Yireo_Webp2/' . $image)); ?> <h1><?= /* @noEscape */ $block->getNameInLayout() ?></h1><?php foreach ($images as $image): ?> <div><picture><img src="<?= /* @noEscape */ $imageUrl ?>" width="100" height="100"/></picture></div><?php endforeach; ?> <h2>Layout handles</h2><pre><?= implode(', ', /* @noEscape */ $block->getLayout()->getUpdate()->getHandles()); ?></pre>
diff --git a/view/frontend/templates/test/multiple_images.phtml b/view/frontend/templates/test/multiple_images.phtml
@@ -1,19 +1 @@
-<?php declare(strict_types=1);
-
-/** @var $block \Magento\Framework\View\Element\Template */
-/** @var $imageProvider \Yireo\Webp2\Test\Utils\ImageProvider */
-$imageProvider = $block->getImageProvider();
-$images = $imageProvider->getImages();
-?>
-
-<h1><?= /* @noEscape */ $block->getNameInLayout() ?></h1>
-
-<?php foreach ($images as $image): ?>
-    <?php $imageUrl = $block->escapeUrl($block->getViewFileUrl('Yireo_Webp2/' . $image)); ?>
-    <div>
-        <img src="<?= /* @noEscape */ $imageUrl ?>" width="100" height="100"/>
-    </div>
-<?php endforeach; ?>
-
-<h2>Layout handles</h2>
-<pre><?= implode(', ', /* @noEscape */ $block->getLayout()->getUpdate()->getHandles()); ?></pre>
+<?php declare(strict_types=1); /** @var $block \Magento\Framework\View\Element\Template */ /** @var $imageProvider \Yireo\Webp2\Test\Utils\ImageProvider */ $imageProvider = $block->getImageProvider(); $images = $imageProvider->getImages(); ?> <h1><?= /* @noEscape */ $block->getNameInLayout() ?></h1><?php foreach ($images as $image): ?> <?php $imageUrl = $block->escapeUrl($block->getViewFileUrl('Yireo_Webp2/' . $image)); ?> <div><img src="<?= /* @noEscape */ $imageUrl ?>" width="100" height="100"/></div><?php endforeach; ?> <h2>Layout handles</h2><pre><?= implode(', ', /* @noEscape */ $block->getLayout()->getUpdate()->getHandles()); ?></pre>
diff --git a/view/frontend/templates/test/multiple_images_same.phtml b/view/frontend/templates/test/multiple_images_same.phtml
@@ -1,18 +1 @@
-<?php declare(strict_types=1);
-
-/** @var $block \Magento\Framework\View\Element\Template */
-/** @var $imageProvider \Yireo\Webp2\Test\Utils\ImageProvider */
-$imageProvider = $block->getImageProvider();
-$image = $imageProvider->getImage();
-?>
-
-<h1><?= /* @noEscape */$block->getNameInLayout() ?></h1>
-
-<?php for ($i = 0; $i < 3; $i++): ?>
-    <div>
-        <img src="<?= $block->escapeUrl($block->getViewFileUrl('Yireo_Webp2/' . $image)) ?>" width="100" height="100"/>
-    </div>
-<?php endfor; ?>
-
-<h2>Layout handles</h2>
-<pre><?= implode(', ', /* @noEscape */ $block->getLayout()->getUpdate()->getHandles()); ?></pre>
+<?php declare(strict_types=1); /** @var $block \Magento\Framework\View\Element\Template */ /** @var $imageProvider \Yireo\Webp2\Test\Utils\ImageProvider */ $imageProvider = $block->getImageProvider(); $image = $imageProvider->getImage(); ?> <h1><?= /* @noEscape */$block->getNameInLayout() ?></h1><?php for ($i = 0; $i < 3; $i++): ?> <div><img src="<?= $block->escapeUrl($block->getViewFileUrl('Yireo_Webp2/' . $image)) ?>" width="100" height="100"/></div><?php endfor; ?> <h2>Layout handles</h2><pre><?= implode(', ', /* @noEscape */ $block->getLayout()->getUpdate()->getHandles()); ?></pre>
diff --git a/view/frontend/templates/test/unknown_image.phtml b/view/frontend/templates/test/unknown_image.phtml
@@ -1,9 +1 @@
-<?php declare(strict_types=1);
-
-/** @var $block \Magento\Framework\View\Element\Template */
-?>
-
-<img src="https://example.com/some/non/existing/image.png" alt="" width="10px">
-
-<h2>Layout handles</h2>
-<pre><?= implode(', ', /* @noEscape */ $block->getLayout()->getUpdate()->getHandles()); ?></pre>
+<?php declare(strict_types=1); /** @var $block \Magento\Framework\View\Element\Template */ ?> <img src="https://example.com/some/non/existing/image.png" alt="" width="10px"><h2>Layout handles</h2><pre><?= implode(', ', /* @noEscape */ $block->getLayout()->getUpdate()->getHandles()); ?></pre>