Fix theming with SSR with CSRF safe approach (#1913)

* move to application/json approach

* add changelog

* fix typo in getServerHandoff

* Cole's suggestion to clean up code ✨

Co-authored-by: Cole Bemis <[email protected]>

* fix linting issues

Co-authored-by: Cole Bemis <[email protected]>

Author: siddharthkp

.changeset/safe-ssr-theming.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fixes the theming implementation with server side rendering to use a CSRF safe approach

src/ThemeProvider.tsx

@@ -37,6 +37,17 @@ const ThemeContext = React.createContext<{
   setNightScheme: () => null
 })
 
+// inspired from __NEXT_DATA__, we use application/json to avoid CSRF policy with inline scripts
+const getServerHandoff = () => {
+  try {
+    const serverData = document.getElementById('__PRIMER_DATA__')?.textContent
+    if (serverData) return JSON.parse(serverData)
+  } catch (error) {
+    // if document/element does not exist or JSON is invalid, supress error
+  }
+  return {}
+}
+
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}) => {
   // Get fallback values from parent ThemeProvider (if exists)
   const {
@@ -49,11 +60,8 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
   // Initialize state
   const theme = props.theme ?? fallbackTheme ?? defaultTheme
 
-  const resolvedColorModePassthrough = React.useRef(
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore This custom variable does not exist on window because we set it ourselves
-    typeof window !== 'undefined' ? window.__PRIMER_RESOLVED_SERVER_COLOR_MODE : undefined
-  )
+  const {resolvedServerColorMode} = getServerHandoff()
+  const resolvedColorModePassthrough = React.useRef(resolvedServerColorMode)
 
   const [colorMode, setColorMode] = React.useState(props.colorMode ?? fallbackColorMode ?? defaultColorMode)
   const [dayScheme, setDayScheme] = React.useState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme)
@@ -119,7 +127,11 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}
       <SCThemeProvider theme={resolvedTheme}>
         {children}
         {props.preventSSRMismatch ? (
-          <script dangerouslySetInnerHTML={{__html: `__PRIMER_RESOLVED_SERVER_COLOR_MODE='${resolvedColorMode}'`}} />
+          <script
+            type="application/json"
+            id="__PRIMER_DATA__"
+            dangerouslySetInnerHTML={{__html: JSON.stringify({resolvedServerColorMode: resolvedColorMode})}}
+          />
         ) : null}
       </SCThemeProvider>
     </ThemeContext.Provider>