MC-34764: Fix performance degradation cause by CSP

Author: Oleksandr Gorkun

app/code/Magento/Catalog/view/adminhtml/templates/catalog/product/composite/configure.phtml

@@ -45,13 +45,26 @@
         prodCompConfIframe.style.position = "absolute";
         prodCompConfIframe.style.top = "-1000px";
         prodCompConfIframe.style.left = "-1000px";
-        document.querySelectorAll(".product_composite_configure_messages").forEach((e) => e.style.display = "none");
-        document.querySelectorAll(".product_composite_configure_form_additional")
-            .forEach((e) => e.style.display = "none");
-        document.querySelectorAll(".product_composite_configure_form_confirmed")
-            .forEach((e) => e.style.display = "none");
-        document.querySelectorAll(".product_composite_configure_confirmed").forEach((e) => e.style.display = "none");
-        document.querySelectorAll(".product-configure-popup").forEach((e) => e.style.display = "none");
+        prodCompConfMessages = document.querySelectorAll(".product_composite_configure_messages");
+        for (var i = 0; i < prodCompConfMessages.length; i++) {
+            prodCompConfMessages[i].style.display = "none";
+        }
+        prodCompConfFormAdd = document.querySelectorAll(".product_composite_configure_form_additional");
+        for (var i = 0; i < prodCompConfFormAdd.length; i++) {
+            prodCompConfFormAdd[i].style.display = "none";
+        }
+        prodCompConfFormConf = document.querySelectorAll(".product_composite_configure_form_confirmed");
+        for (var i = 0; i < prodCompConfFormConf.length; i++) {
+            prodCompConfFormConf[i].style.display = "none";
+        }
+        prodCompConfConf = document.querySelectorAll(".product_composite_configure_confirmed");
+        for (var i = 0; i < prodCompConfConf.length; i++) {
+            prodCompConfConf[i].style.display = "none";
+        }
+        prodConfPopup = document.querySelectorAll(".product-configure-popup");
+        for (var i = 0; i < prodConfPopup.length; i++) {
+            prodConfPopup[i].style.display = "none";
+        }
 
         require([
             "jquery",

app/code/Magento/Sales/view/adminhtml/templates/order/create/data.phtml

@@ -31,7 +31,7 @@ script;
         <?= /* @noEscape */ $secureRenderer->renderTag(
             'script',
             [],
-            "let elemOrderSearch = document.querySelector('div#order-search');
+            "var elemOrderSearch = document.querySelector('div#order-search');
             if (elemOrderSearch) {
                 elemOrderSearch.style.display = 'none';
                 elemOrderSearch.classList.remove('no-display');

app/code/Magento/Swatches/view/frontend/templates/product/layered/renderer.phtml

@@ -55,7 +55,7 @@
                             </div>
                             <?php
                             $element = 'swatchImageOption' .$escaper->escapeJs($option);
-                            $script = 'let ' .$element
+                            $script = 'var ' .$element
                                 .' = document.querySelector(\'div[data-option-id="' .$escaper->escapeJs($option)
                                 .'"]\');' .PHP_EOL;
                             $script .= $element .'.style.background = "url(\''
@@ -81,7 +81,7 @@
                             $backgroundValue = $escaper->escapeJs(
                                 str_replace('\'', '\\\'', $swatchData['swatches'][$option]['value'])
                             );
-                            $script = 'let ' .$element
+                            $script = 'var ' .$element
                                 .' = document.querySelector(\'div[data-option-id="' .$escaper->escapeJs($option)
                                 .'"]\');' .PHP_EOL;
                             $script .= $element .'.style.background = "' .$backgroundValue

lib/internal/Magento/Framework/View/Helper/SecureHtmlRenderer.php

@@ -111,10 +111,10 @@ public function renderEventListenerAsTag(
             function {$listenerFunction} () {
                 {$attributeJavascript};
             }
-            let {$elementName} = document.querySelector("{$elementSelector}");
+            var {$elementName} = document.querySelector("{$elementSelector}");
             if ({$elementName}) {
-                {$elementName}.{$eventName} = (event) => {
-                    let targetElement = {$elementName};
+                {$elementName}.{$eventName} = function (event) {
+                    var targetElement = {$elementName};
                     if (event && event.target) {
                         targetElement = event.target;
                     }
@@ -161,7 +161,7 @@ public function renderStyleAsTag(string $style, string $selector): string
         return $this->renderTag(
             'script',
             ['type' => 'text/javascript'],
-            "let $elementVariable = document.querySelector('$selector');\n"
+            "var $elementVariable = document.querySelector('$selector');\n"
             ."if ($elementVariable) {\n{$stylesAssignments}}",
             false
         );