stripHTML - preserve leading and trailing spaces and strip script and on* attributes

packages/dom/src/dom/strip-html.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import safeHTML from './safe-html';
+
 /**
  * Removes any HTML tags from the provided string.
  *
@@ -6,9 +11,11 @@
  * @return {string} The text content with any html removed.
  */
 export default function stripHTML( html ) {
-	const document = new window.DOMParser().parseFromString(
-		html,
-		'text/html'
-	);
-	return document.body.textContent || '';
+	// Remove any script tags or on* attributes otherwise their *contents* will be left
+	// in place following removal of HTML tags.
+	html = safeHTML( html );
+
+	const doc = document.implementation.createHTMLDocument( '' );
+	doc.body.innerHTML = html;
+	return doc.body.textContent || '';
 }

packages/dom/src/dom/test/strip-html.js

@@ -0,0 +1,64 @@
+/**
+ * Internal dependencies
+ */
+import stripHTML from '../strip-html';
+
+describe( 'stripHTML', () => {
+	it( 'should strip valid HTML, scripts and on attributes', () => {
+		const input = `<strong onClick="alert('and on attributes')">Here is some text</strong> that contains <em>HTML markup</em><script>alert("and scripts")</script>.`;
+		const output = 'Here is some text that contains HTML markup.';
+		expect( stripHTML( input ) ).toBe( output );
+	} );
+
+	it( 'should strip invalid HTML, scripts and on attributes', () => {
+		const input = `<strong onClick="alert('and on attributes')">Here is some text</em> <p></div>that contains HTML markup</p><script>alert("and scripts")</script>.`;
+		const output = 'Here is some text that contains HTML markup.';
+		expect( stripHTML( input ) ).toBe( output );
+	} );
+
+	describe( 'whitespace preservation', () => {
+		it( 'should preserve leading spaces', () => {
+			const input =
+				'       <strong>Here is some text</strong> with <em>leading spaces</em>.';
+			const output = '       Here is some text with leading spaces.';
+			expect( stripHTML( input ) ).toBe( output );
+		} );
+
+		it( 'should preserve leading spaces with HTML', () => {
+			const input =
+				'<strong>      Here is some text</strong> with <em>leading spaces</em>.';
+			const output = '      Here is some text with leading spaces.';
+			expect( stripHTML( input ) ).toBe( output );
+		} );
+
+		it( 'should preserve trailing spaces with HTML', () => {
+			const input =
+				'<strong>Here is some text</strong> with <em>trailing spaces</em>.          ';
+			const output = 'Here is some text with trailing spaces.          ';
+			expect( stripHTML( input ) ).toBe( output );
+		} );
+
+		it( 'should preserve consecutive spaces within string', () => {
+			const input =
+				'<strong>Here is some          text</strong> with                  <em>a lot of spaces inside</em>.';
+			const output =
+				'Here is some          text with                  a lot of spaces inside.';
+			expect( stripHTML( input ) ).toBe( output );
+		} );
+
+		it( 'should preserve new lines in multi-line HTML string', () => {
+			const input = `<div>
+        Here is some
+        <em>text</em>
+        with new lines
+        </div>`;
+
+			const output = `
+        Here is some
+        text
+        with new lines
+        `;
+			expect( stripHTML( input ) ).toBe( output );
+		} );
+	} );
+} );

packages/dom/src/test/dom.js

@@ -5,7 +5,6 @@ import {
 	isHorizontalEdge,
 	placeCaretAtHorizontalEdge,
 	isTextField,
-	__unstableStripHTML as stripHTML,
 	isNumberInput,
 	removeInvalidHTML,
 	isEmpty,
@@ -194,20 +193,6 @@ describe( 'DOM', () => {
 			);
 		} );
 	} );
-
-	describe( 'stripHTML', () => {
-		it( 'removes any HTML from a text string', () => {
-			expect( stripHTML( 'This is <em>emphasized</em>' ) ).toBe(
-				'This is emphasized'
-			);
-		} );
-
-		it( 'removes script tags, but does not execute them', () => {
-			const html = 'This will not <script>throw "Error"</script>';
-			expect( stripHTML( html ) ).toBe( 'This will not throw "Error"' );
-			expect( () => stripHTML( html ) ).not.toThrow();
-		} );
-	} );
 } );
 
 describe( 'removeInvalidHTML', () => {