MC-29420: Remove event handlers from CE

Author: svitja

app/code/Magento/Backend/view/adminhtml/templates/dashboard/store/switcher.phtml

@@ -42,7 +42,7 @@
 </select>
 <?= /* @noEscape */ $secureRenderer->renderEventListenerAsTag(
     'onchange',
-    "return switchStore($('select#store_switcher');",
+    'return switchStore(this);',
     'select#store_switcher'
 ) ?>
 </p>

app/code/Magento/Backend/view/adminhtml/templates/store/switcher.phtml

@@ -17,7 +17,7 @@
                <?= /* @noEscape */ $block->getUiId() ?> />
         <?= /* @noEscape */ $secureRenderer->renderEventListenerAsTag(
             'onchange',
-            "switchScope($('#store_switcher'));",
+            'switchScope(this);',
             '#store_switcher'
         ) ?>
         <input type="hidden" name="store_group_switcher" id="store_group_switcher"
@@ -181,7 +181,7 @@ script;
                         reload();
                     },
                     cancel: function() {
-                        obj.value = \'' . $block->escapeHtml($block->getStoreId()) . '\';
+                        obj.value = \'' . $block->escapeJs($block->getStoreId()) . '\';
                     }
                 }
             });

app/code/Magento/Backend/view/adminhtml/templates/system/cache/edit.phtml

@@ -70,7 +70,7 @@ script;
                                     <?= /* @noEscape */ $secureRenderer->renderEventListenerAsTag(
                                         'onclick',
                                         /* @noEscape */ $clickAction,
-                                        '#' . $block->escapeHtmlAttr($_button['name'])
+                                        '#' . $block->escapeJs($_button['name'])
                                     ) ?>
                                 <?php endif; ?>
                                 <?php if (isset($_button['comment'])): ?> <br />

app/code/Magento/Catalog/Block/Adminhtml/Product/Helper/Form/Config.php

@@ -11,10 +11,10 @@
  */
 namespace Magento\Catalog\Block\Adminhtml\Product\Helper\Form;
 
+use Magento\Framework\App\ObjectManager;
 use Magento\Framework\Data\Form\Element\CollectionFactory;
 use Magento\Framework\Data\Form\Element\Factory;
 use Magento\Framework\Escaper;
-use Magento\Framework\Math\Random;
 use Magento\Framework\View\Helper\SecureHtmlRenderer;
 
 class Config extends \Magento\Framework\Data\Form\Element\Select
@@ -24,6 +24,25 @@ class Config extends \Magento\Framework\Data\Form\Element\Select
      */
     private $secureRenderer;
 
+    /**
+     * @param Factory $factoryElement
+     * @param CollectionFactory $factoryCollection
+     * @param Escaper $escaper
+     * @param array $data
+     * @param SecureHtmlRenderer|null $secureRenderer
+     */
+    public function __construct(
+        Factory $factoryElement,
+        CollectionFactory $factoryCollection,
+        Escaper $escaper,
+        $data = [],
+        ?SecureHtmlRenderer $secureRenderer = null
+    ) {
+        $secureRenderer = $secureRenderer ?? ObjectManager::getInstance()->get(SecureHtmlRenderer::class);
+        parent::__construct($factoryElement, $factoryCollection, $escaper, $data, $secureRenderer);
+        $this->secureRenderer = $secureRenderer;
+    }
+
     /**
      * Retrieve element html
      *

app/code/Magento/Catalog/Block/Adminhtml/Product/Helper/Form/Image.php

@@ -11,9 +11,9 @@
  */
 namespace Magento\Catalog\Block\Adminhtml\Product\Helper\Form;
 
+use Magento\Framework\App\ObjectManager;
 use Magento\Framework\Data\Form\Element\CollectionFactory;
 use Magento\Framework\Data\Form\Element\Factory;
-use Magento\Framework\Math\Random;
 use Magento\Framework\UrlInterface;
 use Magento\Framework\View\Helper\SecureHtmlRenderer;
 
@@ -24,6 +24,27 @@ class Image extends \Magento\Framework\Data\Form\Element\Image
      */
     private $secureRenderer;
 
+    /**
+     * @param Factory $factoryElement
+     * @param CollectionFactory $factoryCollection
+     * @param \Magento\Framework\Escaper $escaper
+     * @param UrlInterface $urlBuilder
+     * @param array $data
+     * @param SecureHtmlRenderer|null $secureRenderer
+     */
+    public function __construct(
+        Factory $factoryElement,
+        CollectionFactory $factoryCollection,
+        \Magento\Framework\Escaper $escaper,
+        UrlInterface $urlBuilder,
+        $data = [],
+        ?SecureHtmlRenderer $secureRenderer = null
+    ) {
+        $secureRenderer = $secureRenderer ?? ObjectManager::getInstance()->get(SecureHtmlRenderer::class);
+        parent::__construct($factoryElement, $factoryCollection, $escaper, $urlBuilder, $data, $secureRenderer);
+        $this->secureRenderer = $secureRenderer;
+    }
+
     /**
      * Return generated url.
      *

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

@@ -23,7 +23,7 @@
             alt="<?= $escaper->escapeHtmlAttr($block->getLabel()) ?>"/></span>
 </span>
 <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
-    'width:' . (int)$escaper->escapeHtmlAttr($block->getWidth()) . 'px;',
+    'width:' . (int)$block->getWidth() . 'px;',
     'span.product-image-container'
 ) ?>
 <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(

app/code/Magento/Config/Block/System/Config/Form/Field/Select/Allowspecific.php

@@ -11,8 +11,40 @@
  */
 namespace Magento\Config\Block\System\Config\Form\Field\Select;
 
+use Magento\Framework\App\ObjectManager;
+use Magento\Framework\Data\Form\Element\CollectionFactory;
+use Magento\Framework\Data\Form\Element\Factory;
+use Magento\Framework\Escaper;
+use Magento\Framework\Math\Random;
+use Magento\Framework\View\Helper\SecureHtmlRenderer;
+
 class Allowspecific extends \Magento\Framework\Data\Form\Element\Select
 {
+    /**
+     * @var SecureHtmlRenderer
+     */
+    private $secureRenderer;
+
+    /**
+     * Allowspecific constructor.
+     * @param Factory $factoryElement
+     * @param CollectionFactory $factoryCollection
+     * @param Escaper $escaper
+     * @param array $data
+     * @param SecureHtmlRenderer|null $secureRenderer
+     */
+    public function __construct(
+        Factory $factoryElement,
+        CollectionFactory $factoryCollection,
+        Escaper $escaper,
+        $data = [],
+        ?SecureHtmlRenderer $secureRenderer = null
+    ) {
+        $secureRenderer = $secureRenderer ?? ObjectManager::getInstance()->get(SecureHtmlRenderer::class);
+        parent::__construct($factoryElement, $factoryCollection, $escaper, $data, $secureRenderer);
+        $this->secureRenderer = $secureRenderer;
+    }
+
     /**
      * Add additional Javascript code
      *
@@ -25,7 +57,6 @@ public function getAfterElementHtml()
         $useDefaultElementId = $countryListId . '_inherit';
 
         $elementJavaScript = <<<HTML
-<script type="text/javascript">
 //<![CDATA[
 document.getElementById('{$elementId}').addEventListener('change', function(event) {
     var isCountrySpecific = event.target.value == 1,
@@ -42,13 +73,15 @@ public function getAfterElementHtml()
     }
 });
 //]]>
-</script>
 HTML;
 
-        return $elementJavaScript . parent::getAfterElementHtml();
+        return $this->secureRenderer->renderTag('script', [], $elementJavaScript, false) .
+            parent::getAfterElementHtml();
     }
 
     /**
+     * Return generated html.
+     *
      * @return string
      */
     public function getHtml()
@@ -61,6 +94,8 @@ public function getHtml()
     }
 
     /**
+     * Return country specific element id.
+     *
      * @return string
      */
     protected function _getSpecificCountryElementId()

app/code/Magento/Config/view/adminhtml/templates/system/config/form/field/array.phtml

@@ -54,6 +54,7 @@ $_colspan = $block->isAddAfter() ? 2 : 1;
 script;
     foreach ($block->getColumns() as $columnName => $column):
         $scriptString .= <<<script
+
                         + '<td>'
                         + '{$block->escapeJs($block->renderCellTemplate($columnName))}'
                         + '<\/td>'
@@ -62,17 +63,29 @@ script;
 
     if ($block->isAddAfter()):
         $scriptString .= <<<script
+
                         + '<td><button class="action-add" type="button" id="addAfterBtn<%- _id %>"><span>'
                         + '{$block->escapeJs(__('Add after'))}'
                         + '<\/span><\/button><\/td>'
 script;
     endif;
     $scriptString .= <<<script
+
                     + '<td class="col-actions"><button '
-                    + 'onclick="arrayRow{$block->escapeJs($_htmlId)}.del(\'<%- _id %>\')" '
                     + 'class="action-delete" type="button">'
                     + '<span>{$block->escapeJs(__('Delete'))}<\/span><\/button><\/td>'
                     + '<\/tr>'
+
+script;
+    $scriptString1 = /* $noEscape */ $secureRenderer->renderEventListenerAsTag(
+        'onclick',
+        "arrayRow" . $block->escapeJs($_htmlId) . ".del('<%- _id %>')",
+        "tr#<%- _id %> button.action-delete"
+    );
+
+    $scriptString .= " + '" . $block->escapeJs($scriptString1) . "'" . PHP_EOL;
+
+    $scriptString .= <<<script
             ),
 
             add: function(rowData, insertAfterId) {
@@ -88,11 +101,13 @@ script;
 script;
     foreach ($block->getColumns() as $columnName => $column):
         $scriptString .= <<<script
+
                             {$block->escapeJs($columnName)}: '',
                                 'option_extra_attrs': {},
 script;
     endforeach;
     $scriptString .= <<<script
+
                         _id: '_' + d.getTime() + '_' + d.getMilliseconds()
                 };
             }
@@ -115,13 +130,17 @@ script;
             }
 
             // Add event for {addAfterBtn} button
+
 script;
     if ($block->isAddAfter()):
         $scriptString .= <<<script
+
             Event.observe('addAfterBtn' + templateValues._id, 'click', this.add.bind(this, false, templateValues._id));
+
 script;
     endif;
     $scriptString .= <<<script
+
             },
 
             del: function(rowId) {
@@ -138,19 +157,25 @@ script;
         );
 
         // add existing rows
+
 script;
+
     foreach ($block->getArrayRows() as $_rowId => $_row) {
-        echo /** @noEscape */ "arrayRow{$block->escapeJs($_htmlId)}.add(" . /** @noEscape */ $_row->toJson() . ");\n";
+        $scriptString .= /** @noEscape */ " arrayRow" .$block->escapeJs($_htmlId) .
+            ".add(" . /** @noEscape */ $_row->toJson() . ");\n";
     }
     $scriptString .= <<<script
+
         // Toggle the grid availability, if element is disabled (depending on scope)
 script;
     if ($block->getElement()->getDisabled()):
         $scriptString .= <<<script
+
         toggleValueElements({checked: true}, $('grid{$block->escapeJs($_htmlId)}').parentNode);
 script;
     endif;
     $scriptString .= <<<script
+
         });
 script;
     ?>

app/code/Magento/Customer/view/adminhtml/templates/system/config/validatevat.phtml

@@ -68,5 +68,5 @@ script;
 <?= /* @noEscape */ $secureRenderer->renderEventListenerAsTag(
     'onclick',
     'javascript:validateVat(); return false;',
-    '#' . $htmlId
+    '#' . /* @noEscape */ $block->getHtmlId()
 ); ?>

app/code/Magento/Integration/view/adminhtml/templates/integration/activate/permissions/tab/webapi.phtml

@@ -7,20 +7,25 @@
  *
  * @var \Magento\Integration\Block\Adminhtml\Integration\Activate\Permissions\Tab\Webapi $block
  */
+
+/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
 ?>
 <fieldset class="admin__fieldset form-inline entry-edit">
-    <?php if ($block->isTreeEmpty()) : ?>
+    <?php if ($block->isTreeEmpty()): ?>
         <p class="empty"><?= $block->escapeHtml(__('No permissions requested')) ?></p>
-    <?php else : ?>
+    <?php else: ?>
         <div class="field" data-role="tree-resources-container">
             <div class="control">
                 <div id="resource-tree" class="tree x-tree" data-role="resource-tree"></div>
             </div>
         </div>
     <?php endif ?>
 </fieldset>
-<?php if (!$block->isTreeEmpty()) : ?>
-    <script>
+<?php
+if (!$block->isTreeEmpty()):
+    $treeJson = /* @noEscape */ $block->getResourcesTreeJson();
+    $selectedJson = /* @noEscape */ $block->getSelectedResourcesJson();
+    $scriptString = <<<script
         require(["jquery", "Magento_User/js/roles-tree"], function($){
             $.widget('mage.rolesTree', $.mage.rolesTree, {
                 _checkNode: function(event) {},
@@ -32,9 +37,11 @@
             });
 
             $('[data-role="resource-tree"]').rolesTree({
-                'treeInitData': <?= /* @noEscape */ $block->getResourcesTreeJson() ?>,
-                'treeInitSelectedData': <?= /* @noEscape */ $block->getSelectedResourcesJson() ?>
+                'treeInitData': {$treeJson},
+                'treeInitSelectedData': {$selectedJson}
             });
         });
-    </script>
+script;
+    ?>
+    <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>
 <?php endif ?>