Add greater than to attribute escaping

Although > is a valid attribute character it is used in wptexturize to split HTML tokens. Without escaping wptexturize will incorrectly tokenize a string, causing problems for everything else. Encoding it in Gutenberg prevents this problem while being transparent to the Gutenberg visual UI.
WordPress · Nov 23, 2018 · 3d339ca · 3d339ca
1 parent 1f57485
commit 3d339ca
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/packages/element/src/test/index.js b/packages/element/src/test/index.js
@@ -53,7 +53,7 @@ describe( 'element', () => {
 			}, '<"WordPress" & Friends>' ) );
 
 			expect( result ).toBe(
-				'<a href="/index.php?foo=bar&amp;qux=<&quot;scary&quot;>" style="background-color:red">' +
+				'<a href="/index.php?foo=bar&amp;qux=<&quot;scary&quot;&gt;" style="background-color:red">' +
 				'&lt;"WordPress" &amp; Friends>' +
 				'</a>'
 			);

diff --git a/packages/element/src/test/serialize.js b/packages/element/src/test/serialize.js
@@ -528,7 +528,7 @@ describe( 'renderAttributes()', () => {
 				href: '/index.php?foo=bar&qux=<"scary">',
 			} );
 
-			expect( result ).toBe( ' style="background:url(&quot;foo.png&quot;)" href="/index.php?foo=bar&amp;qux=<&quot;scary&quot;>"' );
+			expect( result ).toBe( ' style="background:url(&quot;foo.png&quot;)" href="/index.php?foo=bar&amp;qux=<&quot;scary&quot;&gt;"' );
 		} );
 
 		it( 'should render numeric attributes', () => {

diff --git a/packages/escape-html/src/index.js b/packages/escape-html/src/index.js
@@ -51,6 +51,17 @@ export function escapeLessThan( value ) {
 	return value.replace( /</g, '&lt;' );
 }
 
+/**
+ * Returns a string with grater-than sign replaced.
+ *
+ * @param {string} value Original string.
+ *
+ * @return {string} Escaped string.
+ */
+export function escapeGreaterThan( value ) {
+	return value.replace( />/g, '&gt;' );
+}
+
 /**
  * Returns an escaped attribute value.
  *
@@ -64,7 +75,7 @@ export function escapeLessThan( value ) {
  * @return {string} Escaped attribute value.
  */
 export function escapeAttribute( value ) {
-	return escapeQuotationMark( escapeAmpersand( value ) );
+	return escapeGreaterThan( escapeQuotationMark( escapeAmpersand( value ) ) );
 }
 
 /**

diff --git a/packages/escape-html/src/test/index.js b/packages/escape-html/src/test/index.js
@@ -5,11 +5,19 @@ import {
 	escapeAmpersand,
 	escapeQuotationMark,
 	escapeLessThan,
+	escapeGreaterThan,
 	escapeAttribute,
 	escapeHTML,
 	isValidAttributeName,
 } from '../';
 
+function testEscapeGreaterThan( implementation ) {
+	it( 'should escape greater than', () => {
+		const result = implementation( 'Chicken > Ribs' );
+		expect( result ).toBe( 'Chicken &gt; Ribs' );
+	} );
+}
+
 function testEscapeAmpersand( implementation ) {
 	it( 'should escape ampersand', () => {
 		const result = implementation( 'foo & bar &amp; &AMP; baz &#931; &#bad; &#x3A3; &#X3a3; &#xevil;' );
@@ -46,9 +54,14 @@ describe( 'escapeLessThan', () => {
 	testEscapeLessThan( escapeLessThan );
 } );
 
+describe( 'escapeGreaterThan', () => {
+	testEscapeGreaterThan( escapeGreaterThan );
+} );
+
 describe( 'escapeAttribute', () => {
 	testEscapeAmpersand( escapeAttribute );
 	testEscapeQuotationMark( escapeAttribute );
+	testEscapeGreaterThan( escapeAttribute );
 } );
 
 describe( 'escapeHTML', () => {