feat(render): support iframe tag (#4096)

* feat: add iframe renderer support

* feat: add iframe renderer support

apps/desktop/changelog/next.md

@@ -2,6 +2,8 @@
 
 ## Shiny new things
 
+- Add iframe renderer support
+
 ## Improvements
 
 ## No longer broken

apps/desktop/layer/renderer/src/lib/parse-html.ts

@@ -125,6 +125,25 @@ export const parseHtml = (
         }
         return createElement("input", props)
       },
+      iframe: ({ node, ...props }) => {
+        const { width, height, src, ...rest } = props
+
+        // Apply security sandbox attributes and responsive styling
+        return createElement("iframe", {
+          ...rest,
+          src,
+          width: width || "100%",
+          height: height || "315",
+          className: "max-w-full rounded",
+          sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
+          allowFullScreen: true,
+          loading: "lazy",
+          style: {
+            aspectRatio: width && height ? `${width} / ${height}` : "16 / 9",
+            ...rest.style,
+          },
+        })
+      },
       pre: ({ node, ...props }) => {
         if (!props.children) return null
 

packages/internal/utils/src/html.ts

@@ -59,6 +59,7 @@ export const parseHtml = (content: string, options?: ParseHtmlOptions) => {
     rehypeSchema.tagNames = [
       ...rehypeSchema.tagNames!,
       "video",
+      "iframe",
       "style",
       "figure",
       // SVG
@@ -80,6 +81,18 @@ export const parseHtml = (content: string, options?: ParseHtmlOptions) => {
         ? [...rehypeSchema.attributes!["*"]!, "style", "class"]
         : rehypeSchema.attributes!["*"]!,
       video: ["src", "poster"],
+      iframe: [
+        "src",
+        "width",
+        "height",
+        "frameborder",
+        "allowfullscreen",
+        "sandbox",
+        "loading",
+        "title",
+        "id",
+        "class",
+      ],
       source: ["src", "type"],
 
       svg: [