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 · Sep 17, 2018 · d675a2b · d675a2b
1 parent c57102a
commit d675a2b
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/packages/element/src/serialize.js b/packages/element/src/serialize.js
@@ -287,6 +287,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.
  *
@@ -295,13 +306,17 @@ export function escapeLessThan( value ) {
  * "[...] the text cannot contain an ambiguous ampersand [...] must not contain
  * any literal U+0022 QUOTATION MARK characters (")"
  *
+ * Additionally we escape the greater than symbol, as this is used by wptexturize to
+ * split HTML tags, and not escaping it can cause problems.
+ *
  * @param {string} value Attribute value.
  *
  * @return {string} Escaped attribute value.
  */
 export const escapeAttribute = flowRight( [
 	escapeAmpersand,
 	escapeQuotationMark,
+	escapeGreaterThan,
 ] );
 
 /**

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
@@ -19,6 +19,7 @@ import serialize, {
 	escapeQuotationMark,
 	escapeLessThan,
 	escapeAttribute,
+	escapeGreaterThan,
 	escapeHTML,
 	hasPrefix,
 	isValidAttributeName,
@@ -53,6 +54,14 @@ function testEscapeLessThan( implementation ) {
 	} );
 }
 
+function testEscapeGreaterThan( implementation ) {
+	it( 'should escape greater than', () => {
+		const result = implementation( 'Chicken > Ribs' );
+
+		expect( result ).toBe( 'Chicken &gt; Ribs' );
+	} );
+}
+
 describe( 'escapeAmpersand', () => {
 	testEscapeAmpersand( escapeAmpersand );
 } );
@@ -65,9 +74,14 @@ describe( 'escapeLessThan', () => {
 	testEscapeLessThan( escapeLessThan );
 } );
 
+describe( 'escapeGreaterThan', () => {
+	testEscapeGreaterThan( escapeGreaterThan );
+} );
+
 describe( 'escapeAttribute', () => {
 	testEscapeAmpersand( escapeAttribute );
 	testEscapeQuotationMark( escapeAttribute );
+	testEscapeGreaterThan( escapeAttribute );
 } );
 
 describe( 'escapeHTML', () => {
@@ -606,7 +620,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', () => {