diff --git a/.changeset/curvy-owls-brake.md b/.changeset/curvy-owls-brake.md new file mode 100644 index 0000000000..4795b1dba3 --- /dev/null +++ b/.changeset/curvy-owls-brake.md @@ -0,0 +1,5 @@ +--- +'@shopify/react-html': patch +--- + +Less aggressive escaping of script tag content diff --git a/packages/react-html/package.json b/packages/react-html/package.json index ea0be19d0f..f9d00afe46 100644 --- a/packages/react-html/package.json +++ b/packages/react-html/package.json @@ -33,8 +33,8 @@ "@shopify/react-effect": "^5.0.2", "@shopify/react-hydrate": "^3.0.6", "@types/multistream": "^2.1.1", - "multistream": "^2.1.1", - "serialize-javascript": "^3.0.0" + "jsesc": "^3.0.2", + "multistream": "^2.1.1" }, "peerDependencies": { "react": ">=16.8.0 <19.0.0", diff --git a/packages/react-html/src/server/components/Serialize.tsx b/packages/react-html/src/server/components/Serialize.tsx index 2854b01424..3ccbbe0a8b 100644 --- a/packages/react-html/src/server/components/Serialize.tsx +++ b/packages/react-html/src/server/components/Serialize.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import serialize from 'serialize-javascript'; +import jsesc from 'jsesc'; import {SERIALIZE_ATTRIBUTE} from '../../utilities'; @@ -9,10 +9,15 @@ interface Props { } export default function Serialize({id, data}: Props) { + const serialized = jsesc(data, { + isScriptContext: true, + json: true, + }); + return ( ', }; const serialize = mount(); expect(serialize).toContainReactComponent('script', { dangerouslySetInnerHTML: { - __html: serializeJavaScript(data, {isJSON: true}), + __html: + '{"foo":{"bar":{"baz":"window.location = \\"http://example.com\\""}},"xss":"<\\/script>`, + `
markup
`, ); }); diff --git a/yarn.lock b/yarn.lock index f776c04802..413edf7a79 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9813,6 +9813,11 @@ jsesc@^2.5.1: resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4" integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA== +jsesc@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e" + integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g== + jsesc@~0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d" @@ -12938,13 +12943,6 @@ sentence-case@^3.0.4: tslib "^2.0.3" upper-case-first "^2.0.2" -serialize-javascript@^3.0.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.1.0.tgz#8bf3a9170712664ef2561b44b691eafe399214ea" - integrity sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg== - dependencies: - randombytes "^2.1.0" - serialize-javascript@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"