Merge pull request #845 from modos189/fix/issue-844

fix: RegionScore tooltip rendering by adding selective escaping

Author: modos189

core/code/utils.js

@@ -303,17 +303,38 @@ const escapeJS = function (str) {
  * @memberof IITC.utils
  * @function escapeHtml
  * @param {string} str - The string to escape.
+ * @param {string[]} [allowedTags] - Optional array of allowed HTML tags that should not be escaped.
  * @returns {string} The escaped string.
  */
-const escapeHtml = function (str) {
+const escapeHtml = function (str, allowedTags = []) {
   const escapeMap = {
     '&': '&',
     '<': '&lt;',
     '>': '&gt;',
     '"': '&quot;',
     "'": '&#39;',
   };
-  return str.replace(/[&<>"']/g, (char) => escapeMap[char]);
+
+  if (allowedTags.length === 0) {
+    return str.replace(/[&<>"']/g, (char) => escapeMap[char]);
+  }
+
+  // Create pattern for allowed tags (self-closing and paired)
+  const allowedTagsPattern = new RegExp(`(<\\/?(?:${allowedTags.join('|')})>)`, 'g');
+
+  // Split text by allowed tags to preserve them
+  const parts = str.split(allowedTagsPattern);
+
+  return parts
+    .map((part) => {
+      // If part matches allowed tags pattern, keep as is
+      if (allowedTagsPattern.test(part)) {
+        return part;
+      }
+      // Otherwise, escape HTML
+      return part.replace(/[&<>"']/g, (char) => escapeMap[char]);
+    })
+    .join('');
 };
 
 /**
@@ -387,7 +408,7 @@ const textToTable = function (text) {
   for (const row of rows) {
     let rowHtml = '<tr>';
     for (let k = 0; k < row.length; k++) {
-      const cell = IITC.utils.escapeHtml(row[k]);
+      const cell = IITC.utils.escapeHtml(row[k], ['hr', 'br', 'b', 'i', 'strong', 'em']);
       const colspan = k === 0 && row.length < columnCount ? ` colspan="${columnCount - row.length + 1}"` : '';
       rowHtml += `<td${colspan}>${cell}</td>`;
     }

test/utils.spec.js

@@ -453,6 +453,26 @@ describe('IITC.utils.escapeHtml', () => {
     const result = IITC.utils.escapeHtml('No special chars');
     expect(result).to.equal('No special chars');
   });
+
+  it('should preserve allowed tags when provided', () => {
+    const result = IITC.utils.escapeHtml('<b>Bold</b> and <script>alert("XSS")</script>', ['b']);
+    expect(result).to.equal('<b>Bold</b> and &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;');
+  });
+
+  it('should preserve multiple allowed tags', () => {
+    const result = IITC.utils.escapeHtml('<b>Bold</b>, <i>Italic</i>, and <script>alert("XSS")</script>', ['b', 'i']);
+    expect(result).to.equal('<b>Bold</b>, <i>Italic</i>, and &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;');
+  });
+
+  it('should preserve self-closing tags like <hr>', () => {
+    const result = IITC.utils.escapeHtml('Text <hr> and <script>alert("XSS")</script>', ['hr']);
+    expect(result).to.equal('Text <hr> and &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;');
+  });
+
+  it('should preserve closing tags correctly', () => {
+    const result = IITC.utils.escapeHtml('<strong>Strong</strong> and <div>unsafe</div>', ['strong']);
+    expect(result).to.equal('<strong>Strong</strong> and &lt;div&gt;unsafe&lt;/div&gt;');
+  });
 });
 
 describe('IITC.utils.prettyEnergy', () => {