support iframes

lucacasonato · lucacasonato · commit 2a7937b42c21 · 2021-10-25T13:35:58.000+02:00
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";

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,12 @@`
`15`	`15`	`ul {`
`16`	`16`	`list-style: disc;`
`17`	`17`	`}`
	`18`	`+`
	`19`	`+ iframe {`
	`20`	`+ background-color: white;`
	`21`	`+ border: 0;`
	`22`	`+ margin-bottom: 16px;`
	`23`	`+ }`
`18`	`24`	`}`
`19`	`25`
`20`	`26`	`@import "@primer/css/markdown/index.scss";`