fix: prefilter html but warn about invalid html (#1211)

* fix: prefilter html but warn about invalid html

Closes: #1210

* chore: fix eslint errors

* chore: update nodejs-ci config

* chore: remove console.log eslint error

* fix: add testcase and fix edge case

Author: stropitek

.github/workflows/nodejs.yml

@@ -12,5 +12,6 @@ jobs:
     uses: zakodium/workflows/.github/workflows/nodejs.yml@nodejs-v1
     with:
       lint-check-types: false
-      disable-tests: true
       disable-test-package: true
+      upload-coverage: false
+      node-version-matrix: '[24]'

package-lock.json

@@ -19,7 +19,8 @@
     "prerelease": "grunt bump:prerelease",
     "prettier": "prettier --check src",
     "prettier-write": "prettier --write src",
-    "test": "npm run eslint && npm run prettier",
+    "test": "npm run eslint && npm run prettier && npm run test-only",
+    "test-only": "node --test tests/**",
     "release:minor": "npm run test && grunt bump:minor --release",
     "release:patch": "npm run test && grunt bump:patch --release"
   },
@@ -44,6 +45,7 @@
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
+    "@types/node": "^24.10.13",
     "add-stream": "^1.0.0",
     "bower": "^1.8.14",
     "conventional-changelog": "^6.0.0",
@@ -61,6 +63,7 @@
     "lodash": "^4.17.23",
     "mkpath": "^1.0.0",
     "prettier": "^3.8.1",
+    "requirejs": "^2.3.8",
     "rollup": "^4.59.0",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "tempfile": "^3.0.0",

package.json

@@ -221,10 +221,10 @@ define([
           toolbar[i].title || ''
         }">`;
         if (toolbar[i].icon) {
-          html += `<div style="color=${color}"><i src="${toolbar[i].icon}"/></div>`;
+          html += `<div style="color=${color}"><i src="${toolbar[i].icon}"></i></div>`;
         }
         if (toolbar[i].cssClass) {
-          html += `<span style="color: ${color};" class="${toolbar[i].cssClass}"/>`;
+          html += `<span style="color: ${color};" class="${toolbar[i].cssClass}"></span>`;
         }
         html += '</li>';
       }

src/modules/module.js

@@ -3,6 +3,7 @@
 define([
   'jquery',
   'lodash',
+  'src/util/jquery_prefilter',
   'src/header/header',
   'src/util/repository',
   'src/main/grid',
@@ -25,6 +26,7 @@ define([
 ], function (
   $,
   _,
+  jqueryPrefilter,
   Header,
   Repository,
   Grid,
@@ -42,6 +44,20 @@ define([
   Config,
   Sandbox,
 ) {
+  jQuery.htmlPrefilter = (preHtml) => {
+    const { warn, html } = jqueryPrefilter(preHtml);
+    if (warn) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'jQuery.htmlPrefilter modified invalid html, make sure to update your html markup',
+        {
+          before: preHtml,
+          after: html,
+        },
+      );
+    }
+    return html;
+  };
   var _viewLoaded, _dataLoaded, _modulesSet;
 
   var RepositoryData = new Repository(),

src/src/main/entrypoint.js

@@ -0,0 +1,28 @@
+'use strict';
+
+define(() => {
+  // https://jquery.com/upgrade-guide/3.5/
+  const rxhtmlTag =
+    /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^/\0>\u0020\t\r\n\f]*)[^>]*)\/>/gi;
+
+  return function jqueryPrefilter(html) {
+    // Self-closing tags are invalid except for void elements like input
+    const filteredHtml = html.replaceAll(rxhtmlTag, '<$1></$2>');
+    if (filteredHtml !== html) {
+      // Ignore svg content because it is actually XML
+      const cleanedHtml = html.replaceAll(/<svg[^>]*>(.*?)<\/svg>/g, '').trim();
+
+      const result = rxhtmlTag.exec(cleanedHtml);
+      if (cleanedHtml && result && result[0] !== cleanedHtml) {
+        return {
+          html: filteredHtml,
+          warn: true,
+        };
+      }
+    }
+    return {
+      html,
+      warn: false,
+    };
+  };
+});