From ded59bec276abb3611432d789445095295cde557 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Wed, 6 Dec 2023 08:47:28 +0100
Subject: [PATCH] fix(front): fix XSS because of bad operations when setting
 the group's summary

Group summary (HTML) is properly sanitized by the backend, but for groups we did a special operation
before setting the HTML in the Vue app. This is now removed

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 src/components/Group/GroupCard.vue       | 5 +----
 src/components/Group/GroupMemberCard.vue | 5 ++---
 src/utils/html.ts                        | 9 ---------
 3 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/components/Group/GroupCard.vue b/src/components/Group/GroupCard.vue
index 7ef9c2ed3..9b5151fc4 100644
--- a/src/components/Group/GroupCard.vue
+++ b/src/components/Group/GroupCard.vue
@@ -40,7 +40,7 @@
       <div
         class="mb-2 line-clamp-3"
         dir="auto"
-        v-html="saneSummary"
+        v-html="group.summary"
         v-if="showSummary"
       />
       <div>
@@ -91,7 +91,6 @@ import { addressFullName } from "@/types/address.model";
 import { useI18n } from "vue-i18n";
 import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
 import Account from "vue-material-design-icons/Account.vue";
-import { htmlToText } from "@/utils/html";
 import { computed } from "vue";
 import LinkOrRouterLink from "../core/LinkOrRouterLink.vue";
 
@@ -108,8 +107,6 @@ const props = withDefaults(
 
 const { t } = useI18n({ useScope: "global" });
 
-const saneSummary = computed(() => htmlToText(props.group.summary ?? ""));
-
 const isInternal = computed(() => {
   return props.isRemoteGroup && props.isLoggedIn === false;
 });
diff --git a/src/components/Group/GroupMemberCard.vue b/src/components/Group/GroupMemberCard.vue
index 3693e38f9..8a3aa3f54 100644
--- a/src/components/Group/GroupMemberCard.vue
+++ b/src/components/Group/GroupMemberCard.vue
@@ -60,9 +60,9 @@
           </div>
         </div>
         <div
-          class="mt-3 prose dark:prose-invert lg:prose-xl line-clamp-2"
+          class="mt-3 prose dark:prose-invert lg:prose-xl prose-p:m-0 line-clamp-2"
           v-if="member.parent.summary"
-          v-html="htmlToText(member.parent.summary)"
+          v-html="member.parent.summary"
         />
       </div>
       <div>
@@ -95,7 +95,6 @@ import DotsHorizontal from "vue-material-design-icons/DotsHorizontal.vue";
 import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 import Tag from "@/components/TagElement.vue";
-import { htmlToText } from "@/utils/html";
 import { useI18n } from "vue-i18n";
 
 defineProps<{
diff --git a/src/utils/html.ts b/src/utils/html.ts
index e1baac0b8..084970f70 100644
--- a/src/utils/html.ts
+++ b/src/utils/html.ts
@@ -2,15 +2,6 @@ export function nl2br(text: string): string {
   return text.replace(/(?:\r\n|\r|\n)/g, "<br>");
 }
 
-export function htmlToText(html: string) {
-  const template = document.createElement("template");
-  const trimmedHTML = html.trim();
-  template.innerHTML = trimmedHTML;
-  const text = template.content.textContent;
-  template.remove();
-  return text;
-}
-
 export const getValueFromMeta = (name: string): string | null => {
   const element = document.querySelector(`meta[name="${name}"]`);
   if (element && element.getAttribute("content")) {