Patched html.js

patched.codes[bot] · patched.codes[bot] · commit 58001c0cca3e · 2025-06-26T06:54:53.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'
@@ -26,6 +27,36 @@ export default class Html extends PureComponent {
     styleElement: PropTypes.arrayOf(PropTypes.element).isRequired,
     helmet: PropTypes.object.isRequired,
   }
+
+  // Add script loading function that will be called from script tag
+  static loadTypekit() {
+    const config = {
+      kitId: 'vlk1qbe',
+      scriptTimeout: 3000,
+      async: true
+    };
+    const d = document;
+    const h = d.documentElement;
+    const t = setTimeout(() => {
+      h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
+    }, config.scriptTimeout);
+    const tk = d.createElement("script");
+    let f = false;
+    const s = d.getElementsByTagName("script")[0];
+    h.className += " wf-loading";
+    tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
+    tk.async = true;
+    tk.onload = tk.onreadystatechange = function() {
+      const 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);
+  }
   render() {
     const {
       contentMarkup,
@@ -110,34 +141,21 @@ 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"
-          />
+          <script 
+            id="initial-state" 
+            type="application/json"
+          >{serialize(store.getState(), { isJSON: true })}</script>
+          <script src="/static/init-state.js"></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 defer>{`(${Html.loadTypekit.toString()})();`}</script>
         </body>
       </html>
     )
