Accessing the AppContext in Next.js within the _document file is the

Question

Accessing the AppContext in Next.js within the _document file is the

My challenge with using next js is the occurrence of Content-Security-Policy issues due to the inline styles it utilizes.

If 'unsafe-inline' is not added to the style-src, you will encounter the error message 'Refused to apply inline style because it violates the following Content Security Policy directive.'

However, allowing 'unsafe-inline' poses security risks that we want to avoid.

Some related problems and discussions on this matter include:

In my case of server-side rendering, the recommended solution involves implementing a CSP in the response header and adding a nonce to the document. For example:

Sample code snippet here...

The drawback of this approach is that having getInitialProps in my _app file means that the getInitialProps at the _document level won't be called.

I can generate the CSP and nonce in the _app's getInitialProps but accessing the nonce in the _document becomes problematic.

Different code snippet here...

As removing getInitialProps from _app would disrupt the application flow, I am exploring ways to share properties between _app and _document or seeking alternative solutions to resolve the CSP issues effectively.

javascript next.js content-security-policy

Answer 1

Answer №1

Transferring data from _app to _document may seem impossible as _document is executed first. However, you can utilize the getInitialProps function in both _app and _document separately, eliminating the need to modify your existing _app. Any nonce/csp modifications can be made within _document, prior to _app's execution.

getInitialProps is a function at the component level, meaning it will execute on every component it is applied to, including _document and _app if used in both places. However, it functions solely on the server side, thus nonces won't update with client-side routing changes or live reloading during development mode.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    const [csp, nonce] = generateCsp()
    ctx?.res?.setHeader('Content-Security-Policy', csp)
    return { ...initialProps, nonce }
  }

  render() {
    return (
      <Html>
        <Head nonce={this.props.nonce} />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

It's important to note that the Head component within _document differs from the one found in next/head. Upon examining the next/head code, there doesn't appear to be support for a nonce prop, necessitating its implementation within _document.

Answer 2

Transferring data from _app to _document may seem impossible as _document is executed first. However, you can utilize the getInitialProps function in both _app and _document separately, eliminating the need to modify your existing _app. Any nonce/csp modifications can be made within _document, prior to _app's execution.

getInitialProps is a function at the component level, meaning it will execute on every component it is applied to, including _document and _app if used in both places. However, it functions solely on the server side, thus nonces won't update with client-side routing changes or live reloading during development mode.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    const [csp, nonce] = generateCsp()
    ctx?.res?.setHeader('Content-Security-Policy', csp)
    return { ...initialProps, nonce }
  }

  render() {
    return (
      <Html>
        <Head nonce={this.props.nonce} />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

It's important to note that the Head component within _document differs from the one found in next/head. Upon examining the next/head code, there doesn't appear to be support for a nonce prop, necessitating its implementation within _document.

Accessing the AppContext in Next.js within the _document file is the

Answer №1

Similar questions

What is the most effective approach to invoking a handling function within a React component?

Tips for including shared information across different ionic tabs

Creating a custom regex script in Javascript to properly parse Google Sheets data that contains commas

Delay the execution of @mouseover in Vue: a guide to managing scope

Is it possible to assign binary content to the src attribute of an img, audio, or video tag?

Melodic Streaming Platform

Changing a single variable into an array that holds the variable in JavaScript

When an element is dragged within the mcustomscrollbar container, the scroll does not automatically move downward

The error message displayed reads as follows: "topojson has encountered a TypeError: Unable to access the property 'feature' as

Utilizing Facebook's JavaScript SDK to transmit variables to PHP using ajax

Filtering an array of objects by multiple arrays of keys

Looking to extract the full page source with Selenium and Node.js? Having trouble getting the complete source using driver.page_source as it

"Unleashing the power of React Native: A single button that reveals three different names

Are you familiar with the Puppeteer PDF tool that generates empty pages from the cloud and seamlessly integrates with Postman? What do

Show the content of a list from a different URL on a webpage using HTML with the

javascript: revealing the identity of a click event handler

Issue with submitting forms in modal using Bootstrap

Determining if a swf file has loaded using JavaScript and swfobject

I desire to incorporate a subtle fading effect into the script

ES6 does not work with React hello world