MC-15022: HTML Content type does not render self closing html tags on storefront

Use Random class to generate unique a-z string and update xpath to fetch top-level ancestor html content type nodes only

Author: danmooney2

app/code/Magento/PageBuilder/Plugin/Filter/TemplatePlugin.php

@@ -29,16 +29,24 @@ class TemplatePlugin
      */
     private $domDocument;
 
+    /**
+     * @var \Magento\Framework\Math\Random
+     */
+    private $mathRandom;
+
     /**
      * @param \Psr\Log\LoggerInterface $logger
      * @param \Magento\Framework\View\ConfigInterface $viewConfig
+     * @param \Magento\Framework\Math\Random $mathRandom
      */
     public function __construct(
         \Psr\Log\LoggerInterface $logger,
-        \Magento\Framework\View\ConfigInterface $viewConfig
+        \Magento\Framework\View\ConfigInterface $viewConfig,
+        \Magento\Framework\Math\Random $mathRandom
     ) {
         $this->logger = $logger;
         $this->viewConfig = $viewConfig;
+        $this->mathRandom = $mathRandom;
     }
 
     /**
@@ -150,16 +158,17 @@ private function convertEncodedHtmlContentTypesToPlaceholders(
     ): void {
         $xpath = new \DOMXPath($document);
 
+        // construct xpath query to fetch top-level ancestor html content type nodes
         /** @var $htmlContentTypeNodes \DOMNode[] */
-        $htmlContentTypeNodes = $xpath->query('//*[@data-content-type="html" and not(@data-decoded="true")]');
+        $htmlContentTypeNodes = $xpath->query(
+            '//*[@data-content-type="html" and not(@data-decoded="true")]' .
+            '[not(ancestor::*[@data-content-type="html"])]'
+        );
 
-        // Preliminarily set decoded attribute on all encoded html content types so we don't double decode;
-        // this needs to be done in a separate loop as contents will change throughout the subsequent loop
         foreach ($htmlContentTypeNodes as $htmlContentTypeNode) {
+            // Set decoded attribute on all encoded html content types so we don't double decode;
             $htmlContentTypeNode->setAttribute('data-decoded', 'true');
-        }
 
-        foreach ($htmlContentTypeNodes as $htmlContentTypeNode) {
             // if nothing exists inside the node, continue
             if (!strlen(trim($htmlContentTypeNode->nodeValue))) {
                 continue;
@@ -171,7 +180,7 @@ private function convertEncodedHtmlContentTypesToPlaceholders(
             // generate unique node name element to replace with decoded html contents at end of processing;
             // goal is to create a document as few times as possible to prevent inadvertent parsing of contents as html
             // by the dom library
-            $uniqueNodeName = 'a' . md5(uniqid('', true));
+            $uniqueNodeName = $this->mathRandom->getRandomString(32, $this->mathRandom::CHARS_LOWERS);
 
             $uniqueNode = new \DOMElement($uniqueNodeName);
             $htmlContentTypeNode->parentNode->replaceChild($uniqueNode, $htmlContentTypeNode);

dev/tests/integration/_files/Magento/TestModulePageBuilderExtensionPoints/view/frontend/templates/html_content_type.phtml

@@ -1,4 +1,5 @@
 <div data-content-type="html">
     &lt;img src=&quot;http://example.com&quot;&gt;
     &lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/owsfdh4gxyc&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
+    &amp;amp;
 </div>

dev/tests/integration/testsuite/Magento/PageBuilder/_files/template_plugin/html_content_type_with_block_with_html_content_type_inside_post_filter.html

@@ -1,8 +1,9 @@
 <div data-content-type="html" data-decoded="true">
     <img src="http://example.com">
     <iframe width="560" height="315" src="https://www.youtube.com/embed/owsfdh4gxyc" frameborder="0" allowfullscreen></iframe>
-    <div data-content-type="html" data-decoded="true">
+    <div data-content-type="html">
     <img src="http://example.com">
     <iframe width="560" height="315" src="https://www.youtube.com/embed/owsfdh4gxyc" frameborder="0" allowfullscreen></iframe>
+    &amp;
 </div>
 </div>

dev/tests/integration/testsuite/Magento/PageBuilder/_files/template_plugin/text_content_type_with_block_with_html_content_type_inside_post_filter.html

@@ -3,5 +3,6 @@
     <div data-content-type="html" data-decoded="true">
     <img src="http://example.com">
     <iframe width="560" height="315" src="https://www.youtube.com/embed/owsfdh4gxyc" frameborder="0" allowfullscreen></iframe>
+    &amp;
 </div>
 </div>