Minor - Core, Content sanitization: Allow the possibility to open ext…

…ernal links in new windows (#9757)

src/core/dep/jquery-fix.js

@@ -163,6 +163,33 @@ jQuery.htmlPrefilter = function( html ) {
  * This implementation leverage DOMPurify for filtering every string prior DOM manipulation by jQuery
  *
  */
+
+// START: add hooks to DOMPurify to allow external links when they meet certain conditions as defined here: https://owasp.org/www-community/attacks/Reverse_Tabnabbing
+DOMPurify.addHook( "beforeSanitizeAttributes", function( node ) {
+
+	// Add "data-wb-external-link" to all <a> with a target="_blank" and rel="noreferrer"
+	if (
+		node.tagName === "A" &&
+		node.getAttribute( "target" ) &&
+		node.getAttribute( "target" ) === "_blank" &&
+		node.getAttribute( "rel" ) &&
+		node.relList.contains( "noreferrer" )
+	) {
+		node.setAttribute( "data-wb-external-link", "true" );
+	}
+} );
+
+DOMPurify.addHook( "afterSanitizeAttributes", function( node ) {
+
+	// Put back the target="_blank" to all <a> with attribute "data-wb-external-link"
+	if ( node.tagName === "A" && node.getAttribute( "data-wb-external-link" ) ) {
+		node.setAttribute( "target", "_blank" );
+		node.removeAttribute( "data-wb-external-link" );
+	}
+} );
+
+// END
+
 var localParseHTML = jQuery.parseHTML,
 	append = jQuery.fn.append,
 	prepend = jQuery.fn.prepend,

src/core/test.js

@@ -95,6 +95,36 @@ describe( "wb.core helpers test suite", function() {
 
 	} );
 
+	/*
+	 * Test external links after DOMPurify sanitization
+	 */
+	describe( "External links", function() {
+		before( function() {
+			$( "body" ).append( `<div class='external-links-test'>
+				<a id='externalLinkTest1' href='http://www.canada.ca' target='_blank' rel='noreferrer'>Valid link 1</a>
+				<a id='externalLinkTest2' href='http://www.canada.ca' target='_blank' rel='noreferrer noopener'>Valid link 2</a>
+				<a id='externalLinkTest3' href='http://www.canada.ca' target='_blank'>Invalid link 1</a>
+				<a id='externalLinkTest4' href='http://www.canada.ca' target='_blank' rel='hellonoreferrerworld'>Invalid link 2</a>
+				<!-- This one should be valid according to spec because the token are case insensitive but this is a limitation of relList DOM anchor function implemented in browser -->
+				<!-- No need to test, but let's keep it here as a documentation item for future reference -->
+				<!-- <a id='externalLinkTest5' href='http://www.canada.ca' target='_blank' rel='external noReferrer nofollow'>Valid link 3</a> -->
+			</div>` );
+		} );
+
+		after( function() {
+		} );
+
+		it( "valid external links have a target attribute", function() {
+			expect( $( "#externalLinkTest1" ).attr( "target" ) ).to.equal( "_blank" );
+			expect( $( "#externalLinkTest2" ).attr( "target" ) ).to.equal( "_blank" );
+		} );
+
+		it( "invalid external links don't have a target attribute", function() {
+			expect( $( "#externalLinkTest3" ).attr( "target" ) ).to.equal( undefined );
+			expect( $( "#externalLinkTest4" ).attr( "target" ) ).to.equal( undefined );
+		} );
+	} );
+
 	/*
 	 * Test wb string helpers
 	 */