Patched html.js

patched.codes[bot] · patched.codes[bot] · commit 17253a63cf93 · 2025-06-17T04:11:36.000Z
diff --git a/html.js b/html.js
@@ -1,7 +1,8 @@
 'use strict'
 import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
+import React, { PureComponent, useEffect } from 'react'
 import serialize from 'serialize-javascript'
+import DOMPurify from 'dompurify'
 
 // @twreporter
 import webfonts from '@twreporter/react-components/lib/text/utils/webfonts'
@@ -16,6 +17,53 @@ const _ = {
   map,
 }
 
+const TYPEKIT_CONFIG = {
+  kitId: 'vlk1qbe',
+  scriptTimeout: 3000,
+  async: true
+}
+
+const TypekitLoader = () => {
+  useEffect(() => {
+    // Add wf-loading class immediately
+    const h = document.documentElement
+    h.className += ' wf-loading'
+
+    // Create timeout to handle inactive state
+    const t = setTimeout(() => {
+      h.className = h.className.replace(/\bwf-loading\b/g, '') + ' wf-inactive'
+    }, TYPEKIT_CONFIG.scriptTimeout)
+
+    // Create and load the script
+    const script = document.createElement('script')
+    script.src = `https://use.typekit.net/${TYPEKIT_CONFIG.kitId}.js`
+    script.async = true
+    
+    script.onload = script.onreadystatechange = function() {
+      const state = this.readyState
+      if (state && state !== 'complete' && state !== 'loaded') return
+      
+      try {
+        Typekit.load(TYPEKIT_CONFIG)
+      } catch (e) {
+        console.error('Failed to load Typekit:', e)
+      }
+    }
+
+    document.head.appendChild(script)
+
+    // Cleanup function
+    return () => {
+      clearTimeout(t)
+      if (script.parentNode) {
+        document.head.removeChild(script)
+      }
+    }
+  }, []) // Empty dependency array - only run once
+
+  return null
+}
+
 export default class Html extends PureComponent {
   static propTypes = {
     scripts: PropTypes.array.isRequired,
@@ -110,34 +158,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())};`,
-            }}
-            charSet="UTF-8"
-          />
+            id="initial-state"
+            type="application/json"
+          >
+            {serialize(store.getState(), { isJSON: true })}
+          </script>
+          <script>
+            {`
+              try {
+                window.__REDUX_STATE__ = JSON.parse(document.getElementById('initial-state').textContent);
+              } catch (e) {
+                console.error('Failed to parse initial state:', e);
+                window.__REDUX_STATE__ = {};
+              }
+            `}
+          </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);
-            `,
-            }}
-          />
+          <TypekitLoader />
         </body>
       </html>
     )
