Fix xss vulnerability in the seo component

Shopify · Mar 12, 2024 · 720439e · 720439e
1 parent 5060cf5
commit 720439e
Show file tree

Hide file tree

Showing 5 changed files with 210 additions and 10 deletions.
diff --git a/.changeset/popular-moose-beam.md b/.changeset/popular-moose-beam.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix XSS vulnerability in the SEO component
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -58,7 +58,8 @@
     "tempy": "^3.0.0",
     "ts-morph": "20.0.0",
     "use-resize-observer": "^9.1.0",
-    "ws": "^8.16.0"
+    "ws": "^8.16.0",
+    "sanitize-html": "^2.3.0"
   },
   "optionalDependencies": {
     "@parcel/watcher": "^2.3.0"

diff --git a/packages/hydrogen/src/seo/generate-seo-tags.ts b/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 sanitizeHtml from 'sanitize-html';
+
 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,9 @@ export function generateSeoTags<
             'script',
             {
               type: 'application/ld+json',
-              children: JSON.stringify(block),
+              children: JSON.stringify(block, (k, value) => {
+                return typeof value === 'string' ? sanitizeHtml(value) : value;
+              }),
             },
             // @ts-expect-error
             `json-ld-${block?.['@type'] || block?.name || index++}`,

diff --git a/packages/hydrogen/src/seo/seo.test.ts b/packages/hydrogen/src/seo/seo.test.ts
@@ -264,6 +264,35 @@ describe('seo', () => {
       </DocumentFragment>
     `);
   });
+
+  it.only('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>> = {}) {