From a3e1619635cec683eea806e18c870fd6d963b986 Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Wed, 29 Jan 2025 19:02:54 +0100
Subject: [PATCH] fix: hyperlinks html entities (#9063)

---
 packages/excalidraw/data/url.test.tsx     |  4 ++--
 packages/excalidraw/data/url.ts           |  4 ++--
 packages/excalidraw/element/embeddable.ts | 12 ++++--------
 packages/excalidraw/tests/utils.test.ts   |  8 +-------
 packages/excalidraw/utils.ts              | 17 ++++++-----------
 5 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/packages/excalidraw/data/url.test.tsx b/packages/excalidraw/data/url.test.tsx
index e0e07797dd..9a40aad048 100644
--- a/packages/excalidraw/data/url.test.tsx
+++ b/packages/excalidraw/data/url.test.tsx
@@ -25,7 +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("&lt;test&gt;");
-    expect(normalizeLink("test&")).toBe("test&amp;");
+    expect(normalizeLink("<test>")).toBe("<test>");
+    expect(normalizeLink("test&")).toBe("test&");
   });
 });
diff --git a/packages/excalidraw/data/url.ts b/packages/excalidraw/data/url.ts
index e0c7323db1..2ab553bb8f 100644
--- a/packages/excalidraw/data/url.ts
+++ b/packages/excalidraw/data/url.ts
@@ -1,12 +1,12 @@
 import { sanitizeUrl } from "@braintree/sanitize-url";
-import { sanitizeHTMLAttribute } from "../utils";
+import { escapeDoubleQuotes } from "../utils";
 
 export const normalizeLink = (link: string) => {
   link = link.trim();
   if (!link) {
     return link;
   }
-  return sanitizeUrl(sanitizeHTMLAttribute(link));
+  return sanitizeUrl(escapeDoubleQuotes(link));
 };
 
 export const isLocalLink = (link: string | null) => {
diff --git a/packages/excalidraw/element/embeddable.ts b/packages/excalidraw/element/embeddable.ts
index 0948d4b520..b83953c2f8 100644
--- a/packages/excalidraw/element/embeddable.ts
+++ b/packages/excalidraw/element/embeddable.ts
@@ -1,11 +1,7 @@
 import { register } from "../actions/register";
 import { FONT_FAMILY, VERTICAL_ALIGN } from "../constants";
 import type { ExcalidrawProps } from "../types";
-import {
-  getFontString,
-  sanitizeHTMLAttribute,
-  updateActiveTool,
-} from "../utils";
+import { escapeDoubleQuotes, getFontString, updateActiveTool } from "../utils";
 import { setCursorForShape } from "../cursor";
 import { newTextElement } from "./newElement";
 import { wrapText } from "./textWrapping";
@@ -212,7 +208,7 @@ export const getEmbedLink = (
     // Note that we don't attempt to parse the username as it can consist of
     // non-latin1 characters, and the username in the url can be set to anything
     // without affecting the embed.
-    const safeURL = sanitizeHTMLAttribute(
+    const safeURL = escapeDoubleQuotes(
       `https://twitter.com/x/status/${postId}`,
     );
 
@@ -231,7 +227,7 @@ export const getEmbedLink = (
 
   if (RE_REDDIT.test(link)) {
     const [, page, postId, title] = link.match(RE_REDDIT)!;
-    const safeURL = sanitizeHTMLAttribute(
+    const safeURL = escapeDoubleQuotes(
       `https://reddit.com/r/${page}/comments/${postId}/${title}`,
     );
     const ret: IframeDataWithSandbox = {
@@ -249,7 +245,7 @@ export const getEmbedLink = (
 
   if (RE_GH_GIST.test(link)) {
     const [, user, gistId] = link.match(RE_GH_GIST)!;
-    const safeURL = sanitizeHTMLAttribute(
+    const safeURL = escapeDoubleQuotes(
       `https://gist.github.com/${user}/${gistId}`,
     );
     const ret: IframeDataWithSandbox = {
diff --git a/packages/excalidraw/tests/utils.test.ts b/packages/excalidraw/tests/utils.test.ts
index 3663973c38..34944faaa0 100644
--- a/packages/excalidraw/tests/utils.test.ts
+++ b/packages/excalidraw/tests/utils.test.ts
@@ -1,4 +1,4 @@
-import { isTransparent, sanitizeHTMLAttribute } from "../utils";
+import { isTransparent } from "../utils";
 
 describe("Test isTransparent", () => {
   it("should return true when color is rgb transparent", () => {
@@ -11,9 +11,3 @@ describe("Test isTransparent", () => {
     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;");
-  });
-});
diff --git a/packages/excalidraw/utils.ts b/packages/excalidraw/utils.ts
index 1c1cdc1494..e30c67ff68 100644
--- a/packages/excalidraw/utils.ts
+++ b/packages/excalidraw/utils.ts
@@ -1226,15 +1226,10 @@ 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;")
-  );
+/**
+ * use when you need to render unsafe string as HTML attribute, but MAKE SURE
+ * the attribute is double-quoted when constructing the HTML string
+ */
+export const escapeDoubleQuotes = (str: string) => {
+  return str.replace(/"/g, "&quot;");
 };