remove v-html

[LKuemmel]

Hier wird auch v-html verwendet. Links auf zB Sicherungen sollten trotzdem korrekt angezeigt werden.
#853

[benderl]

Vom Grudsatz her hast Du Recht. Das Parsen der erlaubten Tags ist jedoch etwas komplizierter, daher bin ich das noch nicht angegangen.

Die hier umgesetzte Variante hat ein paar Probleme, da die originalen HTML Tags zweimal umgewandelt werden. Zuerst in Text und dann wieder in gültige Tags mit reduzierten Attributen. Wäre es nicht sinnvoller, eine Liste mit erlaubten Tags zu erstellen und bei jeden Tag die erlaubten Attribute aufzulisten?

Vorgehen wäre dann:

• auf nicht erlaubte Tags zu prüfen und diese in reinen Text umwandeln
• bei erlaubten Tags auf nicht erlaubte Attribute zu prüfen und diese zu entfernen.

Dann ist sichergestellt, dass die Attribute auch so erhalten bleiben, wie es ursprünglich gedacht war.

[benderl]

Hier könnte eine Liste mit gültigen Tags und Attributen definiert werden.

const validTags = [
  { name: "br", validAttributes: [] },
  { name: "a", validAttributes: ["href", "target"] },
  ...
];

[ryckakas]

Warum verwendest du hier eine eigene sanitizeMessage-Logik? Ich würde dringend empfehlen, stattdessen eine battle-tested Library wie DOMPurify zu nutzen, das übernimmt auch das parsen von tags, und es ist komplett konfigurierbar. Selber geschriebene Sanitization-Logik bleibt meistens fragil. Wer pflegt das langfristig, wenn neue Sicherheitslücken oder Bypass-Techniken bekannt werden?

Vorschlag / Best Practice für Vue:
Am besten kapselt man das in einer eigenen Komponente (z. B. ).

<!-- SafeHtml.vue (Die zentrale Komponente) -->
<script setup>
import DOMPurify from 'dompurify'
import { computed } from 'vue'

const props = defineProps({
  content: {
    type: String,
    required: true
  }
})

const sanitizedContent = computed(() => {
  return DOMPurify.sanitize(props.content)
})
</script>

<template>
  <span v-html="sanitizedContent" />
</template>

<!-- Anwendung im Rest der App (z.B. OpenwbPageMessages.vue) -->
<script setup>
import SafeHtml from '@/components/SafeHtml.vue'

const message = {
  message: 'Hallo <script>alert("xss")<\/script> <b>Welt</b>!'
}
</script>

<template>
  <!-- Statt v-html direkt im Template zu nutzen: -->
  <SafeHtml :content="message.message" />
</template>

Das wäre der einzige Ort in der gesamten App, an dem Sanitization und v-html zum Einsatz kommen.

Restliche Komponenten nutzen nur noch <SafeHtml/>, was das Risiko von versehentlichem Unsanitized-Output minimiert und den Code viel wartbarer macht.

[benderl]

Eine Variante mit DOMPurify hatte ich direkt im Kommentar weiter unten vorgeschlagen.

[benderl]

Eine mögliche Variante: https://github.com/LeSuisse/vue-dompurify-html/tree/main/packages/vue-dompurify-html

[benderl]

replaced by #1120