feat: make HTML attribute sanitization stricter (#8977)

* feat: make HTML attribute sanitization stricter

* fix double escape

packages/excalidraw/data/url.test.tsx

@@ -25,6 +25,7 @@ describe("normalizeLink", () => {
     expect(normalizeLink("file://")).toBe("file://");
     expect(normalizeLink("[test](https://test)")).toBe("[test](https://test)");
     expect(normalizeLink("[[test]]")).toBe("[[test]]");
-    expect(normalizeLink("<test>")).toBe("<test>");
+    expect(normalizeLink("<test>")).toBe("&lt;test&gt;");
+    expect(normalizeLink("test&")).toBe("test&amp;");
   });
 });

packages/excalidraw/data/url.ts

@@ -1,8 +1,5 @@
 import { sanitizeUrl } from "@braintree/sanitize-url";
-
-export const sanitizeHTMLAttribute = (html: string) => {
-  return html.replace(/"/g, """);
-};
+import { sanitizeHTMLAttribute } from "../utils";
 
 export const normalizeLink = (link: string) => {
   link = link.trim();

packages/excalidraw/element/embeddable.ts

@@ -1,7 +1,11 @@
 import { register } from "../actions/register";
 import { FONT_FAMILY, VERTICAL_ALIGN } from "../constants";
 import type { ExcalidrawProps } from "../types";
-import { getFontString, updateActiveTool } from "../utils";
+import {
+  getFontString,
+  sanitizeHTMLAttribute,
+  updateActiveTool,
+} from "../utils";
 import { setCursorForShape } from "../cursor";
 import { newTextElement } from "./newElement";
 import { wrapText } from "./textWrapping";
@@ -11,7 +15,6 @@ import type {
   ExcalidrawIframeLikeElement,
   IframeData,
 } from "./types";
-import { sanitizeHTMLAttribute } from "../data/url";
 import type { MarkRequired } from "../utility-types";
 import { StoreAction } from "../store";
 

packages/excalidraw/tests/utils.test.ts

@@ -1,13 +1,19 @@
-import * as utils from "../utils";
+import { isTransparent, sanitizeHTMLAttribute } from "../utils";
 
 describe("Test isTransparent", () => {
   it("should return true when color is rgb transparent", () => {
-    expect(utils.isTransparent("#ff00")).toEqual(true);
-    expect(utils.isTransparent("#fff00000")).toEqual(true);
-    expect(utils.isTransparent("transparent")).toEqual(true);
+    expect(isTransparent("#ff00")).toEqual(true);
+    expect(isTransparent("#fff00000")).toEqual(true);
+    expect(isTransparent("transparent")).toEqual(true);
   });
 
   it("should return false when color is not transparent", () => {
-    expect(utils.isTransparent("#ced4da")).toEqual(false);
+    expect(isTransparent("#ced4da")).toEqual(false);
+  });
+});
+
+describe("sanitizeHTMLAttribute()", () => {
+  it("should escape HTML attribute special characters & not double escape", () => {
+    expect(sanitizeHTMLAttribute(`&"'><`)).toBe("&amp;&quot;&#39;&gt;&lt;");
   });
 });

packages/excalidraw/utils.ts

@@ -1225,3 +1225,16 @@ export class PromisePool<T> {
     });
   }
 }
+
+export const sanitizeHTMLAttribute = (html: string) => {
+  return (
+    html
+      // note, if we're not doing stupid things, escaping " is enough,
+      // but we might end up doing stupid things
+      .replace(/&/g, "&amp;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#39;")
+      .replace(/>/g, "&gt;")
+      .replace(/</g, "&lt;")
+  );
+};