mirrors/marked
1
0
Fork 0
mirror of https://github.com/markedjs/marked synced 2024-11-22 17:37:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #1295 from UziTech/demo-xss

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -29,7 +29,9 @@ Our [documentation pages](https://marked.js.org) are also rendered using marked
**In-browser:** `npm install marked --save` **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** **CLI**
@ -64,4 +66,3 @@ $ cat hello.html
## License ## License
Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License) Copyright (c) 2011-2018, Christopher Jeffrey. (MIT License)

2
docs/README.md
View File

@ -39,6 +39,8 @@ These documentation pages are also rendered using marked 💯
<h2 id="usage">Usage</h2> <h2 id="usage">Usage</h2>
### Warning: 🚨 Marked does not [sanitize](https://marked.js.org/#/USING_ADVANCED.md#options) the output HTML by default 🚨
**CLI** **CLI**
``` bash ``` bash

8
docs/demo/demo.css
View File

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

15
docs/demo/demo.js
View File

@ -9,7 +9,7 @@ if (!window.fetch) {
var $inputElem = document.querySelector('#input'); var $inputElem = document.querySelector('#input');
var $outputTypeElem = document.querySelector('#outputType'); var $outputTypeElem = document.querySelector('#outputType');
var $previewElem = document.querySelector('#preview'); var $previewIframe = document.querySelector('#preview iframe');
var $permalinkElem = document.querySelector('#permalink'); var $permalinkElem = document.querySelector('#permalink');
var $clearElem = document.querySelector('#clear'); var $clearElem = document.querySelector('#clear');
var $htmlElem = document.querySelector('#html'); var $htmlElem = document.querySelector('#html');
@ -20,6 +20,13 @@ var $activeElem = null;
var changeTimeout = null; var changeTimeout = null;
var search = searchToObject(); var search = searchToObject();
var iframeLoaded = false;
$previewIframe.addEventListener('load', function () {
iframeLoaded = true;
inputDirty = true;
checkForChanges();
})
if ('text' in search) { if ('text' in search) {
$inputElem.value = search.text; $inputElem.value = search.text;
} else { } else {
@ -51,7 +58,7 @@ function handleChange() {
$panes[i].style.display = 'none'; $panes[i].style.display = 'none';
} }
$activeElem = document.querySelector('#' + $outputTypeElem.value); $activeElem = document.querySelector('#' + $outputTypeElem.value);
$activeElem.style.display = 'block'; $activeElem.style.display = '';
updateLink(); updateLink();
}; };
@ -155,7 +162,9 @@ function checkForChanges() {
var parsed = marked.parser(lexed); var parsed = marked.parser(lexed);
$previewElem.innerHTML = (parsed); if (iframeLoaded) {
$previewIframe.contentDocument.body.innerHTML = (parsed);
}
$htmlElem.value = (parsed); $htmlElem.value = (parsed);
$lexerElem.value = (lexedList.join('\n')); $lexerElem.value = (lexedList.join('\n'));

1
docs/demo/index.html
View File

@ -42,6 +42,7 @@
<noscript> <noscript>
<h2>You'll need to enable Javascript to use this tool.</h2> <h2>You'll need to enable Javascript to use this tool.</h2>
</noscript> </noscript>
<iframe src="./preview.html" frameborder="0" sandbox="allow-same-origin"></iframe>
</div> </div>
<textarea id="html" class="pane" readonly="readonly"></textarea> <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>