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>
This commit is contained in:
potsda.mn-Kollektiv 2023-12-07 14:28:59 +01:00 committed by Thomas Citharel
parent 5e3d8a861f
commit 1af8e37e9b
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
5 changed files with 26 additions and 4 deletions

View file

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

View file

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

View file

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

View file

@ -5,3 +5,13 @@ export const getValueFromMeta = (name: string): string | null => {
} }
return 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;
}

View file

@ -180,7 +180,7 @@
{ {
contact: formatList( contact: formatList(
event.contacts.map((contact) => 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 { useProgrammatic } from "@oruga-ui/oruga-next";
import type { Locale } from "date-fns"; import type { Locale } from "date-fns";
import sortBy from "lodash/sortBy"; import sortBy from "lodash/sortBy";
import { escapeHtml } from "@/utils/html";
const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10; const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;