Patched html.js

patched.codes[bot] · patched.codes[bot] · commit 4a8fcb74dc6b · 2025-06-17T04:26:28.000Z
diff --git a/html.js b/html.js
@@ -2,6 +2,8 @@
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
 import serialize from 'serialize-javascript'
+import { Helmet } from 'react-helmet'
+import DOMPurify from 'dompurify'
 
 // @twreporter
 import webfonts from '@twreporter/react-components/lib/text/utils/webfonts'
@@ -110,34 +112,51 @@ export default class Html extends PureComponent {
           {styleElement}
         </head>
         <body>
-          <div id="root" dangerouslySetInnerHTML={{ __html: contentMarkup }} />
+          {/* SECURITY: contentMarkup is trusted server-rendered React content.
+              Any modifications to the content generation pipeline must maintain XSS protections. */}
+          <div id="root" 
+            dangerouslySetInnerHTML={{ 
+              __html: DOMPurify.sanitize(contentMarkup, {
+                FORBID_TAGS: ['script'],
+                FORBID_ATTR: ['onerror', 'onload', 'onclick']
+              })
+            }} 
+          />
           <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"
-          />
+          <Helmet>
+            <script
+              id="redux-state"
+              type="application/json"
+              dangerouslySetInnerHTML={{
+                __html: JSON.stringify(serialize(store.getState(), { 
+                  isJSON: true,
+                  isScriptSafe: true,
+                  escapeHTML: true 
+                }))
+              }}
+            />
+            <script>
+              {`
+                window.__REDUX_STATE__ = JSON.parse(document.getElementById('redux-state').textContent);
+              `}
+            </script>
+          </Helmet>
           {_.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);
-            `,
-            }}
-          />
+          <Helmet>
+            <script 
+              src="https://use.typekit.net/vlk1qbe.js"
+              async
+            />
+            <script>
+              {`try{Typekit.load({kitId: 'vlk1qbe', scriptTimeout: 3000, async: true})}catch(e){}`}
+            </script>
+          </Helmet>
         </body>
       </html>
     )
