From 8d2f2a6d2d6ff0e960d01d72250d860935a982e0 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Tue, 30 Jun 2026 09:24:43 +0100
Subject: [PATCH] fix(landing-page): render iframe embed codes instead of
 stripping them

The embed section passed code through SafeHtmlContent which ran DOMPurify
with FORBID_TAGS including 'iframe', silently removing the element.

Replaced SafeHtmlContent with a new sanitizeEmbedHtml() that uses a
whitelist of ALLOWED_TAGS: ['iframe'] and restricts src to https: only,
so Google Forms, YouTube, and other https embeds render while javascript:
sources and non-iframe tags are still blocked.
---
 .../src/custom/org-landing-page/embed.svelte  |  8 +++---
 packages/ui/src/tools/sanitize.ts             | 28 +++++++++++++++++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/custom/org-landing-page/embed.svelte b/packages/ui/src/custom/org-landing-page/embed.svelte
index 7032bb6a..0475451f 100644
--- a/packages/ui/src/custom/org-landing-page/embed.svelte
+++ b/packages/ui/src/custom/org-landing-page/embed.svelte
@@ -2,7 +2,7 @@
   import type { OrgLandingPageLabels, OrgLandingPageTheme, LandingPageEmbed } from './types';
   import SecondaryActionButton from './secondary-action-button.svelte';
   import EditableLandingSection from './editable-section.svelte';
-  import SafeHtmlContent from '../safe-html-content/safe-html-content.svelte';
+  import { sanitizeEmbedHtml } from '../../tools/sanitize';
 
   let {
     embed,
@@ -52,7 +52,7 @@
               style="border: 1px solid #262a35; background: #0f1218; box-shadow: 0 30px 90px -30px rgba(0,0,0,0.7);"
             >
               <div class="ui:p-5 ui:overflow-x-auto" style="color: #e9eaed;">
-                <SafeHtmlContent content={embed.code} />
+                {@html sanitizeEmbedHtml(embed.code)}
               </div>
             </div>
           {/if}
@@ -77,7 +77,7 @@
           {/if}
           {#if embed.code}
             <div class="ui:flex ui:w-full ui:justify-center">
-              <SafeHtmlContent content={embed.code} />
+              {@html sanitizeEmbedHtml(embed.code)}
             </div>
           {/if}
         </div>
@@ -96,7 +96,7 @@
           {/if}
           {#if embed.code}
             <div class="ui:flex ui:w-full ui:justify-center">
-              <SafeHtmlContent content={embed.code} />
+              {@html sanitizeEmbedHtml(embed.code)}
             </div>
           {/if}
         </div>
diff --git a/packages/ui/src/tools/sanitize.ts b/packages/ui/src/tools/sanitize.ts
index 145af02f..9c02a426 100644
--- a/packages/ui/src/tools/sanitize.ts
+++ b/packages/ui/src/tools/sanitize.ts
@@ -133,6 +133,34 @@ export function splitHtmlAndSvg(html: string): ContentSegment[] {
   return segments;
 }
 
+/**
+ * Sanitizes an embed code snippet (e.g. a pasted <iframe>). Allows only
+ * <iframe> tags with https: sources; everything else is stripped. Use this
+ * for org landing-page embed sections — not for general rich-text content.
+ */
+export function sanitizeEmbedHtml(html: string): string {
+  if (typeof html !== 'string') return '';
+  if (!browser) return '';
+
+  return DOMPurify.sanitize(html, {
+    ALLOWED_TAGS: ['iframe'],
+    ALLOWED_ATTR: [
+      'src',
+      'width',
+      'height',
+      'frameborder',
+      'marginheight',
+      'marginwidth',
+      'title',
+      'loading',
+      'allow',
+      'allowfullscreen',
+      'sandbox'
+    ],
+    ALLOWED_URI_REGEXP: /^https:/i
+  });
+}
+
 /**
  * Strips all HTML tags and returns plain text
  * Use this when you only need the text content