From d264f459797b88ca876ff715be3c3b99cf99175f Mon Sep 17 00:00:00 2001
From: andrigamerita <37557992+andrigamerita@users.noreply.github.com>
Date: Fri, 19 Jul 2024 02:32:58 +0200
Subject: [PATCH] fix: code blocks of unknown languages cause HTML injection
 (#3711)

* fix: code blocks of unknown languages cause HTML injection

A code block of unknown language (that is, a language not treated as special by Memos and not handled by highlight.js) should fall back on rendering its plaintext content. However, the content is never properly escaped before it is appended to the DOM, and thus any string that happens to contain HTML is unsafely rendered. This commit fixes the issue by ensuring that, when none of the previous cases handle the text, any HTML entities are escaped first.

* Update CodeBlock.tsx to conform to eslint
---
 web/src/components/MemoContent/CodeBlock.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/components/MemoContent/CodeBlock.tsx b/web/src/components/MemoContent/CodeBlock.tsx
index e96838eb..d9177a5d 100644
--- a/web/src/components/MemoContent/CodeBlock.tsx
+++ b/web/src/components/MemoContent/CodeBlock.tsx
@@ -42,7 +42,10 @@ const CodeBlock: React.FC<Props> = ({ language, content }: Props) => {
       // Skip error and use default highlighted code.
     }
 
-    return content;
+    // escape any HTML entities when rendering original content
+    return Object.assign(document.createElement("span"), {
+      textContent: content,
+    }).innerHTML;
   }, [formatedLanguage, content]);
 
   const handleCopyButtonClick = useCallback(() => {