From 59b1146be78986d4a36b5817f958ee288f0e2f78 Mon Sep 17 00:00:00 2001 From: Tony Brix Date: Sun, 24 Jun 2018 01:46:25 -0500 Subject: [PATCH 1/4] use iframe to sandbox generated html --- docs/demo/demo.css | 8 ++++++++ docs/demo/demo.js | 15 ++++++++++++--- docs/demo/index.html | 1 + docs/demo/preview.html | 12 ++++++++++++ 4 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 docs/demo/preview.html diff --git a/docs/demo/demo.css b/docs/demo/demo.css index 8e3e8fc5e8..e459d86870 100644 --- 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 index 8db8e7146b..f4d684bf04 100644 --- 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 index cc2b378d65..57062e9ae1 100644 --- a/docs/demo/index.html +++ b/docs/demo/index.html @@ -42,6 +42,7 @@

Marked Demo

+ diff --git a/docs/demo/preview.html b/docs/demo/preview.html new file mode 100644 index 0000000000..7e8c89fec5 --- /dev/null +++ b/docs/demo/preview.html @@ -0,0 +1,12 @@ + + + + + + marked.js preview + + + + + + From 22a27d04eb48be7222d9dea95f8a9972a30c2183 Mon Sep 17 00:00:00 2001 From: Tony Brix Date: Sun, 24 Jun 2018 01:56:52 -0500 Subject: [PATCH 2/4] add warning to README and docs --- README.md | 5 +++-- docs/README.md | 2 ++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7d3af29378..b5a7ca6286 100644 --- 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 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 index 6df149b860..f4de16bd9f 100644 --- a/docs/README.md +++ b/docs/README.md @@ -39,6 +39,8 @@ These documentation pages are also rendered using marked 💯

Usage

+### Warning: 🚨 Marked does not sanitize the output HTML by default 🚨 + **CLI** ``` bash From 21f20276b0b15273b9bf209548efa3e77acce71d Mon Sep 17 00:00:00 2001 From: Tony Brix Date: Sun, 24 Jun 2018 02:02:11 -0500 Subject: [PATCH 3/4] lint --- docs/demo/demo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/demo/demo.js b/docs/demo/demo.js index f4d684bf04..f12724596a 100644 --- a/docs/demo/demo.js +++ b/docs/demo/demo.js @@ -21,7 +21,7 @@ var changeTimeout = null; var search = searchToObject(); var iframeLoaded = false; -$previewIframe.addEventListener("load", function () { +$previewIframe.addEventListener('load', function () { iframeLoaded = true; inputDirty = true; checkForChanges(); From d42f08634ddbed38fd02a82c9ea1934d0b761290 Mon Sep 17 00:00:00 2001 From: Tony Brix Date: Wed, 27 Jun 2018 00:43:57 -0500 Subject: [PATCH 4/4] link to options --- README.md | 2 +- docs/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b5a7ca6286..1539f3cb3c 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Our [documentation pages](https://marked.js.org) are also rendered using marked ## Usage -### Warning: 🚨 Marked does not sanitize the output HTML by default 🚨 +### Warning: 🚨 Marked does not [sanitize](https://marked.js.org/#/USING_ADVANCED.md#options) the output HTML by default 🚨 **CLI** diff --git a/docs/README.md b/docs/README.md index f4de16bd9f..f41160ce9f 100644 --- a/docs/README.md +++ b/docs/README.md @@ -39,7 +39,7 @@ These documentation pages are also rendered using marked 💯

Usage

-### Warning: 🚨 Marked does not sanitize the output HTML by default 🚨 +### Warning: 🚨 Marked does not [sanitize](https://marked.js.org/#/USING_ADVANCED.md#options) the output HTML by default 🚨 **CLI**