Fixes ansi-to-html bug and adds safe handling of raw log text in DOM (#…

…14)

* Replaced `ansi-html-community` library with `ansi-to-html` to convert
ansi encodings in log messages to html (#4)
* Changed method of adding log messages to DOM from `innerHTML` to
`textContent` to protect against injection attacks

frontend/package.json

@@ -16,7 +16,8 @@
     "@apollo/client": "^3.9.4",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
-    "ansi-html-community": "^0.0.8",
+    "ansi-regex": "^6.0.1",
+    "ansi-to-html": "^0.7.2",
     "async-mutex": "^0.4.1",
     "clsx": "^2.1.0",
     "date-fns": "^2.30.0",

frontend/src/pages/console.tsx

@@ -12,10 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-// @ts-ignore
-import ansiHtml from 'ansi-html-community';
-
 import { PlusCircleIcon, TrashIcon } from '@heroicons/react/24/solid';
+import ConvertAnsi from 'ansi-to-html';
+import makeAnsiRegex from 'ansi-regex';
 import { addMinutes, addHours, addDays, addWeeks, addMonths, parse, isValid } from 'date-fns';
 import { format, utcToZonedTime } from 'date-fns-tz';
 import type { OptionsWithTZ } from 'date-fns-tz';
@@ -54,6 +53,9 @@ import { Counter, MapSet, cssEncode, intersectSets, getBasename, joinPaths } fro
 import { cn } from '@/lib/utils';
 import { allWorkloads, iconMap, labelsPMap } from '@/lib/workload';
 
+const convertAnsi = new ConvertAnsi({ escapeXML: true });
+const ansiRegex = makeAnsiRegex({onlyFirst: true});
+
 enum DurationUnit {
   Minutes = 'minutes',
   Hours = 'hours',
@@ -1126,13 +1128,13 @@ const Console = () => {
     msgEl.className = 'w-auto font-medium whitespace-nowrap col_message';
 
     // apply ansi color coding
-    let msgHtml = ansiHtml(record.message) as string;
-    if (msgHtml === record.message) {
-      msgEl.style['color'] = `var(--${k}-color)`;
+    if (ansiRegex.test(record.message)) {
+      const prefixHtml = `<div class="inline-block w-[8px] h-[8px] rounded-full mr-[5px]" style="background-color:var(--${k}-color);"></div>`;
+      msgEl.innerHTML = prefixHtml + convertAnsi.toHtml(record.message);
     } else {
-      msgHtml = `<div class="inline-block w-[8px] h-[8px] rounded-full mr-[5px]" style="background-color:var(--${k}-color);"></div>` + msgHtml;
+      msgEl.style['color'] = `var(--${k}-color)`;
+      msgEl.textContent = record.message;
     }
-    msgEl.innerHTML = msgHtml;
     rowEl.appendChild(msgEl);
 
     contentElRef.current?.appendChild(rowEl);