Content Security Policy - Nonce not set

[jovana]

Hi, I'm using the ant.design. In the config I have set up:

<ConfigProvider
  csp={{ nonce: `${process.env.REACT_APP_GENERATED_NONCE_VALUE}` }}
>              
<Code />
</ConfigProvider>

dynamicCSS.js:73 : Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-CODE'".

How can I fix this issue?

[avel]

I can reproduce this issue as well. It seems that something as simple as an icon or spinner alongside an ant.d Notification component can trigger this.

[vulpes-ferrilata]

I faced the same issue, and this is the way you can do to workaround with NextJS:

• Transpile antd icons package (for CRA you need to config webpack to use babel to transpile the package):

// next.config.js
const withTM = require('next-transpile-modules')(['@ant-design/icons'])
module.exports = withTM(nextConfig)

• Implement icon context provider:

import IconContext from '@ant-design/icons/es/components/Context'
import { CSPConfig } from 'antd/es/config-provider'
import { ReactNode } from 'react'

interface IProps {
  children: ReactNode
  csp: CSPConfig
}

export const IconContextProvider = ({ children, csp }: IProps) => {
  return <IconContext.Provider value={{ csp }}>{children}</IconContext.Provider>
}

• Add icon context provider next to config provider:

<ConfigProvider
  csp={{ nonce: `${process.env.REACT_APP_GENERATED_NONCE_VALUE}` }}
>              
  <IconContextProvider
    csp={{ nonce: `${process.env.REACT_APP_GENERATED_NONCE_VALUE}` }}
  >
    <Code />
  </IconContextProvider>
</ConfigProvider>

Some icons sourced from the 'es' package, which was built using CommonJS, do not have their icon context included in the ConfigProvider. To resolve the issue, transpile the package and pass the CSP (Content Security Policy) information to its icon context.