JSFiddle - React, Tailwind, and code Playground

by vinishanto

HTML

<!doctype html>
<html>

    <head>
        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.0.11/purify.min.js"></script>
    </head>

    <body>
        <button onclick="parseMarkDown()">Parse</button>
        <div id="unsafecontent"></div>
		<hr/>
        <div id="safecontent"></div>
    </body>

</html>

JavaScript

var input = `<script>alert("hello")</script>
https://jsfiddle.net/Geetika/otLqm8e5/52/
\nI am a **rich text** make me _markdown_ \n support\n\nHeading\n=======\nSub-heading\n-----------\nTwo spaces at the end of a line  produces a line break.\n Text attributes _italic_, **bold**, \`monospace\`.\n Horizontal rule:\n---\n ~~strikethrough~~ \n\n Bullet list:\n * apples\n * oranges\n * pears \n\n Numbered list: \n 1. lather \n 2. rinse \n 3. repeat \n\n An [example](http://example.com).\n\n ![Image](Icon-pictures.png 'icon') \n\n Inline <abbr title='Hypertext Markup Language'>HTML</abbr> is supported.`

var unsafecontent = document.getElementById('unsafecontent')
var safecontent = document.getElementById('safecontent')

function parseMarkDown() {
    var unsafehtml = marked(input);
    //alert(unsafehtml);
    console.log(unsafehtml);
    unsafecontent.innerHTML = unsafehtml;


    var safehtml = DOMPurify.sanitize(unsafehtml);
    //alert(safehtml);
    console.log(safehtml);
    safecontent.innerHTML = safehtml;


    testDOMPurify();

}


function testDOMPurify() {
	var safecontent = document.getElementById('safecontent')
	safecontent.innerHTML+="<hr/>";
    safecontent.innerHTML += DOMPurify.sanitize('<img src=x onerror=alert(1)//>'); 
	// becomes <img src="x">
    safecontent.innerHTML += DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>'); 
	// becomes <svg><g></g></svg>
    safecontent.innerHTML += DOMPurify.sanitize('<p>abc<iframe//src=jAva&Tab;script:alert(3)>def</p>'); 
	// becomes <p>abcdef</p>
    safecontent.innerHTML += DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>'); 
	// becomes <table><tbody><tr><td>HELLO</td></tr></tbody></table>
    safecontent.innerHTML += DOMPurify.sanitize('<UL><li><A HREF=//google.com>click</UL>'); 
	// becomes <ul><li><a href="//google.com">click</a></li></ul>
}