Patched html.js

patched.codes[bot] · patched.codes[bot] · commit 4f156fb2fae0 · 2025-06-18T02:54:52.000Z
diff --git a/html.js b/html.js
@@ -2,6 +2,7 @@
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
 import serialize from 'serialize-javascript'
+import DOMPurify from 'dompurify'
 
 // @twreporter
 import webfonts from '@twreporter/react-components/lib/text/utils/webfonts'
@@ -21,6 +22,13 @@ export default class Html extends PureComponent {
     scripts: PropTypes.array.isRequired,
     scriptElement: PropTypes.arrayOf(PropTypes.element).isRequired,
     styles: PropTypes.array.isRequired,
+    /**
+     * Server-side rendered markup from React
+     * This content is sanitized using DOMPurify before being rendered to:
+     * 1. Ensure XSS protection even if server-side rendering is compromised
+     * 2. Allow hydration to work correctly while maintaining security
+     * 3. Remove any potentially malicious content while preserving valid HTML
+     */
     contentMarkup: PropTypes.string.isRequired,
     store: PropTypes.object.isRequired,
     styleElement: PropTypes.arrayOf(PropTypes.element).isRequired,
@@ -110,34 +118,32 @@ export default class Html extends PureComponent {
           {styleElement}
         </head>
         <body>
-          <div id="root" dangerouslySetInnerHTML={{ __html: contentMarkup }} />
+          <div id="root" dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(contentMarkup) }} />
           <script
             defer
             src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.zh-Hant-TW"
           />
           <script
-            dangerouslySetInnerHTML={{
-              __html: `window.__REDUX_STATE__=${serialize(store.getState())};`,
-            }}
+            id="redux-state"
+            type="application/json"
             charSet="UTF-8"
-          />
+          >
+            {JSON.stringify(store.getState())}
+          </script>
           {_.map(scripts, (script, key) => (
             <script src={script} key={'scripts' + key} charSet="UTF-8" />
           ))}
           {scriptElement}
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `(function(d) {
-                var config = {
-                  kitId: 'vlk1qbe',
-                  scriptTimeout: 3000,
-                  async: true
-                },
-                h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
-              })(document);
-            `,
-            }}
-          />
+          <script src="https://use.typekit.net/vlk1qbe.js" async />
+          <script>{`
+            try {
+              Typekit.load({
+                kitId: 'vlk1qbe',
+                scriptTimeout: 3000,
+                async: true
+              });
+            } catch(e) {}
+          `}</script>
         </body>
       </html>
     )
