support iframes

denoland · Oct 25, 2021 · 2a7937b · 2a7937b
1 parent f4c4470
commit 2a7937b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 9 deletions.
diff --git a/example/content.md b/example/content.md
@@ -89,6 +89,8 @@ async function serve(conn: Deno.Conn) {
 You can find a deeper introduction, examples, and environment setup guides in
 the [manual](https://deno.land/manual).
 
+<iframe width="100%" height="600" src="https://embed.deno.com/playground/urlpattern?layout=both"></iframe>
+
 The complete API reference is available at the runtime
 [documentation](https://doc.deno.land).
 

diff --git a/example/main.ts b/example/main.ts
@@ -12,7 +12,9 @@ const CONTENT_PATH = new URL("./content.md", import.meta.url);
 async function handler(_req: Request): Promise<Response> {
   try {
     const markdown = await Deno.readTextFile(CONTENT_PATH);
-    const body = render(markdown, "/");
+    const body = render(markdown, {
+      allowIframes: true,
+    });
     const html = `<!DOCTYPE html>
   <html lang="en">
     <head>

diff --git a/mod.ts b/mod.ts
@@ -34,21 +34,30 @@ class Renderer extends marked.Renderer {
   }
 }
 
-export function render(markdown: string, baseUrl: string | undefined): string {
+export interface RenderOptions {
+  baseUrl?: string;
+  allowIframes?: boolean;
+}
+
+export function render(markdown: string, opts: RenderOptions = {}): string {
   markdown = emojify(markdown);
 
   const html = marked(markdown, {
-    baseUrl,
+    baseUrl: opts.baseUrl,
     gfm: true,
     renderer: new Renderer(),
   });
 
+  const allowedTags = sanitizeHtml.defaults.allowedTags.concat([
+    "img",
+    "svg",
+    "path",
+  ]);
+  if (opts.allowIframes) {
+    allowedTags.push("iframe");
+  }
   return sanitizeHtml(html, {
-    allowedTags: sanitizeHtml.defaults.allowedTags.concat([
-      "img",
-      "svg",
-      "path",
-    ]),
+    allowedTags,
     allowedAttributes: {
       ...sanitizeHtml.defaults.allowedAttributes,
       img: ["src", "alt", "height", "width", "align"],
@@ -61,6 +70,7 @@ export function render(markdown: string, baseUrl: string | undefined): string {
       h4: ["id"],
       h5: ["id"],
       h6: ["id"],
+      iframe: ["src", "width", "height"], // Only used when iframe tags are allowed in the first place.
     },
     allowedClasses: {
       div: ["highlight"],

diff --git a/style.js b/style.js
diff --git a/style/main.scss b/style/main.scss
@@ -15,6 +15,12 @@
   ul {
     list-style: disc;
   }
+
+  iframe {
+    background-color: white;
+    border: 0;
+    margin-bottom: 16px;
+  }
 }
 
 @import "@primer/css/markdown/index.scss";