fix(front-end): add more security fixes for formatted lists and notifier

- introduce html escape function
- escape message content in notifier plugin
- escape user name in ConversationListItem
- escape user name in the Event EditView contacts section
- display user summary as plain text in ActorCard

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

src/components/Account/ActorCard.vue

@@ -30,7 +30,7 @@
         <span dir="ltr">@{{ usernameWithDomain(actor) }}</span>
       </p>
       <div
-        v-if="full"
+        v-if="full && actor.type === ActorType.GROUP"
         class="only-first-child"
         :class="{
           'line-clamp-3': limit,
@@ -38,6 +38,15 @@
         }"
         v-html="actor.summary"
       />
+      <div
+        v-if="full && actor.type === ActorType.PERSON"
+        class="only-first-child"
+        :class="{
+          'line-clamp-3': limit,
+          'line-clamp-10': !limit,
+        }"
+        v-text="actor.summary"
+      />
     </div>
     <div class="flex pr-2" v-if="actor.type === ActorType.PERSON">
       <router-link

src/components/Conversations/ConversationListItem.vue

@@ -96,6 +96,7 @@ import { useI18n } from "vue-i18n";
 import { formatList } from "@/utils/i18n";
 import { displayName } from "@/types/actor";
 import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { escapeHtml } from "@/utils/html";
 
 const props = defineProps<{
   conversation: IConversation;
@@ -137,7 +138,7 @@ const actualDate = computed((): string => {
 const formattedListOfParticipants = computed(() => {
   return formatList(
     otherParticipants.value.map(
-      (participant) => `<b>${displayName(participant)}</b>`
+      (participant) => `<b>${escapeHtml(displayName(participant))}</b>`
     )
   );
 });

src/plugins/notifier.ts

@@ -1,3 +1,4 @@
+import { escapeHtml } from "@/utils/html";
 import { App } from "vue";
 
 export class Notifier {
@@ -21,7 +22,7 @@ export class Notifier {
 
   private notification(message: string, type: string) {
     this.app.config.globalProperties.$oruga.notification.open({
-      message,
+      message: escapeHtml(message),
       duration: 5000,
       position: "bottom-right",
       type,

src/utils/html.ts

@@ -5,3 +5,13 @@ export const getValueFromMeta = (name: string): string | null => {
   }
   return null;
 };
+
+export function escapeHtml(html: string) {
+  const p = document.createElement("p");
+  p.appendChild(document.createTextNode(html.trim()));
+
+  const escapedContent = p.innerHTML;
+  p.remove();
+
+  return escapedContent;
+}

src/views/Event/EditView.vue

@@ -180,7 +180,7 @@
                   {
                     contact: formatList(
                       event.contacts.map((contact) =>
-                        displayNameAndUsername(contact)
+                        escapeHtml(displayNameAndUsername(contact))
                       )
                     ),
                   },
@@ -628,6 +628,7 @@ import { useHead } from "@unhead/vue";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
 import type { Locale } from "date-fns";
 import sortBy from "lodash/sortBy";
+import { escapeHtml } from "@/utils/html";
 
 const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;