You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Due to Next.js's regular csp setting, we are generating nonce in _document.tsx and need to pass it to _app.tsx
Below code is just example I am using tho doesn't work, getting two of errors: Warning: Extra attributes from the server: nonce script when passing nonce through nonce to App like nonce={nonce} Warning: Prop 'nonce' did not match. Server: "" Client: "sOmEtHiNgHaShGeNeRaTeD==" when passing nonce through pageProps.nonce
// _document.tsx codeconstMyDocument=()=>{constcsp=`...`return(<Htmllang="ja"><Headnonce={nonce}><metahttpEquiv="Content-Security-Policy"content={csp}/></Head><body><Main/><NextScriptnonce={nonce}/></body></Html>)}MyDocument.getInitialProps=async(ctx: DocumentContext)=>{constnonce=generateNonce()constoriginalRenderPage=ctx.renderPagectx.renderPage=()=>originalRenderPage({enhanceApp: (App: React.ComponentType<React.ComponentProps<AppType>&{nonce: string}>)=>functionEnhancedApp(props){props.pageProps.nonce=nonce// pageProps.nonce or nonce only either one is neededreturn<Appnonce={nonce}{...props}/>}})constinitialProps=awaitDocument.getInitialProps(ctx)return{
...initialProps,
nonce
}}exportdefaultMyDocument// end of _document.tsx// _app.tsx codeexportconstMyApp=({
Component,
pageProps,
nonce
}: NextAppProps)=>{<ThemeProvidernonce={nonce}><Component{...pageProps}/></ThemeProvider>}exportdefaultMyApp// end of _app.tsx
The text was updated successfully, but these errors were encountered:
Additional info: As a workaround, I put hash of all the scripts inside the <head> tag including next-themes's, so that we can add hash to nonce like sha256-abcdefghijk... to permit scripts.
Due to Next.js's regular csp setting, we are generating
nonce
in_document.tsx
and need to pass it to_app.tsx
Below code is just example I am using tho doesn't work, getting two of errors:
Warning: Extra attributes from the server: nonce script
when passing nonce throughnonce
toApp
likenonce={nonce}
Warning: Prop 'nonce' did not match. Server: "" Client: "sOmEtHiNgHaShGeNeRaTeD=="
when passing nonce throughpageProps.nonce
The text was updated successfully, but these errors were encountered: