From 96a6fb4f32e5dd992bc6bf7119acde5058e289a6 Mon Sep 17 00:00:00 2001
From: Jan Gregor Emge-Triebel <emge.triebel@lotum.de>
Date: Mon, 3 Aug 2026 18:44:59 +0200
Subject: [PATCH 1/4] Audit the v-html sites: 9 live bindings become 4, all
 sanitising

Five card/search components regex-stripped tags and passed the result to
v-html. `/<[^<>]+>/g` cannot match a tag containing < or >, so removing
an inner tag reassembled a working one: <img<a> src=x onerror=alert(1)>
survived as <img src=x onerror=alert(1)> and executed.

Those five now use helpers/getPlainText.ts and {{ }}, removing the sink.
It sanitises with ALLOWED_TAGS: [] and RETURN_DOM_FRAGMENT, then reads
textContent, so it parses rather than pattern-matches.

A plain {{ }} swap with the old regex would have shipped a visible bug.
These Directus fields carry entities (f&uuml;r, &quot;) that the regex
never decoded -- it did not need to, because v-html let the browser do
it. Interpolating that directly would print f&uuml;r on every umlaut.

ProfileCreationMainInfos and ProfileCreationDone passed CMS rich text to
v-html with no filtering at all, and cannot use {{ }}: intro_text carries
the brand-colour span. They now sanitise with DOMPurify, which preserves
that markup byte-identically.

Two commented-out v-html bindings in PodcastPlayer.vue are deleted. They
called require(), which does not resolve under Vite ESM. This document
had described them as fine build-time SVG inlining; they were dead.

getMetaInfo.ts keeps the same regex on purpose: it writes to a <meta
content> attribute, not innerHTML, and Nuxt escapes attribute values --
verified against a description containing a raw quote.

Verified in a browser, since these lists are client-rendered: 5 pages,
30 descriptions, zero entities in rendered text, zero child elements,
zero hydration warnings. Lint warnings 134 -> 129.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JkKMceYAzAYLrSyC42FWTf
---
 docs/dependency-upgrade-plan.md               | 145 ++++++++++++++----
 nuxt-app/components/ConferenceCard.vue        |   9 +-
 nuxt-app/components/MeetupCard.vue            |   9 +-
 nuxt-app/components/PickOfTheDayListItem.vue  |  10 +-
 nuxt-app/components/PodcastPlayer.vue         |  13 --
 nuxt-app/components/ProfileCreationDone.vue   |  10 +-
 .../components/ProfileCreationMainInfos.vue   |   8 +-
 nuxt-app/components/SearchResultCard.vue      |  16 +-
 nuxt-app/components/SpeakerListItem.vue       |   9 +-
 nuxt-app/helpers/getPlainText.ts              |  30 ++++
 nuxt-app/test/getPlainText.test.ts            |  49 ++++++
 11 files changed, 237 insertions(+), 71 deletions(-)
 create mode 100644 nuxt-app/helpers/getPlainText.ts
 create mode 100644 nuxt-app/test/getPlainText.test.ts

diff --git a/docs/dependency-upgrade-plan.md b/docs/dependency-upgrade-plan.md
index 5190afa7..75f60656 100644
--- a/docs/dependency-upgrade-plan.md
+++ b/docs/dependency-upgrade-plan.md
@@ -1296,6 +1296,115 @@ workaround to try is `nitro.externals.inline: ['html-encoding-sniffer']`, so rol
 import at build time. Not attempted here: an unnecessary upgrade did not justify a second inline
 workaround, and the better answer is the follow-up asking whether the server needs jsdom at all.
 
+## The `v-html` audit — done 2026-08-03
+
+Not a dependency upgrade, but it came out of one: the `isomorphic-dompurify` revert prompted the
+question "does the server need jsdom at all", and looking at the *sinks* instead of the dependency
+found something worth fixing. Run ahead of `stripe` for the same reason as the comment audit — that
+item waits on a colleague, this one did not.
+
+**Result: nine live bindings became four, and all four sanitise.**
+
+| component | before | after |
+| --- | --- | --- |
+| `InnerHtml.vue` | `DOMPurify.sanitize` | unchanged ✅ |
+| `NewsTicker.vue` | `DOMPurify.sanitize` | unchanged ✅ |
+| `ProfileCreationMainInfos.vue` | **raw prop → `v-html`** | `DOMPurify.sanitize` ✅ |
+| `ProfileCreationDone.vue` | **raw prop → `v-html`** | `DOMPurify.sanitize` ✅ |
+| `MeetupCard.vue` | regex strip → `v-html` | `getPlainText` → `{{ }}` — sink removed |
+| `SpeakerListItem.vue` | regex strip → `v-html` | `getPlainText` → `{{ }}` — sink removed |
+| `ConferenceCard.vue` | regex strip → `v-html` | `getPlainText` → `{{ }}` — sink removed |
+| `PickOfTheDayListItem.vue` | regex strip → `v-html` | `getPlainText` → `{{ }}` — sink removed |
+| `SearchResultCard.vue` (5 branches) | regex strip → `v-html` | `getPlainText` → `{{ }}` — sink removed |
+| `PodcastPlayer.vue` ×2 | commented-out dead code | deleted |
+
+### Two corrections to this document's own earlier notes
+
+**The count was wrong.** This document said "eleven bindings" and described the two in
+`PodcastPlayer.vue` as build-time SVG inlining that was "fine". They are **commented-out dead code**
+calling `require()`, which would not even resolve under Vite's ESM pipeline. Nine bindings were live,
+which is what ESLint's nine `vue/no-v-html` warnings had been saying all along. Deleted rather than
+described.
+
+**"Just use `{{ }}`" was too glib**, and would have shipped a visible bug. These Directus fields are
+WYSIWYG HTML containing entities — `f&uuml;r`, `Bauk&auml;sten`, `&quot;Moin&quot;`. The old regex
+never decoded them; it did not have to, because the value went on to `v-html` and the *browser*
+decoded them. Swapping to `{{ }}` with the same regex would have rendered `f&uuml;r` literally on
+every German umlaut on the site.
+
+So the swap needed real text, not tag-stripped HTML:
+
+| approach | entities | `&amp;` | `<img<a> src=x onerror=…>` |
+| --- | --- | --- | --- |
+| regex + `v-html` (before) | ✅ browser decodes | ✅ | ❌ **live tag** |
+| regex + `{{ }}` (the naive fix) | ❌ shows `f&uuml;r` | ❌ | ✅ inert |
+| `getPlainText` + `{{ }}` (shipped) | ✅ `für` | ✅ `&` | ✅ inert |
+
+`helpers/getPlainText.ts` sanitises with `ALLOWED_TAGS: []` and `RETURN_DOM_FRAGMENT`, then reads
+`textContent`. That returns genuine text with every entity decoded, which is safe for `{{ }}` and must
+never be handed to `v-html`. It parses instead of pattern-matching, which is the whole point: a regex
+cannot match a tag containing `<` or `>`, so `<img<a> src=x onerror=alert(1)>` survived
+`/<[^<>]+>/g` as a working tag.
+
+It is deliberately **not** re-exported from `helpers/index.ts`. That barrel is imported by server
+routes, and pulling `isomorphic-dompurify` through it would instantiate jsdom for consumers that only
+wanted a date helper.
+
+### The two ProfileCreation components were worse than the regex ones
+
+They passed CMS rich text to `v-html` with **no filtering at all** — the regex sites at least tried.
+They also cannot use `{{ }}`: `intro_text` contains `<strong>programmier.<span style="color: #cfff00;">bar</span></strong>`,
+so interpolation would destroy the brand colour. DOMPurify's default profile preserves that markup
+byte-identically, verified before the change and confirmed in the rendered page afterwards.
+
+Three sibling components — `ProfileCreationEmojis`, `ProfileCreationInterests`,
+`ProfileCreationDetails` — already render the same singleton's fields with `{{ }}` and identical CSS
+classes. So these two were inconsistent outliers rather than a deliberate choice.
+
+### Verification
+
+Unit tests cover the bypass payloads, so the regex cannot come back unnoticed: `test/getPlainText.test.ts`,
+5 cases, including `<img<a> src=x onerror=alert(1)>`, `<svg<a> onload=…>` and the `<math><mtext><script>`
+mXSS vector.
+
+Rendered output needed a browser, because `SpeakerList`, `PickOfTheDayList` and `SearchResultCard` are
+client-rendered — SSR HTML shows nothing for them. Five pages checked, **30 descriptions rendered, zero
+HTML entities in the rendered text, zero child elements inside any description, zero hydration
+warnings.** That last one matters: `getPlainText` runs under jsdom on the server and the real DOM on
+the client, so a parsing difference would surface as a hydration mismatch.
+
+Two of my own checks failed before the code did, and both were the check's fault:
+
+- The first version flagged `/konferenz` for "undecoded entities" on `Web &amp; AI Edition 2026`. That
+  is Vue correctly escaping the literal `&` that `getPlainText` now produces; the browser decodes it
+  back. The check was reading source HTML where it should have read rendered text.
+- The first version reported "0 descriptions — none ✓" for `/hall-of-fame` and `/pick-of-the-day` and
+  called it a pass. `SpeakerListItem` and `PickOfTheDayListItem` are not on those pages at all; they
+  are on `/podcast/[slug]`, `/meetup/[slug]` and `/hall-of-fame/[slug]`. A zero count now fails.
+
+| gate | before | after |
+| --- | --- | --- |
+| `lint` | 0 errors, 134 warnings | 0 errors, **129** warnings — five fewer `vue/no-v-html` |
+| `test` | 52/52 | **57/57** |
+| ratchet | 263 | 263 |
+| `build` | exit 0, 31.3 MB | exit 0, 31.3 MB |
+| jsdom in client bundle | — | absent, confirmed |
+
+### Deliberate non-changes
+
+**`helpers/getMetaInfo.ts:48` keeps the same regex.** It is the only other use of that pattern, and it
+is **not** an innerHTML sink — its output goes into `<meta content="...">`. Checked rather than assumed:
+one CMS description contains a raw `"` in its first 160 characters, and production renders it as
+`&quot;`, so Nuxt escapes attribute values. A surviving `<img onerror=…>` would be inert there. Fixing
+it would also drag `isomorphic-dompurify` into the `helpers` barrel for no security gain. The
+`&uuml;` entities it leaves encoded are decoded by the HTML parser, so meta descriptions read
+correctly today.
+
+**Reachability, restated honestly.** Every input here is CMS-authored, so exploiting the old regex
+needed Directus write access or a tampered Algolia index. This was defence in depth, not an open door —
+and the strongest argument for fixing it was never the exploit, it was that four components were
+pushing plain text through an HTML sink for no reason.
+
 ## Phase 6 — Deliberately deferred
 
 Not blocked by EOL. Do **not** fold these into the phases above.
@@ -1415,36 +1524,9 @@ browser-support decision nobody made.
 
 ### 5. Small, verified, uncontroversial
 
-- [ ] ⚠️⚠️ **Audit the `v-html` sites. Two of eleven sanitise; several strip tags with a regex and
-      the strip is bypassable.** This supersedes the "do we need jsdom" question below, and it is the
-      genuinely important one.
-
-      Eleven `v-html` bindings exist. `InnerHtml.vue` and `NewsTicker.vue` use DOMPurify. `PodcastPlayer.vue`
-      inlines a build-time SVG twice, which is fine. The remaining **seven** render CMS- or
-      Algolia-sourced values, and the ones that defend themselves do it like this:
-
-      ```js
-      props.pickOfTheDay.description.replace(/<[^<>]+>/g, '')   // PickOfTheDayListItem.vue:52
-      props.item.description?.replace(/<[^<>]+>/g, '')          // SearchResultCard.vue:89,103,110
-      ```
-
-      That pattern cannot match a tag containing `<` or `>`, so a nested tag reassembles into a live
-      one. Verified:
-
-      | input | after strip, into `v-html` | |
-      | --- | --- | --- |
-      | `<img<a> src=x onerror=alert(1)>` | `<img src=x onerror=alert(1)>` | **executes** |
-      | `<svg<a> onload=alert(1)>` | `<svg onload=alert(1)>` | **executes** |
-      | `<script>alert(1)</script>` | `alert(1)` | inert — `innerHTML` never runs injected `<script>` |
-      | `<p>Ein <strong>Text</strong> mit <a href="/x">Link</a></p>` | `Ein Text mit Link` | all markup destroyed |
-
-      **Reachability:** the input is CMS-authored, so this needs Directus write access (or a tampered
-      Algolia index) — defence in depth, not an open door. Not a reason to leave it.
-
-      **The fix is smaller than the problem.** That last row is the tell: these components strip *every*
-      tag, so they render plain text through an HTML sink. `{{ }}` interpolation is both safer and
-      simpler, needs no sanitiser, and removes the sink outright. Only components that genuinely render
-      rich HTML need DOMPurify — currently two.
+- [x] ✅ **Audited and fixed the `v-html` sites** — done 2026-08-03. **Nine live bindings are now
+      four, and every one of those four sanitises.** See "The `v-html` audit" below for the detail,
+      including two places where this document's own earlier plan was wrong.
 - [ ] **Does the server need `jsdom`? Probably yes, and it is not urgent** — correcting an earlier
       overstatement in this document, which called this "the blocking question". It is not blocking:
 
@@ -1838,6 +1920,9 @@ Tracked so nobody has to rediscover them. None are urgent on their own.
 | 2026-08-03 | Ruled out the Node version as the cause of the `isomorphic-dompurify` failure. The project setting reads `20.x`, which looks decisive and is not — `engines.node` overrides it and the failing build log states that **Node 24.x** was used. Recorded in the plan because it is the obvious first hypothesis; it also revealed that the project setting is stale and a latent trap if `engines.node` is ever simplified. |
 | 2026-08-03 | **Retracted** this document's claim that "does the server need jsdom" had become the blocking question. It had not: `isomorphic-dompurify@2.20.0` declares `dompurify: ^3.2.3`, so sanitiser patches still arrive, and `jsdom: ^26.0.0`, so the tree cannot drift into the ESM break. The pin costs ~4 MB and v3's `clearWindow()`, not security. |
 | 2026-08-03 | Keep jsdom for anything still using DOMPurify. Its mXSS handling depends on parsing in a real DOM — verified when `<math><mtext><script>` reduced to `<math><mtext></mtext></math>` — so swapping to a parser-based sanitiser would trade security properties for install size. If weight ever matters, try `linkedom` + DOMPurify and re-run the 64-case harness. |
+| 2026-08-03 | The `v-html` audit shipped: 9 live bindings became 4, all sanitising. Five excerpt sites moved to a parsing text-extractor plus `{{ }}`, removing the sink; the two unfiltered ProfileCreation sites gained DOMPurify because they genuinely render rich HTML. Two commented-out dead bindings deleted. |
+| 2026-08-03 | **Corrected this document twice in the process.** It claimed eleven bindings and described the two in `PodcastPlayer.vue` as fine build-time SVG inlining — they were commented-out dead code calling `require()`. And "the fix is `{{ }}`" would have shipped a visible bug: the fields carry HTML entities that the old regex never decoded, relying on the browser to do it via `v-html`, so plain interpolation would have printed `f&uuml;r` on every umlaut. The shipped helper parses and returns real text instead. |
+| 2026-08-03 | Left `helpers/getMetaInfo.ts` on the same vulnerable regex on purpose: it writes to a `<meta content>` attribute, not innerHTML. Verified Nuxt escapes attribute values by finding a CMS description containing a raw `"` and confirming production renders `&quot;`. Changing it would pull `isomorphic-dompurify` into the `helpers` barrel for no security gain. |
 | 2026-08-03 | The `v-html` audit supersedes the jsdom question. 2 of 11 bindings sanitise; several regex-strip tags and the strip is bypassable by nested-tag reconstruction (`<img<a> src=x onerror=…>` reassembles). Since those components strip *all* markup, `{{ }}` is both safer and simpler and removes the sink — a smaller fix than the dependency debate it was hiding behind. |
 | 2026-08-03 | `@directus/sdk` taken to **24.0.0** despite the server being frozen at 11.17.4, because the SDK major tracks the Directus monorepo rather than a server API contract: 21.3.0 is simply the SDK that shipped *with* 11.17.4, and 22/23/24 shipped with 12.0/12.1/12.2. Of the four breaking changes, three touch commands this app never calls. Holding at 21 would have deferred nothing real. |
 | 2026-08-03 | Verified the 12.2-era client against the **live 11.x server** rather than reasoning from the changelog alone. Eight queries copied from the real call sites returned byte-identical responses on both SDKs. Necessary because CI builds with `SKIP_PRERENDER_ROUTE_DISCOVERY=true` and so never contact the CMS — no gate in this repo would have caught a wire-level break. That the server is still 11.x was itself confirmed from `/server/health` returning 200, which Directus 12.0 changed to 404 unauthenticated. |
diff --git a/nuxt-app/components/ConferenceCard.vue b/nuxt-app/components/ConferenceCard.vue
index 64a080f3..590beabe 100644
--- a/nuxt-app/components/ConferenceCard.vue
+++ b/nuxt-app/components/ConferenceCard.vue
@@ -19,8 +19,9 @@
             <!-- Description -->
             <p
                 class="mt-6 line-clamp-4 space-y-8 text-base font-light leading-normal text-white md:text-xl lg:text-2xl"
-                v-html="description"
-            />
+            >
+                {{ description }}
+            </p>
 
             <!-- Likes -->
             <LinkButton class="mt-6" :href="href">Mehr Infos</LinkButton>
@@ -31,6 +32,7 @@
 <script lang="ts">
 import type { PropType } from 'vue'
 import { computed, defineComponent } from 'vue'
+import { getPlainText } from '~/helpers/getPlainText'
 import type { ConferenceItem, MeetupItem } from '../types';
 import LinkButton from './LinkButton.vue'
 import ConferenceCover from './ConferenceCover.vue'
@@ -54,8 +56,7 @@ export default defineComponent({
         // Create href to meetup subpage
         const href = computed(() => `/konferenz/${props.conference.slug}`)
 
-        // Create plain description text
-        const description = computed(() => props.conference.text_1?.replace(/<[^<>]+>/g, ''))
+        const description = computed(() => getPlainText(props.conference.text_1))
 
         return {
             href,
diff --git a/nuxt-app/components/MeetupCard.vue b/nuxt-app/components/MeetupCard.vue
index 4c90f738..c581b1e2 100644
--- a/nuxt-app/components/MeetupCard.vue
+++ b/nuxt-app/components/MeetupCard.vue
@@ -20,8 +20,9 @@
             <!-- Description -->
             <p
                 class="mt-6 line-clamp-4 space-y-8 text-base font-light leading-normal text-white md:text-xl lg:text-2xl"
-                v-html="description"
-            />
+            >
+                {{ description }}
+            </p>
 
             <!-- Likes -->
             <LinkButton class="mt-6" :href="href">Mehr Infos</LinkButton>
@@ -30,6 +31,7 @@
 </template>
 
 <script lang="ts">
+import { getPlainText } from '~/helpers/getPlainText'
 import type { PropType } from 'vue'
 import { computed, defineComponent } from 'vue'
 import type { MeetupItem } from '../types'
@@ -59,8 +61,7 @@ export default defineComponent({
         // Create href to meetup subpage
         const href = computed(() => `/meetup/${props.meetup.slug}`)
 
-        // Create plain description text
-        const description = computed(() => props.meetup.description.replace(/<[^<>]+>/g, ''))
+        const description = computed(() => getPlainText(props.meetup.description))
 
         return {
             href,
diff --git a/nuxt-app/components/PickOfTheDayListItem.vue b/nuxt-app/components/PickOfTheDayListItem.vue
index e157596d..639c802f 100644
--- a/nuxt-app/components/PickOfTheDayListItem.vue
+++ b/nuxt-app/components/PickOfTheDayListItem.vue
@@ -30,10 +30,9 @@
                     </h3>
                     <LeaveSiteIcon class="-mt-1 h-4 lg:h-5 xl:h-6" />
                 </div>
-                <p
-                    class="mt-2 space-y-8 text-base font-light leading-normal md:text-xl lg:text-2xl"
-                    v-html="description"
-                />
+                <p class="mt-2 space-y-8 text-base font-light leading-normal md:text-xl lg:text-2xl">
+                    {{ description }}
+                </p>
             </div>
         </a>
     </li>
@@ -41,6 +40,7 @@
 
 <script setup lang="ts">
 import LeaveSiteIcon from '~/assets/icons/leave-site.svg'
+import { getPlainText } from '~/helpers/getPlainText'
 import type { PickOfTheDayItem } from '~/types'
 import { computed } from 'vue'
 import DirectusImage from './DirectusImage.vue'
@@ -49,5 +49,5 @@ const props = defineProps<{
     pickOfTheDay: Pick<PickOfTheDayItem, 'name' | 'website_url' | 'description' | 'image'>
 }>()
 
-const description = computed(() => props.pickOfTheDay.description.replace(/<[^<>]+>/g, ''))
+const description = computed(() => getPlainText(props.pickOfTheDay.description))
 </script>
diff --git a/nuxt-app/components/PodcastPlayer.vue b/nuxt-app/components/PodcastPlayer.vue
index 6fb0ae30..c6839d20 100644
--- a/nuxt-app/components/PodcastPlayer.vue
+++ b/nuxt-app/components/PodcastPlayer.vue
@@ -50,13 +50,6 @@
                         :class="isExpanded ? 'pointer-events-none invisible opacity-0' : 'delay-200 duration-500'"
                         :style="isExpanded ? 'transition: visibility 0s .15s, opacity .15s' : undefined"
                     >
-                        <!-- <button
-              class="h-6 text-pink"
-              type="button"
-              data-cursor-hover
-              @click.stop=""
-              v-html="require('../assets/icons/heart.svg?raw')"
-            /> -->
                         <div class="flex h-full w-8 justify-center">
                             <button
                                 v-if="podcastPlayer.paused"
@@ -168,12 +161,6 @@
                     :class="!isExpanded && 'invisible xl:visible'"
                     :style="!isExpanded ? 'transition: visibility 0s 0.3s' : undefined"
                 >
-                    <!-- <button
-            class="h-6 text-pink"
-            type="button"
-            data-cursor-hover
-            v-html="require('../assets/icons/heart.svg?raw')"
-          /> -->
                     <div class="flex space-x-8">
                         <button
                             v-if="clipboard.isSupported || share.isSupported"
diff --git a/nuxt-app/components/ProfileCreationDone.vue b/nuxt-app/components/ProfileCreationDone.vue
index 120a1973..2101ba02 100644
--- a/nuxt-app/components/ProfileCreationDone.vue
+++ b/nuxt-app/components/ProfileCreationDone.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
-defineProps<{
+import DOMPurify from 'isomorphic-dompurify'
+import { computed } from 'vue'
+
+const props = defineProps<{
     mainText: string
 }>()
+
+// CMS rich text, so it keeps its markup — but it must be sanitised before reaching v-html.
+const sanitizedMainText = computed(() => DOMPurify.sanitize(props.mainText))
 </script>
 
 <template>
@@ -9,7 +15,7 @@ defineProps<{
         <div class="flex-col items-center justify-center md:flex">
             <div
                 class="mb-2 mt-5 text-3xl font-semibold italic leading-[3rem] text-white md:text-4xl"
-                v-html="mainText"
+                v-html="sanitizedMainText"
             />
         </div>
 
diff --git a/nuxt-app/components/ProfileCreationMainInfos.vue b/nuxt-app/components/ProfileCreationMainInfos.vue
index 5cd1e7f3..64f513ad 100644
--- a/nuxt-app/components/ProfileCreationMainInfos.vue
+++ b/nuxt-app/components/ProfileCreationMainInfos.vue
@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import ProfilePicture from '~/components/ProfilePicture.vue'
 import { useProfileCreationStore } from '~/composables/useProfileCreationStore'
+import DOMPurify from 'isomorphic-dompurify'
 import { computed, ref, watch } from 'vue'
 
-defineProps<{
+const props = defineProps<{
     heading: string
     introText: string
 }>()
 
+// CMS rich text, so it keeps its markup — but it must be sanitised before reaching v-html.
+const sanitizedIntroText = computed(() => DOMPurify.sanitize(props.introText))
+
 const emit = defineEmits(['validityChange'])
 const store = useProfileCreationStore()
 const { mainInfos } = storeToRefs(store)
@@ -40,7 +44,7 @@ function updateLastName(value: string) {
             </div>
         </div>
 
-        <div class="intro-text mb-2 mt-5 text-base font-light text-white md:text-4xl" v-html="introText"></div>
+        <div class="intro-text mb-2 mt-5 text-base font-light text-white md:text-4xl" v-html="sanitizedIntroText"></div>
         <ProfilePicture class="mb-10" />
         <div class="flex w-full flex-col items-center justify-center">
             <InputFieldWithHeadline
diff --git a/nuxt-app/components/SearchResultCard.vue b/nuxt-app/components/SearchResultCard.vue
index c57936dc..a26798bb 100644
--- a/nuxt-app/components/SearchResultCard.vue
+++ b/nuxt-app/components/SearchResultCard.vue
@@ -28,8 +28,9 @@
               <!-- Description -->
               <p
                 class="mt-4 line-clamp-4 text-sm font-light leading-normal text-white md:text-lg lg:mt-8 lg:text-xl lg:leading-relaxed"
-                v-html="viewModel.description"
-              />
+              >
+                {{ viewModel.description }}
+              </p>
             </div>
         </nuxt-link>
     </div>
@@ -37,6 +38,7 @@
 
 <script setup lang="ts">
 import LeaveSiteIcon from '~/assets/icons/leave-site.svg'
+import { getPlainText } from '~/helpers/getPlainText'
 import { getFullPodcastTitle, getFullSpeakerName } from 'shared-code'
 import { computed } from 'vue'
 
@@ -86,35 +88,35 @@ const viewModel = computed(() => {
         `/podcast/${props.item.slug}`,
         getFullPodcastTitle(props.item) || "",
         "Podcast // " + publishDate,
-        props.item.description?.replace(/<[^<>]+>/g, "") || "",
+        getPlainText(props.item.description),
       )
     case "transcript":
       return new ViewModel(
         `/podcast/${props.item.slug}`,
         getFullPodcastTitle(props.item) || "",
         "Podcast // " + publishDate,
-        props.item.transcript?.replace(/<[^<>]+>/g, "") || "",
+        getPlainText(props.item.transcript),
       )
     case "meetup":
       return new ViewModel(
         `/meetup/${props.item.slug}`,
         props.item.title || "",
         "Meetup // " + publishDate,
-        props.item.description?.replace(/<[^<>]+>/g, "") || "",
+        getPlainText(props.item.description),
       )
     case "speaker":
       return new ViewModel(
         `/hall-of-fame/${props.item.slug}`,
         getFullSpeakerName(props.item) || "",
         "Speaker // " + publishDate,
-        props.item.description?.replace(/<[^<>]+>/g, "") || "",
+        getPlainText(props.item.description),
       )
     case "pick_of_the_day":
       return new ViewModel(
         props.item.website_url,
         props.item.name || "",
         "Pick of the Day // " + publishDate,
-        props.item.description?.replace(/<[^<>]+>/g, "") || "",
+        getPlainText(props.item.description),
         true,
       )
     default:
diff --git a/nuxt-app/components/SpeakerListItem.vue b/nuxt-app/components/SpeakerListItem.vue
index f1f0eed8..ea74355b 100644
--- a/nuxt-app/components/SpeakerListItem.vue
+++ b/nuxt-app/components/SpeakerListItem.vue
@@ -29,8 +29,9 @@ class="mt-10 md:mt-0"
             <!-- Description -->
             <p
                 class="mt-5 line-clamp-4 space-y-8 text-base font-light leading-normal text-white md:mt-10 md:text-xl lg:text-2xl"
-                v-html="description"
-            />
+            >
+                {{ description }}
+            </p>
 
             <!-- Link -->
             <LinkButton class="mt-6" :href="href">Mehr Infos</LinkButton>
@@ -42,6 +43,7 @@ class="mt-10 md:mt-0"
 import { getFullSpeakerName } from 'shared-code'
 import type { PropType } from 'vue'
 import { computed, defineComponent } from 'vue'
+import { getPlainText } from '~/helpers/getPlainText'
 import type { SpeakerItem } from '../types'
 import DirectusImage from './DirectusImage.vue'
 import LinkButton from './LinkButton.vue'
@@ -66,8 +68,7 @@ export default defineComponent({
         // Create get full name function
         const fullName = computed(() => getFullSpeakerName(props.speaker))
 
-        // Create plain description text
-        const description = computed(() => props.speaker.description.replace(/<[^<>]+>/g, ''))
+        const description = computed(() => getPlainText(props.speaker.description))
 
         // Create href to speaker's subpage
         const href = computed(() => `/hall-of-fame/${props.speaker.slug}`)
diff --git a/nuxt-app/helpers/getPlainText.ts b/nuxt-app/helpers/getPlainText.ts
new file mode 100644
index 00000000..f53f4ec6
--- /dev/null
+++ b/nuxt-app/helpers/getPlainText.ts
@@ -0,0 +1,30 @@
+import DOMPurify from 'isomorphic-dompurify'
+
+// Deliberately not re-exported from `helpers/index.ts`: that barrel is imported by server routes, and
+// pulling isomorphic-dompurify in through it would instantiate jsdom for consumers that only wanted a
+// date helper. Import this module directly.
+
+/**
+ * Reduces CMS rich text to plain text.
+ *
+ * For card excerpts and search results, which want a snippet of prose rather than markup. Returns
+ * real text, not an HTML string — every entity is decoded (`f&uuml;r` becomes `für`, `&amp;` becomes
+ * `&`), so the result is safe to render with `{{ }}` and must not be passed to `v-html`.
+ *
+ * Parses rather than pattern-matches on purpose. Stripping tags with a regex such as
+ * `/<[^<>]+>/g` cannot match a tag that contains `<` or `>`, so `<img<a> src=x onerror=alert(1)>`
+ * survives it as a working tag.
+ */
+export function getPlainText(html: string | null | undefined): string {
+    if (!html) {
+        return ''
+    }
+
+    const fragment = DOMPurify.sanitize(html, {
+        ALLOWED_TAGS: [],
+        ALLOWED_ATTR: [],
+        RETURN_DOM_FRAGMENT: true,
+    })
+
+    return fragment.textContent ?? ''
+}
diff --git a/nuxt-app/test/getPlainText.test.ts b/nuxt-app/test/getPlainText.test.ts
new file mode 100644
index 00000000..9da79255
--- /dev/null
+++ b/nuxt-app/test/getPlainText.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+import { getPlainText } from '../helpers/getPlainText'
+
+// This replaced `String.replace(/<[^<>]+>/g, '')` at five call sites whose output was then passed to
+// `v-html`. The bypass cases below are the reason the swap happened, so they are the part of this
+// suite worth keeping: they fail if anyone reintroduces regex-based tag stripping.
+
+describe('getPlainText', () => {
+    it('returns empty string for empty input', () => {
+        expect(getPlainText('')).toBe('')
+        expect(getPlainText(null)).toBe('')
+        expect(getPlainText(undefined)).toBe('')
+    })
+
+    it('strips the markup Directus WYSIWYG fields actually contain', () => {
+        expect(getPlainText('<p>Ein <strong>Text</strong> mit <a href="/x">Link</a></p>')).toBe('Ein Text mit Link')
+        expect(getPlainText('<h2>Überschrift</h2>')).toBe('Überschrift')
+        expect(getPlainText('Kein Markup')).toBe('Kein Markup')
+    })
+
+    it('decodes HTML entities, so German text is not garbled', () => {
+        // The regex this replaced left these encoded. That was invisible while the value went to
+        // `v-html` (the browser decoded them) and would have surfaced the moment it moved to `{{ }}`.
+        expect(getPlainText('<p>f&uuml;r Bauk&auml;sten</p>')).toBe('für Baukästen')
+        expect(getPlainText('<p>&quot;Moin&quot;</p>')).toBe('"Moin"')
+        expect(getPlainText('<p>begr&uuml;&szlig;en</p>')).toBe('begrüßen')
+        expect(getPlainText('<h2>Web &amp; AI Edition 2025</h2>')).toBe('Web & AI Edition 2025')
+    })
+
+    it('yields inert text for payloads that defeat regex tag-stripping', () => {
+        // `/<[^<>]+>/g` cannot match a tag containing `<` or `>`, so removing the inner tag
+        // reassembled a working one: `<img<a> src=x onerror=alert(1)>` became
+        // `<img src=x onerror=alert(1)>` and executed once handed to `v-html`.
+        for (const payload of [
+            '<img<a> src=x onerror=alert(1)>',
+            '<svg<a> onload=alert(1)>',
+            '<script>alert(1)</script>',
+            '<math><mtext><script>alert(1)</script></mtext></math>',
+            '<div onclick=alert(1)>x</div>',
+            '<iframe src="https://evil.test"></iframe>',
+        ]) {
+            expect(getPlainText(payload)).not.toMatch(/<[a-zA-Z]/)
+        }
+    })
+
+    it('keeps text content when unwrapping elements', () => {
+        expect(getPlainText('<div onclick=alert(1)>sichtbar</div>')).toBe('sichtbar')
+    })
+})

From a44577a03b69069e71fcbb438d8ac47718b434ad Mon Sep 17 00:00:00 2001
From: Jan Gregor Emge-Triebel <emge.triebel@lotum.de>
Date: Mon, 3 Aug 2026 18:50:52 +0200
Subject: [PATCH 2/4] Plan: record the preview verification and a pre-existing
 hydration bug

Re-ran the rendered-output check against the Vercel preview, not just a
local node .output/server, since that runtime is where isomorphic-dompurify
broke in Phase 5. Three of four pages clean.

The podcast detail page logs one hydration mismatch there. It is not this
change: production, which does not have it, logs the identical warning on
the same page. Logged as its own follow-up, with the detail that makes it
findable -- it appears on the preview and on production but not on a local
build of the same commit, so it tracks the deployment environment rather
than the code.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JkKMceYAzAYLrSyC42FWTf
---
 docs/dependency-upgrade-plan.md | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/docs/dependency-upgrade-plan.md b/docs/dependency-upgrade-plan.md
index 75f60656..24e722f0 100644
--- a/docs/dependency-upgrade-plan.md
+++ b/docs/dependency-upgrade-plan.md
@@ -1368,10 +1368,16 @@ Unit tests cover the bypass payloads, so the regex cannot come back unnoticed: `
 mXSS vector.
 
 Rendered output needed a browser, because `SpeakerList`, `PickOfTheDayList` and `SearchResultCard` are
-client-rendered — SSR HTML shows nothing for them. Five pages checked, **30 descriptions rendered, zero
-HTML entities in the rendered text, zero child elements inside any description, zero hydration
-warnings.** That last one matters: `getPlainText` runs under jsdom on the server and the real DOM on
-the client, so a parsing difference would surface as a hydration mismatch.
+client-rendered — SSR HTML shows nothing for them. Five pages checked locally, **30 descriptions
+rendered, zero HTML entities in the rendered text, zero child elements inside any description, zero
+hydration warnings.** That last one matters: `getPlainText` runs under jsdom on the server and the real
+DOM on the client, so a parsing difference would surface as a hydration mismatch.
+
+Repeated against the **Vercel preview**, because the local run used `node .output/server` rather than
+the runtime where `isomorphic-dompurify` broke in Phase 5. Same result on three of four pages. The
+podcast detail page logged one `Hydration completed but contains mismatches.` — **not this change**:
+production, which does not have it, logs the identical warning on the same page. Logged as its own
+follow-up under "Build and tooling correctness", with the detail that makes it findable.
 
 Two of my own checks failed before the code did, and both were the check's fault:
 
@@ -1476,6 +1482,22 @@ computed on the podcast index. Fixing two lines restores type checking to a lot
 
 ### 3. Build and tooling correctness
 
+- [ ] **Pre-existing hydration mismatch on podcast detail pages, on deployed environments only.**
+      Found while verifying the `v-html` audit, and **confirmed not caused by it**: production, which
+      does not have that change, logs the identical warning on the same page.
+
+      ```
+      https://www.programmier.bar/podcast/deep-dive-24-typescript-mit-stefan-baumgartner
+      → console: "Hydration completed but contains mismatches."
+      ```
+
+      The signal worth keeping is the pattern, because it says where to look: a **local** `node
+      .output/server` build of the same commit logs **zero** warnings, while both the Vercel preview
+      and production log one. So it correlates with the deployment environment, not with the code —
+      most likely time- or cache-dependent rendering, where ISR serves HTML generated at one moment
+      and the client re-renders at another. `useNow.ts` and the `toLocaleDateString` calls on that
+      page are the first places to check. Reproduce in dev mode to get Vue to name the element;
+      production builds only emit the terse message.
 - [ ] ⚠️ **Remove `nitro.externals.inline: ['pinia']`.** Waiting on an upstream Pinia fix — see
       [Waiting on upstream: the Pinia 4 export map](#waiting-on-upstream-the-pinia-4-export-map)
       below for exactly what to watch for and how to check.

From 237b37acf592f433548bf1cd79aa7e0911f16828 Mon Sep 17 00:00:00 2001
From: Jan Gregor Emge-Triebel <emge.triebel@lotum.de>
Date: Mon, 3 Aug 2026 18:59:23 +0200
Subject: [PATCH 3/4] Plan: narrow the hydration mismatch, and correct a wrong
 lead

My first note pointed at useNow.ts and date formatting. Both are wrong:
useNow is not used on that page and exists to prevent this, and ISR
staleness is ruled out because the cached and freshly rendered HTML are
byte-identical.

Records what is ruled out so nobody repeats it, including a
<template><!----></template> that looked conclusive but appears on every
page -- an artefact of comparing innerHTML, since browsers put template
content in .content.

Dev mode did not reproduce cleanly: it failed to serve the page chunk, so
the client rendered the error page against a real server render and every
warning was an artefact of that.

Also logs two real bugs found on the way:

  - useWeightedRandomSelection seeds off an hourly bucket and renders on
    four ISR-cached pages, so a client in the next hour bucket selects
    different testimonials than the cached HTML. A genuine latent instance
    of this same class, just not on the page that warns.
  - useLoadingScreen keeps isLoading in a module-scope ref, which on the
    server is shared across concurrent requests. LoadingScreen is the
    first child of <main>, where the divergence appears. Worth fixing
    either way -- SSR state belongs in useState.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JkKMceYAzAYLrSyC42FWTf
---
 docs/dependency-upgrade-plan.md | 39 +++++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/docs/dependency-upgrade-plan.md b/docs/dependency-upgrade-plan.md
index 24e722f0..7f34eb48 100644
--- a/docs/dependency-upgrade-plan.md
+++ b/docs/dependency-upgrade-plan.md
@@ -1491,13 +1491,38 @@ computed on the podcast index. Fixing two lines restores type checking to a lot
       → console: "Hydration completed but contains mismatches."
       ```
 
-      The signal worth keeping is the pattern, because it says where to look: a **local** `node
-      .output/server` build of the same commit logs **zero** warnings, while both the Vercel preview
-      and production log one. So it correlates with the deployment environment, not with the code —
-      most likely time- or cache-dependent rendering, where ISR serves HTML generated at one moment
-      and the client re-renders at another. `useNow.ts` and the `toLocaleDateString` calls on that
-      page are the first places to check. Reproduce in dev mode to get Vue to name the element;
-      production builds only emit the terse message.
+      A **local** `node .output/server` build of the same commit logs **zero** warnings, while both
+      the Vercel preview and production log one, so it tracks the deployment environment rather than
+      the code.
+
+      **Ruled out, so nobody repeats the work:**
+
+      - **ISR staleness.** The obvious theory, and wrong: the ISR-cached HTML and a freshly rendered
+        one (via a cache-busting query) are **byte-identical**, so SSR output is stable over time.
+      - **`useNow.ts`.** Not used on this page at all — only `pages/konferenz/[slug]/index.vue` — and
+        it exists specifically to avoid this, by serialising the SSR timestamp into the payload.
+      - **`useWeightedRandomSelection` / `TestimonialSlider`.** Not on this page either. **But it is a
+        genuine latent instance of this bug elsewhere** — it seeds off `Math.floor(Date.now() /
+        3600000)`, an hour bucket, and renders on `/`, `/meetup`, `/konferenz` and
+        `/konferenz/[slug]`. With `isr: 3600`, HTML cached in one hour bucket can be hydrated by a
+        client in the next, selecting different testimonials. Those pages showed no warning when
+        checked, which only means the check did not straddle a boundary.
+      - **The `<template><!----></template>` that SSR emits as the first child of `<main>`.** It looked
+        conclusive — it is absent from the hydrated DOM — but it appears on *every* page, including
+        the three that produce no warning. It is an artefact of comparing `innerHTML`: browsers put
+        `<template>` content in `.content`, so it reads as empty.
+
+      **Dev mode did not give a clean reproduction.** It failed with `H3Error: Failed to fetch
+      dynamically imported module: pages/podcast/[slug].vue`, so the client rendered the error page
+      against a server-rendered real page and produced a cascade of mismatch warnings that are
+      artefacts of that failure. Retry from a clean `.nuxt` before trusting anything it reports.
+
+      **The most promising lead is a real bug in its own right:** `composables/useLoadingScreen.ts`
+      holds `isLoading` in a **module-scope `ref`**. On the server that module is instantiated once per
+      worker, so the flag is shared across concurrent requests — one visitor's navigation can change
+      what another's SSR renders. `<LoadingScreen />` is the first child of `<main>`, exactly where the
+      divergence appears. Fix that regardless of whether it turns out to be this mismatch: SSR state
+      belongs in `useState`, not a module-level `ref`.
 - [ ] ⚠️ **Remove `nitro.externals.inline: ['pinia']`.** Waiting on an upstream Pinia fix — see
       [Waiting on upstream: the Pinia 4 export map](#waiting-on-upstream-the-pinia-4-export-map)
       below for exactly what to watch for and how to check.

From 34f5fc393f2d0cd8bd48d722d43797eea64513d9 Mon Sep 17 00:00:00 2001
From: Jan Gregor Emge-Triebel <emge.triebel@lotum.de>
Date: Tue, 4 Aug 2026 09:22:20 +0200
Subject: [PATCH 4/4] Address review: centralise the sanitisation policy

Codex was right, and it cites a rule this repo already states: AGENTS.md
says never duplicate logic across modules and extract shared abstractions.
The two ProfileCreation components each grew their own
computed(() => DOMPurify.sanitize(...)), duplicating InnerHtml.vue, which
would have made three places to edit for one policy change.

helpers/sanitize.ts is now the only module that touches DOMPurify:

  sanitizeHtml        default policy, for v-html
  sanitizeInlineHtml  as above but forbids <p>, for the news ticker
  getPlainText        real plain text, for {{ }}

getPlainText moved here from its own file, and InnerHtml and NewsTicker
were routed through it too -- otherwise the abstraction would be
half-done, with two of four policies still inline.

Also drops the unused MeetupItem type import Copilot flagged in
ConferenceCard.vue, which was one of the no-unused-vars warnings (129 ->
128). It was pre-existing, but the line is already in this diff.

Tests cover the policy itself now, not just its callers: rich markup
survives (including the brand-colour span), the ticker still loses <p>,
and no payload leaves a live tag. The danger check is itself tested
against unsanitised input so the assertions cannot pass vacuously.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JkKMceYAzAYLrSyC42FWTf
---
 nuxt-app/components/ConferenceCard.vue        |   4 +-
 nuxt-app/components/InnerHtml.vue             |   6 +-
 nuxt-app/components/MeetupCard.vue            |   2 +-
 nuxt-app/components/NewsTicker.vue            |   4 +-
 nuxt-app/components/PickOfTheDayListItem.vue  |   2 +-
 nuxt-app/components/ProfileCreationDone.vue   |   4 +-
 .../components/ProfileCreationMainInfos.vue   |   4 +-
 nuxt-app/components/SearchResultCard.vue      |   2 +-
 nuxt-app/components/SpeakerListItem.vue       |   2 +-
 .../helpers/{getPlainText.ts => sanitize.ts}  |  30 +++++
 nuxt-app/test/getPlainText.test.ts            |  49 --------
 nuxt-app/test/sanitize.test.ts                | 114 ++++++++++++++++++
 12 files changed, 159 insertions(+), 64 deletions(-)
 rename nuxt-app/helpers/{getPlainText.ts => sanitize.ts} (51%)
 delete mode 100644 nuxt-app/test/getPlainText.test.ts
 create mode 100644 nuxt-app/test/sanitize.test.ts

diff --git a/nuxt-app/components/ConferenceCard.vue b/nuxt-app/components/ConferenceCard.vue
index 590beabe..9986c4f6 100644
--- a/nuxt-app/components/ConferenceCard.vue
+++ b/nuxt-app/components/ConferenceCard.vue
@@ -32,8 +32,8 @@
 <script lang="ts">
 import type { PropType } from 'vue'
 import { computed, defineComponent } from 'vue'
-import { getPlainText } from '~/helpers/getPlainText'
-import type { ConferenceItem, MeetupItem } from '../types';
+import { getPlainText } from '~/helpers/sanitize'
+import type { ConferenceItem } from '../types'
 import LinkButton from './LinkButton.vue'
 import ConferenceCover from './ConferenceCover.vue'
 import MeetupStartAndEnd from './MeetupStartAndEnd.vue'
diff --git a/nuxt-app/components/InnerHtml.vue b/nuxt-app/components/InnerHtml.vue
index b9780ce7..40e774c7 100644
--- a/nuxt-app/components/InnerHtml.vue
+++ b/nuxt-app/components/InnerHtml.vue
@@ -1,10 +1,10 @@
 <template>
-    <!-- we can safely disable this eslint rule since we sanitize is with DOMPurify before -->
+    <!-- v-html is intended here: this component exists to render CMS rich text, sanitised first. -->
     <div class="inner-html" :class="variantClass" v-html="sanitizedHtml" />
 </template>
 
 <script lang="ts">
-import DOMPurify from 'isomorphic-dompurify'
+import { sanitizeHtml } from '~/helpers/sanitize'
 import type { PropType } from 'vue'
 import { computed, defineComponent } from 'vue'
 
@@ -22,7 +22,7 @@ export default defineComponent({
     setup(props) {
         // Convert variant to class string
         const variantClass = computed(() => props.variant.replace(/_/g, '-'))
-        const sanitizedHtml = computed(() => DOMPurify.sanitize(props.html))
+        const sanitizedHtml = computed(() => sanitizeHtml(props.html))
 
         return {
             variantClass,
diff --git a/nuxt-app/components/MeetupCard.vue b/nuxt-app/components/MeetupCard.vue
index c581b1e2..9aa63ee1 100644
--- a/nuxt-app/components/MeetupCard.vue
+++ b/nuxt-app/components/MeetupCard.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { getPlainText } from '~/helpers/getPlainText'
+import { getPlainText } from '~/helpers/sanitize'
 import type { PropType } from 'vue'
 import { computed, defineComponent } from 'vue'
 import type { MeetupItem } from '../types'
diff --git a/nuxt-app/components/NewsTicker.vue b/nuxt-app/components/NewsTicker.vue
index 8d2b1964..d4325b65 100644
--- a/nuxt-app/components/NewsTicker.vue
+++ b/nuxt-app/components/NewsTicker.vue
@@ -15,7 +15,7 @@
 <script lang="ts">
 import type { PropType } from 'vue'
 import { computed, defineComponent } from 'vue'
-import DOMPurify from 'isomorphic-dompurify';
+import { sanitizeInlineHtml } from '~/helpers/sanitize';
 
 export default defineComponent({
     props: {
@@ -28,7 +28,7 @@ export default defineComponent({
         // Create style with animation duration
         const style = computed(() => `animation-duration: ${props.news.join().length * 0.2}s`)
         const preparedNewsItems = computed(() => {
-          return props.news.map(news => `${DOMPurify.sanitize(news, {FORBID_TAGS: ['p']})} +++ `)
+          return props.news.map(news => `${sanitizeInlineHtml(news)} +++ `)
         })
 
         return {
diff --git a/nuxt-app/components/PickOfTheDayListItem.vue b/nuxt-app/components/PickOfTheDayListItem.vue
index 639c802f..ed89ad0d 100644
--- a/nuxt-app/components/PickOfTheDayListItem.vue
+++ b/nuxt-app/components/PickOfTheDayListItem.vue
@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
 import LeaveSiteIcon from '~/assets/icons/leave-site.svg'
-import { getPlainText } from '~/helpers/getPlainText'
+import { getPlainText } from '~/helpers/sanitize'
 import type { PickOfTheDayItem } from '~/types'
 import { computed } from 'vue'
 import DirectusImage from './DirectusImage.vue'
diff --git a/nuxt-app/components/ProfileCreationDone.vue b/nuxt-app/components/ProfileCreationDone.vue
index 2101ba02..ed50d9ab 100644
--- a/nuxt-app/components/ProfileCreationDone.vue
+++ b/nuxt-app/components/ProfileCreationDone.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import DOMPurify from 'isomorphic-dompurify'
+import { sanitizeHtml } from '~/helpers/sanitize'
 import { computed } from 'vue'
 
 const props = defineProps<{
@@ -7,7 +7,7 @@ const props = defineProps<{
 }>()
 
 // CMS rich text, so it keeps its markup — but it must be sanitised before reaching v-html.
-const sanitizedMainText = computed(() => DOMPurify.sanitize(props.mainText))
+const sanitizedMainText = computed(() => sanitizeHtml(props.mainText))
 </script>
 
 <template>
diff --git a/nuxt-app/components/ProfileCreationMainInfos.vue b/nuxt-app/components/ProfileCreationMainInfos.vue
index 64f513ad..41799dce 100644
--- a/nuxt-app/components/ProfileCreationMainInfos.vue
+++ b/nuxt-app/components/ProfileCreationMainInfos.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ProfilePicture from '~/components/ProfilePicture.vue'
 import { useProfileCreationStore } from '~/composables/useProfileCreationStore'
-import DOMPurify from 'isomorphic-dompurify'
+import { sanitizeHtml } from '~/helpers/sanitize'
 import { computed, ref, watch } from 'vue'
 
 const props = defineProps<{
@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 // CMS rich text, so it keeps its markup — but it must be sanitised before reaching v-html.
-const sanitizedIntroText = computed(() => DOMPurify.sanitize(props.introText))
+const sanitizedIntroText = computed(() => sanitizeHtml(props.introText))
 
 const emit = defineEmits(['validityChange'])
 const store = useProfileCreationStore()
diff --git a/nuxt-app/components/SearchResultCard.vue b/nuxt-app/components/SearchResultCard.vue
index a26798bb..63f8cca1 100644
--- a/nuxt-app/components/SearchResultCard.vue
+++ b/nuxt-app/components/SearchResultCard.vue
@@ -38,7 +38,7 @@
 
 <script setup lang="ts">
 import LeaveSiteIcon from '~/assets/icons/leave-site.svg'
-import { getPlainText } from '~/helpers/getPlainText'
+import { getPlainText } from '~/helpers/sanitize'
 import { getFullPodcastTitle, getFullSpeakerName } from 'shared-code'
 import { computed } from 'vue'
 
diff --git a/nuxt-app/components/SpeakerListItem.vue b/nuxt-app/components/SpeakerListItem.vue
index ea74355b..96410cb4 100644
--- a/nuxt-app/components/SpeakerListItem.vue
+++ b/nuxt-app/components/SpeakerListItem.vue
@@ -43,7 +43,7 @@ class="mt-10 md:mt-0"
 import { getFullSpeakerName } from 'shared-code'
 import type { PropType } from 'vue'
 import { computed, defineComponent } from 'vue'
-import { getPlainText } from '~/helpers/getPlainText'
+import { getPlainText } from '~/helpers/sanitize'
 import type { SpeakerItem } from '../types'
 import DirectusImage from './DirectusImage.vue'
 import LinkButton from './LinkButton.vue'
diff --git a/nuxt-app/helpers/getPlainText.ts b/nuxt-app/helpers/sanitize.ts
similarity index 51%
rename from nuxt-app/helpers/getPlainText.ts
rename to nuxt-app/helpers/sanitize.ts
index f53f4ec6..b8d52a08 100644
--- a/nuxt-app/helpers/getPlainText.ts
+++ b/nuxt-app/helpers/sanitize.ts
@@ -1,9 +1,39 @@
 import DOMPurify from 'isomorphic-dompurify'
 
+// The single place that decides how untrusted CMS text is made safe to render. Every `v-html` binding
+// and every plain-text excerpt in the app goes through one of these, so a policy change — tightening
+// the allowed tags, swapping the sanitiser — happens here rather than in each component.
+//
 // Deliberately not re-exported from `helpers/index.ts`: that barrel is imported by server routes, and
 // pulling isomorphic-dompurify in through it would instantiate jsdom for consumers that only wanted a
 // date helper. Import this module directly.
 
+/**
+ * Sanitises CMS rich text for rendering as HTML.
+ *
+ * Use this for anything bound to `v-html`. Keeps the markup editors legitimately produce — headings,
+ * emphasis, links, styled spans — and removes scripts, event handlers and unsafe URLs.
+ */
+export function sanitizeHtml(html: string | null | undefined): string {
+    if (!html) {
+        return ''
+    }
+
+    return DOMPurify.sanitize(html)
+}
+
+/**
+ * Like {@link sanitizeHtml}, but for text rendered inline, where a block element would break the
+ * layout. Used by the news ticker, whose items sit inside a single scrolling line.
+ */
+export function sanitizeInlineHtml(html: string | null | undefined): string {
+    if (!html) {
+        return ''
+    }
+
+    return DOMPurify.sanitize(html, { FORBID_TAGS: ['p'] })
+}
+
 /**
  * Reduces CMS rich text to plain text.
  *
diff --git a/nuxt-app/test/getPlainText.test.ts b/nuxt-app/test/getPlainText.test.ts
deleted file mode 100644
index 9da79255..00000000
--- a/nuxt-app/test/getPlainText.test.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { getPlainText } from '../helpers/getPlainText'
-
-// This replaced `String.replace(/<[^<>]+>/g, '')` at five call sites whose output was then passed to
-// `v-html`. The bypass cases below are the reason the swap happened, so they are the part of this
-// suite worth keeping: they fail if anyone reintroduces regex-based tag stripping.
-
-describe('getPlainText', () => {
-    it('returns empty string for empty input', () => {
-        expect(getPlainText('')).toBe('')
-        expect(getPlainText(null)).toBe('')
-        expect(getPlainText(undefined)).toBe('')
-    })
-
-    it('strips the markup Directus WYSIWYG fields actually contain', () => {
-        expect(getPlainText('<p>Ein <strong>Text</strong> mit <a href="/x">Link</a></p>')).toBe('Ein Text mit Link')
-        expect(getPlainText('<h2>Überschrift</h2>')).toBe('Überschrift')
-        expect(getPlainText('Kein Markup')).toBe('Kein Markup')
-    })
-
-    it('decodes HTML entities, so German text is not garbled', () => {
-        // The regex this replaced left these encoded. That was invisible while the value went to
-        // `v-html` (the browser decoded them) and would have surfaced the moment it moved to `{{ }}`.
-        expect(getPlainText('<p>f&uuml;r Bauk&auml;sten</p>')).toBe('für Baukästen')
-        expect(getPlainText('<p>&quot;Moin&quot;</p>')).toBe('"Moin"')
-        expect(getPlainText('<p>begr&uuml;&szlig;en</p>')).toBe('begrüßen')
-        expect(getPlainText('<h2>Web &amp; AI Edition 2025</h2>')).toBe('Web & AI Edition 2025')
-    })
-
-    it('yields inert text for payloads that defeat regex tag-stripping', () => {
-        // `/<[^<>]+>/g` cannot match a tag containing `<` or `>`, so removing the inner tag
-        // reassembled a working one: `<img<a> src=x onerror=alert(1)>` became
-        // `<img src=x onerror=alert(1)>` and executed once handed to `v-html`.
-        for (const payload of [
-            '<img<a> src=x onerror=alert(1)>',
-            '<svg<a> onload=alert(1)>',
-            '<script>alert(1)</script>',
-            '<math><mtext><script>alert(1)</script></mtext></math>',
-            '<div onclick=alert(1)>x</div>',
-            '<iframe src="https://evil.test"></iframe>',
-        ]) {
-            expect(getPlainText(payload)).not.toMatch(/<[a-zA-Z]/)
-        }
-    })
-
-    it('keeps text content when unwrapping elements', () => {
-        expect(getPlainText('<div onclick=alert(1)>sichtbar</div>')).toBe('sichtbar')
-    })
-})
diff --git a/nuxt-app/test/sanitize.test.ts b/nuxt-app/test/sanitize.test.ts
new file mode 100644
index 00000000..091fb38d
--- /dev/null
+++ b/nuxt-app/test/sanitize.test.ts
@@ -0,0 +1,114 @@
+import { describe, expect, it } from 'vitest'
+import { getPlainText, sanitizeHtml, sanitizeInlineHtml } from '../helpers/sanitize'
+
+// This module is the single place that decides how untrusted CMS text becomes safe to render, so the
+// policy itself is worth pinning down rather than only its callers.
+//
+// `getPlainText` replaced `String.replace(/<[^<>]+>/g, '')` at five call sites whose output was then
+// passed to `v-html`. The bypass cases are the reason the swap happened: they fail if anyone
+// reintroduces regex-based tag stripping.
+
+const XSS_PAYLOADS = [
+    '<img<a> src=x onerror=alert(1)>',
+    '<svg<a> onload=alert(1)>',
+    '<script>alert(1)</script>',
+    '<math><mtext><script>alert(1)</script></mtext></math>',
+    '<iframe src="https://evil.test"></iframe>',
+    '<a href="javascript:alert(1)">click</a>',
+]
+
+// Inspect tags, not the whole string. A sanitised payload often leaves its remains as inert text —
+// `<img<a> src=x onerror=alert(1)>` reduces to the literal text ` src=x onerror=alert(1)&gt;`, where
+// `onerror=` is content rather than an attribute and cannot execute. Searching the raw string for
+// "onerror" would flag that as dangerous when it is not.
+const dangerousTagsIn = (html: string): string[] =>
+    (html.match(/<[a-zA-Z][^>]*>/g) ?? []).filter(
+        (tag) =>
+            /^<(script|iframe|object|embed|style)\b/i.test(tag) ||
+            /\son\w+\s*=/i.test(tag) ||
+            /(href|src|action)\s*=\s*["']?\s*(javascript|vbscript|data):/i.test(tag)
+    )
+
+describe('the danger check used below', () => {
+    it('flags unsanitised payloads, so the assertions are not vacuous', () => {
+        expect(dangerousTagsIn('<img src=x onerror=alert(1)>')).toHaveLength(1)
+        expect(dangerousTagsIn('<script>alert(1)</script>')).toHaveLength(1)
+        expect(dangerousTagsIn('<a href="javascript:alert(1)">x</a>')).toHaveLength(1)
+        expect(dangerousTagsIn('<p>harmless <strong>text</strong></p>')).toHaveLength(0)
+    })
+})
+
+describe('sanitizeHtml', () => {
+    it('keeps the markup CMS editors legitimately produce', () => {
+        // Including the styled span that carries the brand colour in `profile_creation_page`.
+        const rich = '<p>Willkommen bei der <strong>programmier.<span style="color: #cfff00;">bar</span></strong></p>'
+        expect(sanitizeHtml(rich)).toBe(rich)
+        expect(sanitizeHtml('<h2>Titel</h2><ul><li>eins</li></ul>')).toBe('<h2>Titel</h2><ul><li>eins</li></ul>')
+        expect(sanitizeHtml('<a href="/x">Link</a>')).toBe('<a href="/x">Link</a>')
+    })
+
+    it('removes scripts, event handlers and unsafe URLs', () => {
+        for (const payload of XSS_PAYLOADS) {
+            expect(dangerousTagsIn(sanitizeHtml(payload))).toEqual([])
+        }
+    })
+
+    it('handles absent input', () => {
+        expect(sanitizeHtml('')).toBe('')
+        expect(sanitizeHtml(null)).toBe('')
+        expect(sanitizeHtml(undefined)).toBe('')
+    })
+})
+
+describe('sanitizeInlineHtml', () => {
+    it('drops paragraphs but keeps their text, so the ticker stays on one line', () => {
+        expect(sanitizeInlineHtml('<p>Neue Folgen dienstags</p>')).toBe('Neue Folgen dienstags')
+        expect(sanitizeInlineHtml('<p>eins</p><p>zwei</p>')).toBe('einszwei')
+    })
+
+    it('still allows inline markup', () => {
+        expect(sanitizeInlineHtml('<strong>wichtig</strong>')).toBe('<strong>wichtig</strong>')
+    })
+
+    it('removes the same attacks as the default policy', () => {
+        for (const payload of XSS_PAYLOADS) {
+            expect(dangerousTagsIn(sanitizeInlineHtml(payload))).toEqual([])
+        }
+    })
+})
+
+describe('getPlainText', () => {
+    it('returns empty string for empty input', () => {
+        expect(getPlainText('')).toBe('')
+        expect(getPlainText(null)).toBe('')
+        expect(getPlainText(undefined)).toBe('')
+    })
+
+    it('strips the markup Directus WYSIWYG fields actually contain', () => {
+        expect(getPlainText('<p>Ein <strong>Text</strong> mit <a href="/x">Link</a></p>')).toBe('Ein Text mit Link')
+        expect(getPlainText('<h2>Überschrift</h2>')).toBe('Überschrift')
+        expect(getPlainText('Kein Markup')).toBe('Kein Markup')
+    })
+
+    it('decodes HTML entities, so German text is not garbled', () => {
+        // The regex this replaced left these encoded. That was invisible while the value went to
+        // `v-html` (the browser decoded them) and would have surfaced the moment it moved to `{{ }}`.
+        expect(getPlainText('<p>f&uuml;r Bauk&auml;sten</p>')).toBe('für Baukästen')
+        expect(getPlainText('<p>&quot;Moin&quot;</p>')).toBe('"Moin"')
+        expect(getPlainText('<p>begr&uuml;&szlig;en</p>')).toBe('begrüßen')
+        expect(getPlainText('<h2>Web &amp; AI Edition 2025</h2>')).toBe('Web & AI Edition 2025')
+    })
+
+    it('yields inert text for payloads that defeat regex tag-stripping', () => {
+        // `/<[^<>]+>/g` cannot match a tag containing `<` or `>`, so removing the inner tag
+        // reassembled a working one: `<img<a> src=x onerror=alert(1)>` became
+        // `<img src=x onerror=alert(1)>` and executed once handed to `v-html`.
+        for (const payload of [...XSS_PAYLOADS, '<div onclick=alert(1)>x</div>']) {
+            expect(getPlainText(payload)).not.toMatch(/<[a-zA-Z]/)
+        }
+    })
+
+    it('keeps text content when unwrapping elements', () => {
+        expect(getPlainText('<div onclick=alert(1)>sichtbar</div>')).toBe('sichtbar')
+    })
+})