Fix xss vulnerability in the seo component

.changeset/popular-moose-beam.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix XSS vulnerability in the SEO component

packages/hydrogen/package.json

@@ -61,7 +61,8 @@
   "dependencies": {
     "@shopify/hydrogen-react": "2024.1.1",
     "content-security-policy-builder": "^2.1.1",
-    "type-fest": "^4.5.0"
+    "type-fest": "^4.5.0",
+    "xss": "^1.0.15"
   },
   "peerDependencies": {
     "@remix-run/react": "^2.1.0",

packages/hydrogen/src/seo/generate-seo-tags.ts

@@ -2,6 +2,8 @@ import type {ComponentPropsWithoutRef} from 'react';
 import type {Maybe} from '@shopify/hydrogen-react/storefront-api-types';
 import type {Thing, WithContext} from 'schema-dts';
 
+import xss from 'xss';
+
 const ERROR_PREFIX = 'Error in SEO input: ';
 
 // TODO: Refactor this into more reusable validators or use a library like zod to do this if we decide to use it in
@@ -503,7 +505,14 @@ export function generateSeoTags<
             'script',
             {
               type: 'application/ld+json',
-              children: JSON.stringify(block),
+              children: JSON.stringify(block, (k, value) => {
+                return typeof value === 'string'
+                  ? xss(value, {
+                      stripIgnoreTag: true,
+                      stripIgnoreTagBody: true,
+                    })
+                  : value;
+              }),
             },
             // @ts-expect-error
             `json-ld-${block?.['@type'] || block?.name || index++}`,

packages/hydrogen/src/seo/seo.test.ts

@@ -264,6 +264,35 @@ describe('seo', () => {
       </DocumentFragment>
     `);
   });
+
+  it('escapes script content', async () => {
+    vi.mocked(useMatches).mockReturnValueOnce([
+      fillMatch({
+        data: {
+          seo: {
+            jsonLd: {
+              '@context': 'https://schema.org',
+              '@type': 'Organization',
+              name: 'Hydrogen Root',
+              description: '</script><script>alert("hacked")</script>shows up',
+            },
+          },
+        },
+      }),
+    ]);
+
+    const {asFragment} = render(createElement(Seo));
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <script
+          type="application/ld+json"
+        >
+          {"@context":"https://schema.org","@type":"Organization","name":"Hydrogen Root","description":"shows up"}
+        </script>
+      </DocumentFragment>
+    `);
+  });
 });
 
 function fillMatch(partial: Partial<UIMatch<any>> = {}) {