Fix vulnerability on unescaped HTML attributes

package.json

@@ -58,6 +58,7 @@
     "vitest": "^0.9.3"
   },
   "dependencies": {
+    "html-element-attributes": "^3.4.0",
     "html-es6cape": "^2.0.0"
   }
 }

src/index.ts

@@ -1,6 +1,12 @@
 // Inspired on http://www.2ality.com/2015/01/template-strings-html.html#comment-2078932192
 
 import escape from "html-es6cape";
+import { htmlElementAttributes } from "html-element-attributes";
+
+const attributes = Object.values(htmlElementAttributes).flat();
+function endsWithUnescapedAttribute(acc: string): boolean {
+  return attributes.some((attribute) => acc.endsWith(`${attribute}=`));
+}
 
 function htmlTemplateTag(
   literals: TemplateStringsArray,
@@ -18,6 +24,21 @@ function htmlTemplateTag(
       subst = escape(subst);
     }
 
+    /*
+     * If the interpolation is preceded by an unescaped attribute, we need to
+     * add quotes around the substitution to avoid XSS attacks.
+     *
+     * ```
+     * const foo = "Alt onload=alert(1)";
+     * html`<img src="..." alt=${foo} />`
+     *    => <img src="..." alt=Alt onload=alert(1) />
+     * ```
+     */
+    if (endsWithUnescapedAttribute(acc)) {
+      acc += '"';
+      lit = '"' + lit;
+    }
+
     return acc + subst + lit;
   });
 }

test/index.test.ts

@@ -75,4 +75,21 @@ describe("html-template-tag", () => {
       </div>`
     );
   });
+
+  it("should add quotes around alt attribute", () => {
+    const src = "https://example.com/image.jpg";
+    const alt = "Alt onload=alert(1)";
+    console.log(html`<img src="${src}" alt=${alt} />`);
+    expect(html`<img src="${src}" alt=${alt} />`).toEqual(
+      `<img src="https://example.com/image.jpg" alt="Alt onload=alert(1)" />`
+    );
+  });
+
+  it("should not add quotes around alt attribute if they are already present", () => {
+    const src = "https://example.com/image.jpg";
+    const alt = "Alt onload=alert(1)";
+    expect(html`<img src="${src}" alt="${alt}" />`).toEqual(
+      `<img src="https://example.com/image.jpg" alt="Alt onload=alert(1)" />`
+    );
+  });
 });