[Fix] emotion nonce (#131)

index.html

@@ -4,7 +4,7 @@
  <meta charset="utf-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta property="csp-nonce" content="{{ styleNonce }}" />
+ <meta property="csp-nonce" content="{{ nonce }}" />
  <meta name="theme-color" content="#000000" />
  <meta
  name="description"
@@ -16,7 +16,7 @@
  user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
  -->
  <link rel="manifest" href="/manifest.json" />
- <style>
+ <style nonce="{{ nonce }}">
  body {
  margin: 0;
  }
@@ -124,7 +124,7 @@
  </svg>
  </div>
  </div>
- <script>
+ <script nonce="{{ nonce }}">
  particlesJS('particles', {
  particles: {
  number: {

src/App.tsx

@@ -1,9 +1,9 @@
 import { AppRouter } from './AppRouter'
 import { Providers } from './shared/providers'
 
-export const App = () => {
+export const App = ({ nonce }: { nonce?: string }) => {
  return (
- <Providers>
+ <Providers nonce={nonce}>
  <AppRouter />
  </Providers>
  )

src/Main.tsx

@@ -1,4 +1,5 @@
 import { LicenseInfo } from '@mui/x-license-pro'
+import { HTMLAttributes, MetaHTMLAttributes } from 'react'
 import ReactDOM from 'react-dom/client'
 import { App } from './App'
 import reportWebVitals from './reportWebVitals'
@@ -7,9 +8,18 @@ import { env } from './shared/constants'
 if (env.muiLicenseKey) {
  LicenseInfo.setLicenseKey(env.muiLicenseKey)
 }
+let nonceEl = window?.document?.head?.querySelector?.('meta[property="csp-nonce"]') as unknown as { remove: () => void } | undefined
+let nonce = (nonceEl as MetaHTMLAttributes<HTMLAttributes<HTMLElement>>)?.content
+
+if (nonceEl) {
+ nonceEl.remove()
+ nonceEl = undefined
+}
 
 const root = ReactDOM.createRoot(window.document.getElementById('root') as HTMLElement)
-root.render(<App />)
+root.render(<App nonce={nonce} />)
+
+nonce = undefined
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.info))

src/assets/icons/index.ts

@@ -3,6 +3,7 @@ import Crown from './crown.svg?react'
 import DiscordIcon from './discord-icon.svg?react'
 import DiscordWithTextLogo from './discord-with-text-logo.svg?react'
 import FixBetaLogo from './fix-beta-logo.svg?react'
+import FixLogoUrl from './fix-logo.svg'
 import FixLogo from './fix-logo.svg?react'
 import GcpLogo from './gcp-logo.svg?react'
 import GithubSEBIcon from './github-seb-icon.svg?react'
@@ -20,6 +21,7 @@ export {
  DiscordWithTextLogo,
  FixBetaLogo,
  FixLogo,
+ FixLogoUrl,
  GcpLogo,
  GithubSEBIcon,
  GoogleSEBIcon,