correctly handle escaping

Author: alexander-aleman

app/code/Magento/Catalog/Block/Product/Image.php

@@ -14,7 +14,7 @@
  * @method string getHeight()
  * @method string getLabel()
  * @method float getRatio()
- * @method string getCustomAttributes()
+ * @method array getCustomAttributes()
  * @method string getClass()
  * @since 100.0.2
  */

app/code/Magento/Catalog/Block/Product/ImageFactory.php

@@ -67,23 +67,6 @@ public function __construct(
         $this->imageParamsBuilder = $imageParamsBuilder;
     }
 
-    /**
-     * Retrieve image custom attributes for HTML element
-     *
-     * @param array $attributes
-     * @return string
-     */
-    private function getStringCustomAttributes(array $attributes): string
-    {
-        $result = [];
-        foreach ($attributes as $name => $value) {
-            if ($name != 'class') {
-                $result[] = $name . '="' . $value . '"';
-            }
-        }
-        return !empty($result) ? implode(' ', $result) : '';
-    }
-
     /**
      * Retrieve image class for HTML element
      *
@@ -161,7 +144,7 @@ public function create(Product $product, string $imageId, array $attributes = nu
         }
 
         $attributes = $attributes === null ? [] : $attributes;
-        
+
         $data = [
             'data' => [
                 'template' => 'Magento_Catalog::product/image_with_borders.phtml',
@@ -170,7 +153,7 @@ public function create(Product $product, string $imageId, array $attributes = nu
                 'height' => $imageMiscParams['image_height'],
                 'label' => $this->getLabel($product, $imageMiscParams['image_type']),
                 'ratio' => $this->getRatio($imageMiscParams['image_width'], $imageMiscParams['image_height']),
-                'custom_attributes' => $this->getStringCustomAttributes($attributes),
+                'custom_attributes' => $attributes,
                 'class' => $this->getClass($attributes),
                 'product_id' => $product->getId()
             ],

app/code/Magento/Catalog/view/frontend/templates/product/image.phtml

@@ -7,7 +7,11 @@
 <?php /** @var $block \Magento\Catalog\Block\Product\Image */ ?>
 
 <img class="photo image <?= $block->escapeHtmlAttr($block->getClass()) ?>"
-    <?= /* @escapeNotVerified */ $block->getCustomAttributes() ?>
+    <?php foreach ($block->getCustomAttributes() as $name => $value): ?>
+        <?php if ($name !== 'class'): ?>
+            <?= $block->escapeHtmlAttr($name) ?>="<?= $block->escapeHtmlAttr($value) ?>"
+        <?php endif; ?>
+    <?php endforeach; ?>
     src="<?= $block->escapeUrl($block->getImageUrl()) ?>"
     width="<?= $block->escapeHtmlAttr($block->getWidth()) ?>"
     height="<?= $block->escapeHtmlAttr($block->getHeight()) ?>"

app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml

@@ -11,7 +11,11 @@
     <span class="product-image-wrapper"
           style="padding-bottom: <?= ($block->getRatio() * 100) ?>%;">
         <img class="<?= $block->escapeHtmlAttr($block->getClass()) ?>"
-            <?= /* @escapeNotVerified */ $block->getCustomAttributes() ?>
+            <?php foreach ($block->getCustomAttributes() as $name => $value): ?>
+                <?php if ($name !== 'class'): ?>
+                    <?= $block->escapeHtmlAttr($name) ?>="<?= $block->escapeHtmlAttr($value) ?>"
+                <?php endif; ?>
+            <?php endforeach; ?>
             src="<?= $block->escapeUrl($block->getImageUrl()) ?>"
             max-width="<?= $block->escapeHtmlAttr($block->getWidth()) ?>"
             max-height="<?= $block->escapeHtmlAttr($block->getHeight()) ?>"