Merge pull request #1295 from UziTech/demo-xss

use iframe to sandbox generated html
This commit is contained in:
Steven 2018-07-09 13:01:06 -04:00 committed by GitHub
commit 9386fa93a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 38 additions and 5 deletions

View File

@ -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)

View File

@ -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

View File

@ -53,3 +53,11 @@ header h1 {
flex-grow: 1;
flex-shrink: 1;
}
#preview {
display: flex;
}
#preview iframe {
flex-grow: 1;
}

View File

@ -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'));

View File

@ -42,6 +42,7 @@
<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>

12
docs/demo/preview.html Normal file
View File

@ -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>