Merge pull request #12 from jonasfj/fix-11

Fix issue #11, only use self-closing tags for void-elements

Author: jonasfj

sanitize_html/CHANGELOG.md

@@ -1,3 +1,9 @@
+## v1.3.0
+ * Only print self-closing tags for
+   [void-elements](https://www.w3.org/TR/html5/syntax.html#void-elements).
+   This could cause `<strong />` in HTML documents, which is can be interpreted
+   as an opening tag by HTML5 parsers, causing the HTML structure to break.
+
 ## v1.2.0
  * Does not depend on `universal_html`, uses custom HTML rendering for the output.
  * Allowed classes are kept, even if there are non-allowed classes present on the same element.

sanitize_html/lib/src/html_formatter.dart

@@ -19,6 +19,26 @@ import 'package:html/dom.dart';
 final _attrEscape = HtmlEscape(HtmlEscapeMode.attribute);
 final _textEscape = HtmlEscape(HtmlEscapeMode.element);
 
+// Set of HTML5 VOID-elements.
+//
+// See: https://www.w3.org/TR/html5/syntax.html#void-elements
+final _voidElements = <String>{
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+};
+
 String formatHtmlNode(Node node) {
   return _HtmlFormatter()._format(node);
 }
@@ -63,10 +83,13 @@ class _HtmlFormatter {
       _sb.write('>');
       _writeNodes(elem.nodes);
       _sb.write('</$tagName>');
-    } else if (tagName.toLowerCase() == 'script') {
-      _sb.write('></$tagName>');
-    } else {
+    } else if (_voidElements.contains(tagName.toLowerCase())) {
+      // Only VOID-elements cannot have a closing tag.
+      // https://www.w3.org/TR/html5/syntax.html#writing-html-documents-elements
       _sb.write(' />');
+    } else {
+      // If not a VOID-element, it is always safe to have a closing tag.
+      _sb.write('></$tagName>');
     }
   }
 }

sanitize_html/pubspec.yaml

@@ -1,5 +1,5 @@
 name: sanitize_html
-version: 1.2.0
+version: 1.3.0
 authors:
   - Jonas Finnemann Jensen <[email protected]>
 description: |

sanitize_html/test/sanitize_html_test.dart

@@ -111,4 +111,10 @@ void main() {
   testContains('<div><div id="x">a</div></div>', '<div><div>a</div></div>');
   testContains('<a href="a.html">a</a><a href="b.html">b</a>',
       '<a href="a.html">a</a><a href="b.html">b</a>');
+
+  // test void elements
+  testContains('<strong></strong> hello', '<strong>');
+  testContains('<strong></strong> hello', '</strong>');
+  testNotContains('<strong></strong> hello', '<strong />');
+  testContains('<br>hello</br>', '<br />');
 }