use DOMParser instead of a hidden iframe, added benchmarks

alex-jitbit · alex-jitbit · commit 805258b9e4fc · 2022-06-10T12:15:33.000+03:00
fixes #15 fixes #8
diff --git a/HtmlSanitizer.js b/HtmlSanitizer.js
@@ -22,6 +22,8 @@ var HtmlSanitizer = new (function () {
 
 	var uriAttributes_ = { 'href': true, 'action': true };
 
+	var _parser = new DOMParser();
+
 	this.SanitizeHtml = function (input, extraTags, extraAttributes) {
 		extraTags = (extraTags && extraTags instanceof Array) ? extraTags : [];
 		extraAttributes = (extraAttributes && extraAttributes instanceof Array) ? extraAttributes : [];
@@ -32,23 +34,9 @@ var HtmlSanitizer = new (function () {
 		//firefox "bogus node" workaround
 		if (input == "<br>") return "";
 
-		var iframe = document.createElement('iframe');
-		if (iframe['sandbox'] === undefined) {
-			alert('Your browser does not support sandboxed iframes. Please upgrade to a modern browser.');
-			return '';
-		}
-		iframe['sandbox'] = 'allow-same-origin';
-		iframe.style.display = 'none';
-		document.body.appendChild(iframe); // necessary so the iframe contains a document
-		var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
-		if (iframedoc.body == null) iframedoc.write("<body></body>"); // null in IE
-		iframedoc.body.innerHTML = input;
-
-		//DOM clobbering check
-		if (iframedoc.body.tagName !== 'BODY')
-			iframedoc.body.remove();
-		if (typeof iframedoc.createElement !== 'function')
-			iframedoc.createElement.remove();
+		if (input.indexOf("<body")==-1) input = "<body>" + input + "</body>"; //add "body" otherwise some tags are skipped, like <style>
+
+		var iframedoc = _parser.parseFromString(input, "text/html");
 
 		function makeSanitizedCopy(node) {
 			if (node.nodeType == Node.TEXT_NODE) {
@@ -96,7 +84,7 @@ var HtmlSanitizer = new (function () {
 		};
 
 		var resultElement = makeSanitizedCopy(iframedoc.body);
-		document.body.removeChild(iframe);
+		
 		return resultElement.innerHTML
 			.replace(/<br[^>]*>(\S)/g, "<br>\n$1")
 			.replace(/div><div/g, "div>\n<div"); //replace is just for cleaner code
diff --git a/README.md b/README.md
@@ -36,12 +36,21 @@ npm install @jitbit/htmlsanitizer
 
 The sanitizer uses [whitelisting](https://en.wikipedia.org/wiki/Whitelisting) approach (as opposed to "blacklisting") to clean out everything that's not allowed.
 
-## Speed
+## Speed & Benchmarks
 
-It uses browser/DOM to parse the html by creating an invisible "sandboxed" iframe (hence the browser "front-end only" requirement) which makes it **much faster** than "pure JavaScript" sanitizers.
+It uses browser/DOM to parse the html by using `DOMParser` object (hence the browser "front-end only" requirement) which makes it **much faster** than "pure JavaScript" sanitizers.
 
 Tested on `https://www.bbc.co.uk` homepage - the page is sanitized **~370 times per second** on an i5 core CPU in Firefox Quantum (tested via `benchmark.js`)
 
+Comparing HtmlSanitizer vs DOMPurify benchmark:
+
+```
+starting benchmark...
+HtmlSanitizer x 7,092 ops/sec ±4.52% (55 runs sampled)
+DOMPurify x 4,479 ops/sec ±4.48% (58 runs sampled)
+Fastest is HtmlSanitizer
+```
+
 ## Tags allowed by default
 
 `a, abbr, b, blockquote, body, br, center, code, div, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, label, li, ol, p, pre, small, source, span, strong, table, tbody, tr, td, th, thead, ul, u, video`
diff --git a/benchmark.html b/benchmark.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="https://cdn.jsdelivr.net/gh/cure53/DOMPurify/dist/purify.js"></script>
+		<script src="HtmlSanitizer.js"></script>
+
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.4/benchmark.min.js"></script>
+	</head>
+	<body>
+		<pre id="mylog"></pre>
+
+		<script>
+			var testcontent = `<form id="action_online_form" method="post" action="./../adm/index.php?i=acp_main&amp;sid=534a8e9c03d8251f56daeb0d857cc062&amp;mode=main" data-ajax="true">
+						<dl>
+							<dt><label for="action_online">Vynulovat rekord uživatelů online</label><br><span class="responsive-hide">&nbsp;</span></dt>
+							<dd><input type="hidden" name="action" value="online"><input class="button2" type="submit" id="action_online" name="action_online" value="Spustit nyní"></dd>
+						</dl>
+					</form>`;
+
+			mylog = (...args) => {
+				args.map(arg => document.querySelector("#mylog").innerHTML += arg + '<br>')
+			}
+
+			mylog("starting...");
+
+			var suite = new Benchmark.Suite;
+
+			// add tests
+			suite.add('HtmlSanitizer', function () {
+				var str = HtmlSanitizer.SanitizeHtml(testcontent);
+			})
+			.add('DOMPurify', function () {
+				DOMPurify.sanitize(testcontent, { ALLOWED_TAGS: ['b'] });
+			})
+			// add listeners
+			.on('cycle', function (event) {
+				mylog(String(event.target));
+			})
+			.on('complete', function () {
+				mylog('Fastest is ' + this.filter('fastest').map('name'));
+			})
+			// run async
+			.run({ 'async': true });
+		</script>
+	</body>
+</html>
diff --git a/tests.html b/tests.html
@@ -14,8 +14,8 @@
 
     <script>
     QUnit.test("Html Sanitizer", function( assert ) {
-		assert.equal(HtmlSanitizer.SanitizeHtml("<p>Hello world!</p><img name=createElement>"), "<p>Hello world!</p>");
-		assert.equal(HtmlSanitizer.SanitizeHtml("<p>Hello world!</p><img name=body>"), "<p>Hello world!</p>");
+		assert.equal(HtmlSanitizer.SanitizeHtml("<p>Hello world!</p><img name=createElement>"), "<p>Hello world!</p><img>");
+		assert.equal(HtmlSanitizer.SanitizeHtml("<p>Hello world!</p><img name=body>"), "<p>Hello world!</p><img>");
         assert.equal(HtmlSanitizer.SanitizeHtml("<div> <script> Alert('xss!'); </scr" + "ipt> </div>"), "<div>  </div>");
         assert.equal(HtmlSanitizer.SanitizeHtml("<p class='MsoNormal' style='margin-bottom:10.0pt;line-height:115%'><b>Official - SBU&nbsp;</b><o:p></o:p></p>"), "<p><b>Official - SBU&nbsp;</b></p>");
         assert.equal(HtmlSanitizer.SanitizeHtml("<span style='color: rgb(102, 102, 102); font-size: 8px;'><i>NOTE</i></span>"), "<span style=\"color: rgb(102, 102, 102); font-size: 8px;\"><i>NOTE</i></span>");
