MC-10871: [Sec] XSS Injection in HTML Code Content Type

- Update class comments
- Move styling for placeholder out of scope

Author: davemacaulay

app/code/Magento/PageBuilder/Controller/ContentType/Preview.php

@@ -12,6 +12,10 @@
 
 /**
  * Preview controller to render blocks preview on Stage
+ *
+ * This isn't placed within the adminhtml folder as it has to extend from the front-end controllers app action to
+ * ensure the content is rendered in the storefront scope.
+ *
  * @api
  */
 class Preview extends \Magento\Framework\App\Action\Action

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

@@ -64,6 +64,7 @@ public function afterFilter(\Magento\Framework\Filter\Template $subject, string
             $this->decodeHtmlContentTypes($document);
         }
 
+        // If a document was retrieved we've modified the output so need to retrieve it from within the document
         if (isset($document)) {
             // Match the contents of the body from our generated document
             preg_match(
@@ -72,7 +73,7 @@ public function afterFilter(\Magento\Framework\Filter\Template $subject, string
                 $matches
             );
 
-            $result = !empty($matches) ? $matches[1] : $result;
+            return !empty($matches) ? $matches[1] : $result;
         }
 
         return $result;

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/html/_default.less

@@ -19,27 +19,31 @@
             justify-content: center;
             position: relative;
         }
-        .placeholder-html-code {
-            background-color: @color-gray98;
-            font-family: @font-family__console;
-            font-size: 12px;
-            font-weight: @font-weight__light;
-            height: 60px;
-            overflow: hidden;
-            position: relative;
-            word-wrap: break-word;
+    }
+}
 
-            &:before {
-                background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, @color-gray98 100%);
-                bottom: 0;
-                content: '';
-                font-size: 12px;
-                height: 60px;
-                left: 0;
-                position: absolute;
-                width: 100%;
-            }
-        }
+.placeholder-html-code {
+    background-color: @color-gray98;
+    font-family: @font-family__console;
+    font-size: 12px;
+    font-weight: @font-weight__light;
+    height: 60px;
+    overflow: hidden;
+    position: relative;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+
+    &:before {
+        background: -moz-linear-gradient(top, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 100%);
+        background: -webkit-linear-gradient(top, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 100%);
+        background: linear-gradient(to bottom, rgba(250,250,250,0) 0%,rgba(250,250,250,1) 100%);
+        bottom: 0;
+        content: '';
+        font-size: 12px;
+        height: 60px;
+        left: 0;
+        position: absolute;
+        width: 100%;
     }
 }