Merge pull request #2176 from Codeinwp/fix/post-grid-escaping

Improve Posts block output sanitization

inc/render/class-posts-grid-block.php

@@ -153,12 +153,7 @@ public function get_post_fields( $id, $attributes ) {
 
 			if ( 'title' === $element ) {
 				if ( isset( $attributes['displayTitle'] ) && $attributes['displayTitle'] ) {
-					$html .= sprintf(
-						'<%1$s class="o-posts-grid-post-title"><a href="%2$s">%3$s</a></%1$s>',
-						esc_attr( $attributes['titleTag'] ),
-						esc_url( get_the_permalink( $id ) ),
-						esc_html( get_the_title( $id ) )
-					);
+					$html .= $this->render_post_title( $attributes['titleTag'], get_the_permalink( $id ), get_the_title( $id ) );
 				}
 			}
 
@@ -410,4 +405,29 @@ protected function render_pagination( $page_number, $total_pages ) {
 
 		return $output;
 	}
+
+	/**
+	 * Render the post title.
+	 * 
+	 * @param string $tag The html tag.
+	 * @param string $post_url The post URL.
+	 * @param string $post_title The post title.
+	 * 
+	 * @return string The rendered post title.
+	 */
+	public function render_post_title( $tag, $post_url, $post_title ) {
+
+		$tag = sanitize_key( $tag );
+
+		if ( ! in_array( $tag, array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ), true ) ) {
+			$tag = 'h5';
+		}
+
+		return sprintf(
+			'<%1$s class="o-posts-grid-post-title"><a href="%2$s">%3$s</a></%1$s>',
+			$tag,
+			esc_url( $post_url ),
+			esc_html( $post_title )
+		);
+	}
 }

src/blocks/blocks/posts/components/layout/index.js

@@ -110,17 +110,20 @@ export const PostsCategory = ({ attributes, element, category, categoriesList })
 };
 
 export const PostsTitle = ({ attributes, element, post }) => {
-	const Tag = attributes.titleTag || 'h5';
-	if ( attributes.displayTitle ) {
-		return (
-			<Tag key={ element } className="o-posts-grid-post-title">
-				<a href={ post.link }>
-					{ unescapeHTML( post.title?.rendered ) }
-				</a>
-			</Tag>
-		);
+
+	if ( ! attributes.displayTitle ) {
+		return '';
 	}
-	return '';
+
+	const Tag = ! [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ].includes( attributes.titleTag ) ? 'h5' : attributes.titleTag;
+
+	return (
+		<Tag key={ element } className="o-posts-grid-post-title">
+			<a href={ post.link }>
+				{ unescapeHTML( post.title?.rendered ) }
+			</a>
+		</Tag>
+	);
 };
 
 export const PostsMeta = ({ attributes, element, post, author, categories }) => {

tests/test-post-grid-block.php

@@ -77,26 +77,53 @@ class Test_Post_Grid_Block extends WP_UnitTestCase {
 	);
 
 	/**
-	 * Test the fetching of patterns.
+	 * Test the rendering of the block.
 	 */
-	public function test_render_sanitization() {
+	public function test_render() {
 		$this->post_grid_block = new Posts_Grid_Block();
 		WP_Block_Supports::init();
 		WP_Block_Supports::$block_to_render = array( 'blockName' => 'themeisle-blocks/posts-grid' );
 
-		$base_attributes = $this->attributes;
+		$base_attributes = unserialize(serialize($this->attributes));
 
 		$output = $this->post_grid_block->render( $base_attributes );
 		$expected = '<div class="wp-block-themeisle-blocks-posts-grid" id="wp-block-themeisle-blocks-posts-grid-a94bab18"><div class="is-grid o-posts-grid-columns-2"></div> </div>';
 		$this->assertEquals( $expected, $output );
+	}
+
+	/**
+	 * Test the rendering of the item post title.
+	 */
+	public function test_render_post_title() {
+		$this->post_grid_block = new Posts_Grid_Block();
+
+		$output = $this->post_grid_block->render_post_title( 'h3', 'www.example.com', 'Title' );
+		$expected = '<h3 class="o-posts-grid-post-title"><a href="http://www.example.com">Title</a></h3>';
+		$this->assertEquals( $expected, $output );
+	}
 
-		$malformed_attributes = $base_attributes;
+	/**
+	 * Test render sanitization.
+	 */
+	public function test_render_sanitization() {
+		$this->post_grid_block = new Posts_Grid_Block();
+		WP_Block_Supports::init();
+		WP_Block_Supports::$block_to_render = array( 'blockName' => 'themeisle-blocks/posts-grid' );
+
+		$malformed_attributes = unserialize(serialize($this->attributes));
 		$malformed_attributes['id'] = 'wp-block-themeisle-blocks-posts-grid-12345\\"onmouseover=alert(123) b=';
+		$malformed_attributes['titleTag'] = 'h3 onmouseover=alert(456)';
 
 		// We expect the id to be sanitized.
 		$expected = '<div class="wp-block-themeisle-blocks-posts-grid" id="wp-block-themeisle-blocks-posts-grid-12345\&quot;onmouseover=alert(123) b="><div class="is-grid o-posts-grid-columns-2"></div> </div>';
 		$output = $this->post_grid_block->render( $malformed_attributes );
 
 		$this->assertEquals( $expected, $output );
+
+		// We expect the titleTag to be sanitized.
+		$expected = '<h5 class="o-posts-grid-post-title"><a href="http://www.example.com">Title</a></h5>';
+		$output = $this->post_grid_block->render_post_title( $malformed_attributes['titleTag'], 'www.example.com', 'Title' );
+
+		$this->assertEquals( $expected, $output );
 	}
 }