Merge pull request #1295 from UziTech/demo-xss

styfle · web-flow · commit 9386fa93a642 · 2018-07-09T13:01:06.000-04:00
use iframe to sandbox generated html
diff --git a/README.md b/README.md
@@ -29,7 +29,9 @@ Our [documentation pages](https://marked.js.org) are also rendered using marked
 
 **In-browser:** `npm install marked --save`
 
-## Usage 
+## Usage
+
+### Warning: 🚨 Marked does not [sanitize](https://marked.js.org/#/USING_ADVANCED.md#options) the output HTML by default 🚨
 
 **CLI**
 
@@ -64,4 +66,3 @@ $ cat hello.html
 ## License
 
 Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License)
-
diff --git a/docs/README.md b/docs/README.md
@@ -39,6 +39,8 @@ These documentation pages are also rendered using marked 💯
 
 <h2 id="usage">Usage</h2>
 
+### Warning: 🚨 Marked does not [sanitize](https://marked.js.org/#/USING_ADVANCED.md#options) the output HTML by default 🚨
+
 **CLI**
 
 ``` bash
diff --git a/docs/demo/demo.css b/docs/demo/demo.css
@@ -53,3 +53,11 @@ header h1 {
 	flex-grow: 1;
 	flex-shrink: 1;
 }
+
+#preview {
+	display: flex;
+}
+
+#preview iframe {
+	flex-grow: 1;
+}
diff --git a/docs/demo/demo.js b/docs/demo/demo.js
@@ -9,7 +9,7 @@ if (!window.fetch) {
 
 var $inputElem = document.querySelector('#input');
 var $outputTypeElem = document.querySelector('#outputType');
-var $previewElem = document.querySelector('#preview');
+var $previewIframe = document.querySelector('#preview iframe');
 var $permalinkElem = document.querySelector('#permalink');
 var $clearElem = document.querySelector('#clear');
 var $htmlElem = document.querySelector('#html');
@@ -20,6 +20,13 @@ var $activeElem = null;
 var changeTimeout = null;
 var search = searchToObject();
 
+var iframeLoaded = false;
+$previewIframe.addEventListener('load', function () {
+  iframeLoaded = true;
+  inputDirty = true;
+  checkForChanges();
+})
+
 if ('text' in search) {
   $inputElem.value = search.text;
 } else {
@@ -51,7 +58,7 @@ function handleChange() {
     $panes[i].style.display = 'none';
   }
   $activeElem = document.querySelector('#' + $outputTypeElem.value);
-  $activeElem.style.display = 'block';
+  $activeElem.style.display = '';
 
   updateLink();
 };
@@ -155,7 +162,9 @@ function checkForChanges() {
 
     var parsed = marked.parser(lexed);
 
-    $previewElem.innerHTML = (parsed);
+    if (iframeLoaded) {
+      $previewIframe.contentDocument.body.innerHTML = (parsed);
+    }
     $htmlElem.value = (parsed);
     $lexerElem.value = (lexedList.join('\n'));
 
diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -42,6 +42,7 @@ <h1>Marked Demo</h1>
           <noscript>
             <h2>You'll need to enable Javascript to use this tool.</h2>
           </noscript>
+          <iframe src="./preview.html" frameborder="0" sandbox="allow-same-origin"></iframe>
         </div>
 
         <textarea id="html" class="pane" readonly="readonly"></textarea>
diff --git a/docs/demo/preview.html b/docs/demo/preview.html
@@ -0,0 +1,12 @@
+
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>marked.js preview</title>
+  <link rel="stylesheet" href="./demo.css" />
+  <base target="_parent">
+</head>
+<body>
+</body>
+</html>
