Sanitize store notices html (#7145)

Sanitizing the merchant store link in the error message added in WooPay when in some
cases the customer could run into an issue where we need to tell them an error occurred
and they have to go back to the merchant store and re-initialize WooPay to fix it.

Because previously we were only expecting strings, the text was not sanitized.

assets/js/base/context/providers/store-notices/components/store-notices-container.js

@@ -2,16 +2,25 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
+import { useDispatch, useSelect } from '@wordpress/data';
 import classnames from 'classnames';
 import { Notice } from 'wordpress-components';
-import { useDispatch, useSelect } from '@wordpress/data';
-
+import { sanitize } from 'dompurify';
 /**
  * Internal dependencies
  */
 import './style.scss';
 import { useStoreNoticesContext } from '../context';
 
+const ALLOWED_TAGS = [ 'a', 'b', 'em', 'i', 'strong', 'p', 'br' ];
+const ALLOWED_ATTR = [ 'target', 'href', 'rel', 'name', 'download' ];
+
+const sanitizeHTML = ( html ) => {
+	return {
+		__html: sanitize( html, { ALLOWED_TAGS, ALLOWED_ATTR } ),
+	};
+};
+
 const getWooClassName = ( { status = 'default' } ) => {
 	switch ( status ) {
 		case 'error':
@@ -53,7 +62,7 @@ export const StoreNoticesContainer = ( {
 		<div className={ wrapperClass }>
 			{ regularNotices.map( ( props ) => (
 				<Notice
-					key={ 'store-notice-' + props.id }
+					key={ `store-notice-${ props.id }` }
 					{ ...props }
 					className={ classnames(
 						'wc-block-components-notices__notice',
@@ -65,7 +74,11 @@ export const StoreNoticesContainer = ( {
 						}
 					} }
 				>
-					{ props.content }
+					<span
+						dangerouslySetInnerHTML={ sanitizeHTML(
+							props.content
+						) }
+					/>
 				</Notice>
 			) ) }
 		</div>
@@ -84,3 +97,5 @@ StoreNoticesContainer.propTypes = {
 		} )
 	),
 };
+
+export default StoreNoticesContainer;

assets/js/base/context/providers/store-notices/components/style.scss

@@ -5,6 +5,9 @@
 		margin: 0;
 		display: flex;
 		flex-wrap: nowrap;
+		a {
+			text-decoration: underline;
+		}
 		.components-notice__dismiss {
 			background: transparent none;
 			padding: 0;