Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[system] Add nonce to CssVarsProvider and getInitColorSchemeScript() for CSP #38913

Closed
rikusen0335 opened this issue Sep 11, 2023 · 0 comments · Fixed by #42247
Closed

[system] Add nonce to CssVarsProvider and getInitColorSchemeScript() for CSP #38913

rikusen0335 opened this issue Sep 11, 2023 · 0 comments · Fixed by #42247
Assignees
@siriwatknp
Labels
enhancement This is not a bug, nor a new feature package: system Specific to @mui/system

Comments

@rikusen0335
Copy link

rikusen0335 commented Sep 11, 2023 •
edited by oliviertassinari
Loading

Summary 💡

current Experimental_CssVarsProvider and getInitColorSchemeScript() has no functionality around csp, so I'd like to add nonce to both.

Examples 🌈

In next.js's pages router,

for _document.tsx

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { getInitColorSchemeScript } from '@mui/material/styles';
import { NextAppProps } from './_app'

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>...</Head>
        <body>
          {getInitColorSchemeScript({ nonce: this.props.nonce })}
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx: DocumentContext) => {
  const nonce = 'nonce-123456789' // generate nonce hash using e.g. crypto

  const originalRenderPage = ctx.renderPage
  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App: React.ComponentType<React.ComponentProps<AppType> & NextAppProps>) =>
        function EnhancedApp(props) {
          return <App nonce={nonce} {...props} />
        }
    })

  const initialProps = await Document.getInitialProps(ctx)

  return {
    ...initialProps,
    nonce
  }
}

export default MyDocument

for _app.tsx:

import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';
import { AppProps } from 'next/app'

export interface NextAppProps extends AppProps {
  nonce?: string
}

function App(props: NextAppProps) {
  return <CssVarsProvider nonce={nonce}>...</CssVarsProvider>;
}

Motivation 🔦

For a standard security of web frontend
@rikusen0335 rikusen0335 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 11, 2023
@rikusen0335 rikusen0335 changed the title Add nonce to CssVarsProvider and getInitColorSchemeScript() for CSP [MUI][RFC] Add nonce to CssVarsProvider and getInitColorSchemeScript() for CSP Sep 11, 2023
@zannager zannager added package: system Specific to @mui/system RFC Request For Comments customization: css Design CSS customizability labels Sep 11, 2023
@oliviertassinari oliviertassinari changed the title [MUI][RFC] Add nonce to CssVarsProvider and getInitColorSchemeScript() for CSP Add nonce to CssVarsProvider and getInitColorSchemeScript() for CSP Sep 16, 2023
@oliviertassinari oliviertassinari changed the title Add nonce to CssVarsProvider and getInitColorSchemeScript() for CSP [getInitColorSchemeScript] Add nonce to CssVarsProvider and getInitColorSchemeScript() for CSP Sep 16, 2023
@oliviertassinari oliviertassinari changed the title [getInitColorSchemeScript] Add nonce to CssVarsProvider and getInitColorSchemeScript() for CSP [system] Add nonce to CssVarsProvider and getInitColorSchemeScript() for CSP Sep 16, 2023
@oliviertassinari oliviertassinari added enhancement This is not a bug, nor a new feature and removed customization: css Design CSS customizability RFC Request For Comments labels Sep 16, 2023
@ZeeshanTamboli ZeeshanTamboli removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 22, 2023
@siriwatknp siriwatknp mentioned this issue Jun 10, 2024
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@siriwatknp siriwatknp

Labels
enhancement This is not a bug, nor a new feature package: system Specific to @mui/system
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add InitColorSchemeScript for Next.js App Router siriwatknp/material-ui
5 participants
@oliviertassinari @siriwatknp @rikusen0335 @ZeeshanTamboli @zannager