Forbid HTML injection using jQuery (#29843)

See
https://github.com/wikimedia/eslint-plugin-no-jquery/blob/master/docs/rules/no-append-html.md

Tested the following components and they work as before:
- notification table
- issue author dropdown
- comment edit box attachments div

Signed-off-by: Yarden Shoham <[email protected]>
Co-authored-by: Giteabot <[email protected]>

Author: yardenshoham

.eslintrc.yaml

@@ -400,7 +400,7 @@ rules:
   no-jquery/no-and-self: [2]
   no-jquery/no-animate-toggle: [2]
   no-jquery/no-animate: [2]
-  no-jquery/no-append-html: [0]
+  no-jquery/no-append-html: [2]
   no-jquery/no-attr: [0]
   no-jquery/no-bind: [2]
   no-jquery/no-box-model: [2]

web_src/js/features/notification.js

@@ -143,8 +143,8 @@ async function updateNotificationCountWithCallback(callback, timeout, lastCount)
 }
 
 async function updateNotificationTable() {
-  const $notificationDiv = $('#notification_div');
-  if ($notificationDiv.length > 0) {
+  const notificationDiv = document.getElementById('notification_div');
+  if (notificationDiv) {
     try {
       const params = new URLSearchParams(window.location.search);
       params.set('div-only', true);
@@ -158,7 +158,7 @@ async function updateNotificationTable() {
 
       const data = await response.text();
       if ($(data).data('sequence-number') === notificationSequenceNumber) {
-        $notificationDiv.replaceWith(data);
+        notificationDiv.outerHTML = data;
         initNotificationsTable();
       }
     } catch (error) {

web_src/js/features/repo-issue-list.js

@@ -125,7 +125,9 @@ function initRepoIssueListAuthorDropdown() {
     if (newMenuHtml) {
       const $newMenuItems = $(newMenuHtml);
       $newMenuItems.addClass('dynamic-item');
-      $menu.append('<div class="divider dynamic-item"></div>', ...$newMenuItems);
+      const div = document.createElement('div');
+      div.classList.add('divider', 'dynamic-item');
+      $menu[0].append(div, ...$newMenuItems);
     }
     $searchDropdown.dropdown('refresh');
     // defer our selection to the next tick, because dropdown will set the selection item after this `menu` function

web_src/js/features/repo-legacy.js

@@ -436,13 +436,12 @@ async function onEditContent(event) {
       const $content = $segment;
       if (!$content.find('.dropzone-attachments').length) {
         if (data.attachments !== '') {
-          $content.append(`<div class="dropzone-attachments"></div>`);
-          $content.find('.dropzone-attachments').replaceWith(data.attachments);
+          $content[0].append(data.attachments);
         }
       } else if (data.attachments === '') {
         $content.find('.dropzone-attachments').remove();
       } else {
-        $content.find('.dropzone-attachments').replaceWith(data.attachments);
+        $content.find('.dropzone-attachments')[0].outerHTML = data.attachments;
       }
       if (dz) {
         dz.emit('submit');

web_src/js/modules/fomantic/dropdown.js

@@ -72,7 +72,9 @@ function delegateOne($dropdown) {
   dropdownTemplates.menu = function(response, fields, preserveHTML, className) {
     // when the dropdown menu items are loaded from AJAX requests, the items are created dynamically
     const menuItems = dropdownTemplatesMenuOld(response, fields, preserveHTML, className);
-    const $wrapper = $('<div>').append(menuItems);
+    const div = document.createElement('div');
+    div.innerHTML = menuItems;
+    const $wrapper = $(div);
     const $items = $wrapper.find('> .item');
     $items.each((_, item) => updateMenuItem($dropdown[0], item));
     $dropdown[0][ariaPatchKey].deferredRefreshAriaActiveItem();