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 best way to create an animation where every letter in a word transitions to a different

Binding hover and load events using jQuery on elements that are dynamically generated

Retrieve a variety of items and pass them to a view using the mssql module in Node

"An error occurs when trying to trigger a .click() event within a list element

Looking for a way to pass data to a dynamic page in NextJS without using props? I attempted to avoid unnecessary network calls and reuse data by experimenting with React Context, but have

Tips for utilizing Material UI's Tooltip feature alongside a TableRow

Is there a way to trigger a "click" on a webpage without physically clicking? So that I can preview the response message before actually clicking

Utilizing Squelize's junction table for forming new connections: a comprehensive guide

Stop jQuery Tab from Initiating Transition Effect on Current Tab

Retrieve the radio button value without using a key when submitting a form in JSON

Do ES6 features get transpiled into ES5 when utilized in TypeScript?

using hover/click functionality with a group of DIV elements

Unit test produced an unforeseen outcome when executing the function with the setTimeout() method

Exploring the boundaries of HTML data manipulation using JavaScript or jQuery

Combining two JSON objects with sailsjs-nodejs to create a single merged object

Using AngularJS to send a model to ui-select

Supply context to node package

JavaScript Array Objects

When using the map function, I am receiving an empty item instead of the intended item based on a condition

Error: Attempting to access property 'error' of an undefined object resulted in an unhandled exception