Allow the target and rel attributes on <a> tags. (#8125)

The `target` attribute is only supported when its value is `'_blank'`, in which case the `rel` attribute is set to `'noopener noreferrer'`. For any other values, the `target` and `rel` attributes are removed, as we don't know how to handle them. Fixes #4498.
WordPress · Jul 25, 2018 · 8d14697 · 8d14697
1 parent f508995
commit 8d14697
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 4 deletions.
diff --git a/packages/blocks/src/api/raw-handling/phrasing-content-reducer.js b/packages/blocks/src/api/raw-handling/phrasing-content-reducer.js
@@ -25,6 +25,13 @@ export default function( node, doc, schema ) {
 		node = replaceTag( node, 'strong', doc );
 	} else if ( node.nodeName === 'I' ) {
 		node = replaceTag( node, 'em', doc );
+	} else if ( node.nodeName === 'A' ) {
+		if ( node.target.toLowerCase() === '_blank' ) {
+			node.rel = 'noreferrer noopener';
+		} else {
+			node.removeAttribute( 'target' );
+			node.removeAttribute( 'rel' );
+		}
 	}
 
 	if (

diff --git a/packages/blocks/src/api/raw-handling/test/phrasing-content-reducer.js b/packages/blocks/src/api/raw-handling/test/phrasing-content-reducer.js
@@ -20,4 +20,22 @@ describe( 'phrasingContentReducer', () => {
 	it( 'should remove invalid phrasing content', () => {
 		expect( deepFilterHTML( '<strong><p>test</p></strong>', [ phrasingContentReducer ], { p: {} } ) ).toEqual( '<p>test</p>' );
 	} );
+
+	it( 'should normalise the rel attribute', () => {
+		const input = '<a href="https://wordpress.org" target="_blank">WordPress</a>';
+		const output = '<a href="https://wordpress.org" target="_blank" rel="noreferrer noopener">WordPress</a>';
+		expect( deepFilterHTML( input, [ phrasingContentReducer ], {} ) ).toEqual( output );
+	} );
+
+	it( 'should only allow target="_blank"', () => {
+		const input = '<a href="https://wordpress.org" target="_self">WordPress</a>';
+		const output = '<a href="https://wordpress.org">WordPress</a>';
+		expect( deepFilterHTML( input, [ phrasingContentReducer ], {} ) ).toEqual( output );
+	} );
+
+	it( 'should remove the rel attribute when target is not set', () => {
+		const input = '<a href="https://wordpress.org" rel="noopener">WordPress</a>';
+		const output = '<a href="https://wordpress.org">WordPress</a>';
+		expect( deepFilterHTML( input, [ phrasingContentReducer ], {} ) ).toEqual( output );
+	} );
 } );
diff --git a/packages/blocks/src/api/raw-handling/test/utils.js b/packages/blocks/src/api/raw-handling/test/utils.js
@@ -128,8 +128,8 @@ describe( 'removeInvalidHTML', () => {
 	} );
 
 	it( 'should keep some attributes', () => {
-		const input = '<a href="#keep">test</a>';
-		const output = '<a href="#keep">test</a>';
+		const input = '<a href="#keep" target="_blank">test</a>';
+		const output = '<a href="#keep" target="_blank">test</a>';
 		expect( removeInvalidHTML( input, schema ) ).toBe( output );
 	} );
 

diff --git a/packages/blocks/src/api/raw-handling/utils.js b/packages/blocks/src/api/raw-handling/utils.js
@@ -18,7 +18,7 @@ const phrasingContentSchema = {
 	em: {},
 	del: {},
 	ins: {},
-	a: { attributes: [ 'href' ] },
+	a: { attributes: [ 'href', 'target', 'rel' ] },
 	code: {},
 	abbr: { attributes: [ 'title' ] },
 	sub: {},

diff --git a/test/integration/fixtures/ms-word-online-out.html b/test/integration/fixtures/ms-word-online-out.html
@@ -3,7 +3,7 @@
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>This is a <strong>paragraph </strong>with a <a href="https://w.org/">link</a>. </p>
+<p>This is a <strong>paragraph </strong>with a <a href="https://w.org/" target="_blank" rel="noreferrer noopener">link</a>. </p>
 <!-- /wp:paragraph -->
 
 <!-- wp:list -->