mirror of
https://github.com/markedjs/marked
synced 2024-11-22 08:12:33 +00:00
Merge pull request #1295 from UziTech/demo-xss
use iframe to sandbox generated html
This commit is contained in:
commit
9386fa93a6
@ -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)
|
||||
|
||||
|
@ -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
|
||||
|
@ -53,3 +53,11 @@ header h1 {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
#preview {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#preview iframe {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
@ -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'));
|
||||
|
||||
|
@ -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
12
docs/demo/preview.html
Normal 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>
|
Loading…
Reference in New Issue
Block a user