MC-34764: Fix performance degradation cause by CSP

Author: Oleksandr Gorkun

app/code/Magento/Backend/Block/Widget/Button.php

@@ -162,7 +162,7 @@ protected function _beforeToHtml()
     {
         parent::_beforeToHtml();
 
-        $buttonId = 'buttonId' .$this->random->getRandomString(32);
+        $buttonId = 'buttonId' .$this->random->getRandomString(10);
         $this->setData('backend_button_widget_hook_id', $buttonId);
 
         $afterHtml = $this->getAfterHtml();

app/code/Magento/Backend/Block/Widget/Button/SplitButton.php

@@ -243,7 +243,7 @@ private function identifyOption(array $option): string
             ? $this->getId() .'-' .$option['id']
             : (isset($option['id_attribute']) ?
                 $option['id_attribute']
-                : $this->getId() .'-optId' .$this->random->getRandomString(32));
+                : $this->getId() .'-optId' .$this->random->getRandomString(10));
     }
 
     /**

app/code/Magento/Backend/Block/Widget/Grid/Column/Renderer/Action.php

@@ -132,7 +132,7 @@ protected function _toLinkHtml($action, \Magento\Framework\DataObject $row)
         }
 
         if (empty($action['id'])) {
-            $action['id'] = 'id' .$this->random->getRandomString(32);
+            $action['id'] = 'id' .$this->random->getRandomString(10);
         }
         $actionAttributes->setData($action);
         $onclick = $actionAttributes->getData('onclick');

app/code/Magento/Backend/Block/Widget/Grid/Column/Renderer/Checkbox.php

@@ -176,7 +176,7 @@ public function renderHeader()
         if ($this->getColumn()->getDisabled()) {
             $disabled = ' disabled="disabled"';
         }
-        $id = 'id' .$this->random->getRandomString(32);
+        $id = 'id' .$this->random->getRandomString(10);
         $html = '<th class="data-grid-th data-grid-actions-cell"><input type="checkbox" ';
         $html .= 'id="' .$id .'" ';
         $html .= 'name="' . $this->getColumn()->getFieldName() . '" ';

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

@@ -13,33 +13,17 @@
         "window.productConfigure && productConfigure.onLoadIFrame()",
         'iframe[name=\'product_composite_configure_iframe\']:last-of-type'
     ) ?>
-    <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-        "width:0; height:0; border:0px solid #fff; position:absolute; top:-1000px; left:-1000px",
-        'iframe[name=\'product_composite_configure_iframe\']:last-of-type'
-    ) ?>
 
     <form action="" method="post" id="product_composite_configure_form" enctype="multipart/form-data"
           target="product_composite_configure_iframe" class="product_composite_configure_form">
         <div class="entry-edit">
             <div id="product_composite_configure_messages" class="product_composite_configure_messages">
                 <div class="messages"><div class="message message-error error"><div></div></div></div>
             </div>
-            <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-                'display:none;',
-                '.product_composite_configure_messages:last-of-type'
-            ) ?>
             <div id="product_composite_configure_form_fields" class="content product-composite-configure-inner"></div>
             <div id="product_composite_configure_form_additional" class="product_composite_configure_form_additional">
             </div>
-            <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-                'display:none;',
-                '.product_composite_configure_form_additional:last-of-type'
-            ) ?>
             <div id="product_composite_configure_form_confirmed" class="product_composite_configure_form_confirmed"></div>
-            <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-                'display:none;',
-                '.product_composite_configure_form_confirmed:last-of-type'
-            ) ?>
         </div>
         <input type="hidden" name="as_js_varname" value="iFrameResponse" />
         <input type="hidden" name="form_key" value="<?= $block->escapeHtmlAttr($block->getFormKey()) ?>" />
@@ -51,12 +35,21 @@
     ) ?>
 
     <div id="product_composite_configure_confirmed" class="product_composite_configure_confirmed"></div>
-    <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-        'display:none;',
-        '.product_composite_configure_confirmed:last-of-type'
-    ) ?>
 
     <?php $scriptString = <<<script
+        prodCompConfIframe = document.querySelector("iframe[name='product_composite_configure_iframe']:last-of-type");
+        prodCompConfIframe.style.width = 0;
+        prodCompConfIframe.style.height = 0;
+        prodCompConfIframe.style.border = "0px solid #fff";
+        prodCompConfIframe.style.position = "absolute";
+        prodCompConfIframe.style.top = "-1000px";
+        prodCompConfIframe.style.left = "-1000px";
+        document.querySelector(".product_composite_configure_messages:last-of-type").style.display = "none";
+        document.querySelector(".product_composite_configure_form_additional:last-of-type").style.display = "none";
+        document.querySelector(".product_composite_configure_form_confirmed:last-of-type").style.display = "none";
+        document.querySelector(".product_composite_configure_confirmed:last-of-type").style.display = "none";
+        document.querySelector(".product-configure-popup:last-of-type").style.display = "none";
+
         require([
             "jquery",
             "mage/mage"
@@ -69,8 +62,3 @@ script;
     ?>
     <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false); ?>
 </div>
-<?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-    'display:none',
-    '.product-configure-popup:last-of-type'
-) ?>
-

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

@@ -18,6 +18,8 @@ $enableLazyLoadingWithoutBorders = (bool)$block->getVar(
     'enable_lazy_loading_for_images_without_borders',
     'Magento_Catalog'
 );
+$width = (int)$block->getWidth();
+$padding = $block->getRatio() * 100;
 ?>
 <span class="product-image-container" id="product-image-container-<?= /* @noEscape */ $block->getProductId() ?>">
     <span class="product-image-wrapper">
@@ -36,11 +38,10 @@ $enableLazyLoadingWithoutBorders = (bool)$block->getVar(
             <?php endif; ?>
             alt="<?= $escaper->escapeHtmlAttr($block->getLabel()) ?>"/></span>
 </span>
-<?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-    'width:' . (int)$block->getWidth() . 'px;',
-    '#product-image-container-' . $block->getProductId()
-) ?>
-<?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-    'padding-bottom: '. ($block->getRatio() * 100) . '%;',
-    '#product-image-container-' . $block->getProductId() . ' span.product-image-wrapper'
-) ?>
+<?php
+$script = <<<SCRIPT
+document.querySelector('#product-image-container-{$block->getProductId()}').style.width = '{$width}px';
+document.querySelector('#product-image-container-{$block->getProductId()} span.product-image-wrapper').style.paddingBottom = '{$padding}%'
+SCRIPT;
+echo /* @noEscape */$secureRenderer->renderTag('script', ['type' => 'text/javascript'], $script, false);
+?>

app/code/Magento/Customer/Block/Adminhtml/Edit/Renderer/Region.php

@@ -74,9 +74,8 @@ public function render(\Magento\Framework\Data\Form\Element\AbstractElement $ele
             '" class="select required-entry admin__control-select">';
         $html .= '<option value="">' . __('Please select') . '</option>';
         $html .= '</select>';
-        $html .= $this->secureRenderer->renderStyleAsTag("display:none", '#region');
 
-        $scriptString = "\n";
+        $scriptString = "\ndocument.querySelector('#$selectId').style.display = 'none';\n";
         $scriptString .= 'require(["prototype", "mage/adminhtml/form"], function(){';
         $scriptString .= '$("' . $selectId . '").setAttribute("defaultValue", "' . $regionId . '");' . "\n";
         $scriptString .= 'new regionUpdater("' .

app/code/Magento/Customer/Block/Adminhtml/Grid/Renderer/Multiaction.php

@@ -85,7 +85,7 @@ protected function _toLinkHtml($action, \Magento\Framework\DataObject $row)
 
         if (isset($action['process']) && $action['process'] == 'configurable') {
             if ($product->canConfigure()) {
-                $id = 'id' .$this->random->getRandomString(32);
+                $id = 'id' .$this->random->getRandomString(10);
                 $onClick = sprintf('return %s.configureItem(%s)', $action['control_object'], $row->getId());
                 return sprintf(
                     '<a href="%s" id="%s" class="configure-item-link">%s</a>%s',

app/code/Magento/Customer/view/frontend/templates/account/authentication-popup.phtml

@@ -7,7 +7,7 @@
 /** @var \Magento\Customer\Block\Account\AuthenticationPopup $block */
 /** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
 ?>
-<div id="authenticationPopup" data-bind="scope:'authenticationPopup'">
+<div id="authenticationPopup" data-bind="scope:'authenticationPopup', style: {display: 'none'}">
     <?php $scriptString = 'window.authenticationPopup = ' . /* @noEscape */ $block->getSerializedConfig(); ?>
     <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false); ?>;
     <!-- ko template: getTemplate() --><!-- /ko -->
@@ -24,4 +24,3 @@
         }
     </script>
 </div>
-<?= /* @noEscape */ $secureRenderer->renderStyleAsTag('display:none', '#authenticationPopup'); ?>

app/code/Magento/Integration/Block/Adminhtml/Widget/Grid/Column/Renderer/Button.php

@@ -53,7 +53,7 @@ public function __construct(
     public function render(DataObject $row)
     {
         $attributes = $this->extractAttributes($row);
-        $attributes['button-renderer-hook-id'] = 'hook' .$this->random->getRandomString(32);
+        $attributes['button-renderer-hook-id'] = 'hook' .$this->random->getRandomString(10);
 
         return sprintf('<button %s>%s</button>', $this->renderAttributes($attributes), $this->_getValue($row))
             .$this->renderSpecialAttributes($attributes);