Only re-use limited set of HTML attributes for source-tags #78

yireo · Aug 9, 2024 · c3ad533 · c3ad533
1 parent 439de24
commit c3ad533
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/Block/Picture.php b/Block/Picture.php
@@ -249,6 +249,22 @@ public function getOriginalAttributesAsString(): string
         return implode(' ', $this->getOriginalAttributes());
     }
 
+    public function getSourceAttributesAsString(): string
+    {
+        $allowedSourceAttributes = ['media', 'sizes'];
+        $sourceAttributes = [];
+        foreach ($this->getOriginalAttributes() as $originalAttribute) {
+            $originalAttributeArray = explode('=', $originalAttribute);
+            if (false === in_array($originalAttributeArray[0], $allowedSourceAttributes)) {
+                continue;
+            }
+
+            $sourceAttributes[] = $originalAttribute;
+        }
+
+        return implode(' ', $sourceAttributes);
+    }
+
     /**
      * @return string[]
      */

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- Only re-use limited set of HTML attributes for source-tags #78
 
 ## [0.5.3] - 22 May 2024
 ### Fixed

diff --git a/Test/Integration/Block/PictureTest.php b/Test/Integration/Block/PictureTest.php
@@ -21,12 +21,18 @@ public function testPictureCreation()
         $images = [new Image('/tmp/pub/images/test.webp', '/images/test.webp')];
 
         $pictureFactory = $this->objectManager->create(PictureFactory::class);
-        $picture = $pictureFactory->create($originalImage, $images, '<img src="/images/test.png"/>');
+        $picture = $pictureFactory->create($originalImage, $images, '<img src="/images/test.png" class="foobar" fetchpriority="high"/>');
 
         $html = $picture->toHtml();
         $this->assertNotEmpty($html);
         $this->assertStringContainsString('<source type="image/webp" srcset="/images/test.webp"', $html);
-        $this->assertStringContainsString('<img src="/images/test.png"/>', $html);
+        $this->assertStringContainsString('<img src="/images/test.png" class="foobar" fetchpriority="high"/>', $html);
+
+        preg_match_all('#<source ([^>]+)>#msi', $html, $matches);
+        foreach ($matches[0] as $match) {
+            $this->assertStringNotContainsString('class="foobar"', $match);
+            $this->assertStringNotContainsString('fetchpriority="high"', $match);
+        }
     }
 
     /**

diff --git a/Test/Integration/Util/HtmlReplacerTest.php b/Test/Integration/Util/HtmlReplacerTest.php
@@ -95,7 +95,7 @@ public function getTestReplaceWithTestImageArguments(): array
             ],
             [
                 '<div><img style="float: right;" src="/img/test.png"/></div>',
-                '<div><picture><source type="image/png" srcset="/test.png" style="float: right;"><source type="image/webp" srcset="/test.webp" style="float: right;"><img style="float: right;" src="/img/test.png" loading="lazy" /></picture></div>'
+                '<div><picture><source type="image/png" srcset="/test.png"><source type="image/webp" srcset="/test.webp"><img style="float: right;" src="/img/test.png" loading="lazy" /></picture></div>'
             ],
             [
                 "<script>var imgElement = '<img src=\"/test.png\" />';</script>",

diff --git a/view/frontend/templates/picture.phtml b/view/frontend/templates/picture.phtml
@@ -30,7 +30,7 @@ $class ?>>
     <?php foreach ($block->getImages() as $image): ?>
         <source type="<?= /* @noEscape */ $image->getMimeType() ?>"
         <?= /* @noEscape */ $srcSetAttribute ?>="<?= /* @noEscape */ $image->getUrl() ?>"
-        <?= /* @noEscape */ $block->getOriginalAttributesAsString() ?>
+        <?= /* @noEscape */ $block->getSourceAttributesAsString() ?>
         >
     <?php endforeach; ?>
     <?= /* @noEscape */