Backport xss fix for the 2023-07 release (#1844)

Shopify · Mar 12, 2024 · 7a642a5 · 7a642a5
1 parent 891c12b
commit 7a642a5
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 6 deletions.
diff --git a/.changeset/clever-pans-tap.md b/.changeset/clever-pans-tap.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix XSS vulnerability
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/hydrogen/src/seo/escape.ts b/packages/hydrogen/src/seo/escape.ts
@@ -0,0 +1,15 @@
+// This is taken from remix: https://github.com/remix-run/remix/blob/main/packages/remix-server-runtime/markup.ts
+
+const ESCAPE_LOOKUP: {[match: string]: string} = {
+  '&': '\\u0026',
+  '>': '\\u003e',
+  '<': '\\u003c',
+  '\u2028': '\\u2028',
+  '\u2029': '\\u2029',
+};
+
+const ESCAPE_REGEX = /[&><\u2028\u2029]/g;
+
+export function escapeHtml(html: string) {
+  return html.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match]);
+}
diff --git a/packages/hydrogen/src/seo/generate-seo-tags.ts b/packages/hydrogen/src/seo/generate-seo-tags.ts
@@ -1,6 +1,7 @@
 import type {ComponentPropsWithoutRef} from 'react';
 import type {Maybe} from '@shopify/hydrogen-react/storefront-api-types';
 import type {Thing, WithContext} from 'schema-dts';
+import {escapeHtml} from './escape';
 
 const ERROR_PREFIX = 'Error in SEO input: ';
 
@@ -500,7 +501,9 @@ export function generateSeoTags<
             'script',
             {
               type: 'application/ld+json',
-              children: JSON.stringify(block),
+              children: JSON.stringify(block, (k, value) => {
+                return typeof value === 'string' ? escapeHtml(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('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>',
+            },
+          },
+        },
+      }),
+    ]);
+
+    const {asFragment} = render(createElement(Seo));
+
+    expect(asFragment()).toMatchInlineSnapshot(`
+      <DocumentFragment>
+        <script
+          type="application/ld+json"
+        >
+          {"@context":"https://schema.org","@type":"Organization","name":"Hydrogen Root","description":"\\\\u003c/script\\\\u003e\\\\u003cscript\\\\u003ealert(\\"hacked\\")\\\\u003c/script\\\\u003e"}
+        </script>
+      </DocumentFragment>
+    `);
+  });
 });
 
 function fillMatch(partial: Partial<RouteMatch> = {}) {