fix(core): sanitize shopper supplied input

Author: chanceaclark

.changeset/fast-pumas-unite.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+Use isomorphic-dompurify to santize any sort of shopper supplied input.

core/app/[locale]/(default)/product/[slug]/_components/product-review-schema/product-review-schema.tsx

@@ -1,3 +1,4 @@
+import DOMPurify from 'isomorphic-dompurify';
 import { useFormatter } from 'next-intl';
 import { Product as ProductSchemaType, WithContext } from 'schema-dts';
 
@@ -39,7 +40,7 @@ export const ProductReviewSchema = ({ reviews, productId }: Props) => {
 
   return (
     <script
-      dangerouslySetInnerHTML={{ __html: JSON.stringify(productReviewSchema) }}
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(JSON.stringify(productReviewSchema)) }}
       type="application/ld+json"
     />
   );

core/app/[locale]/(default)/product/[slug]/_components/product-schema/index.tsx

@@ -87,6 +87,8 @@ export const ProductSchema = ({ product }: Props) => {
 
   return (
     <script
+      // Even though there is no risk of XSS here, we still sanitize the JSON to ensure
+      // that it is safe to inject into the HTML.
       dangerouslySetInnerHTML={{ __html: JSON.stringify(productSchema) }}
       type="application/ld+json"
     />

core/package.json

@@ -45,6 +45,7 @@
     "embla-carousel-react": "8.5.2",
     "gql.tada": "^1.8.10",
     "graphql": "^16.10.0",
+    "isomorphic-dompurify": "^2.25.0",
     "jose": "^5.10.0",
     "lodash.debounce": "^4.0.8",
     "lru-cache": "^11.1.0",