fix: escape html for :each directive

lib/entity.js

@@ -1,5 +1,6 @@
 import { Interpreter, ClassInterpreter } from './generators/interpreter';
 import { Lexer } from './generators/lexer';
+import { escapeHTML } from './helpers/sanitize';
 
 export default class Entity {
   constructor(el) {
@@ -187,13 +188,13 @@ export default class Entity {
   }
 
   async evaluateClass() {
-    const expr = this.element.getAttribute(':class');
-    if (!expr) return;
+    const expr = this.element.getAttribute(':class')
+    if (!expr) return
 
     this.element.className = await this._interpret(expr, {
       base: this.baseClasses,
       isClass: true,
-    });
+    })
   }
 
   async evaluateLoadEvents() {
@@ -214,9 +215,10 @@ export default class Entity {
       let newHTML = ''
 
       items.forEach((item, index) => {
+        // TODO: Use the lexer to replace the variables
         newHTML += this.childClone
           .replaceAll(indexName, index)
-          .replaceAll(variable, `'${item}'`);
+          .replaceAll(variable, `'${escapeHTML(item)}'`);
       })
 
       this.element.innerHTML = newHTML

lib/helpers/sanitize.js

@@ -0,0 +1,18 @@
+/**
+ * Sanitize HTML string
+ * https://stackoverflow.com/questions/2794137/sanitizing-user-input-before-adding-it-to-the-dom-in-javascript
+ * @param {string} string
+ * @returns string
+ */
+export function escapeHTML(string) {
+  const map = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#x27;',
+    "/": '&#x2F;',
+  }
+  const reg = /[&<>"'/]/ig
+  return string.replace(reg, (match) => map[match])
+}