Fix use of sanitizeHTML

assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx

@@ -73,7 +73,9 @@ export const ShippingRatesControlPackage = ( {
 			{ ( showItems || collapsible ) && (
 				<div
 					className="wc-block-components-shipping-rates-control__package-title"
-					dangerouslySetInnerHTML={ sanitizeHTML( packageData.name ) }
+					dangerouslySetInnerHTML={ {
+						__html: sanitizeHTML( packageData.name ),
+					} }
 				/>
 			) }
 			{ showItems && (

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

@@ -4,7 +4,7 @@
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Notice } from 'wordpress-components';
-import { sanitize } from 'dompurify';
+import { sanitizeHTML } from '@woocommerce/utils';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { PAYMENT_METHOD_DATA_STORE_KEY } from '@woocommerce/block-data';
 
@@ -13,15 +13,6 @@ import { PAYMENT_METHOD_DATA_STORE_KEY } from '@woocommerce/block-data';
  */
 import './style.scss';
 
-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':
@@ -78,11 +69,7 @@ export const StoreNoticesContainer = ( {
 						}
 					} }
 				>
-					<span
-						dangerouslySetInnerHTML={ sanitizeHTML(
-							props.content
-						) }
-					/>
+					{ sanitizeHTML( props.content ) }
 				</Notice>
 			) ) }
 		</div>

assets/js/utils/sanitize-html.ts

@@ -1,27 +1,20 @@
 /**
  * External dependencies
  */
-import DOMPurify from 'dompurify';
-
-type sanitizedHTMLObject = {
-	// eslint-disable-next-line @typescript-eslint/naming-convention
-	__html: string;
-};
+import { sanitize } from 'dompurify';
 
 const ALLOWED_TAGS = [ 'a', 'b', 'em', 'i', 'strong', 'p', 'br' ];
 const ALLOWED_ATTR = [ 'target', 'href', 'rel', 'name', 'download' ];
 
 export const sanitizeHTML = (
 	html: string,
 	config?: { tags?: typeof ALLOWED_TAGS; attr?: typeof ALLOWED_ATTR }
-): sanitizedHTMLObject => {
+) => {
 	const tagsValue = config?.tags || ALLOWED_TAGS;
 	const attrValue = config?.attr || ALLOWED_ATTR;
 
-	return {
-		__html: DOMPurify.sanitize( html, {
-			ALLOWED_TAGS: tagsValue,
-			ALLOWED_ATTR: attrValue,
-		} ),
-	};
+	return sanitize( html, {
+		ALLOWED_TAGS: tagsValue,
+		ALLOWED_ATTR: attrValue,
+	} );
 };