Content-Security-Policy

Add security to you application
react-dsfr supports strict Content-Security-Policy headers.
Nonce
nonce - HTML (HyperText Markup Language) | MDN
Vite
Next.js App Router
Next.js Pages Router
Create React App
Other
Add your Content-Security-Policy either by configuring your server, or with the meta tag.
Remember that a nonce MUST be generated per requests.

Add the nonce to react-dsfr
src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { App } from "./App";
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
​
const nonce = "123456789"; // you have to inject it on render
startReactDsfr({ defaultColorScheme: "system", nonce });
​
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
To get the nonce, you have to enable SSR with Vite and either inject the value in process.env or in a additional custom meta tag in your index.html. You can also infer it by using the content of the Content-Security-Policy meta tag if you configured the header this way.
For more information about SSR in Vite see the following page.
Vite
vite_js
Vite SSR
This documentation is for Next projects using the App router.
You are in this case if you have a app/ directory at the root of your project.
The following assumes that you configured your CSP accordingly to the Next.js recommendation.
First configure the nonce in the <DsfrHead /> tag in your root layout:
app/layout.tsx
import { DsfrHead } from "@codegouvfr/react-dsfr/next-appdir/DsfrHead";
import { DsfrProvider } from "@codegouvfr/react-dsfr/next-appdir/DsfrProvider";
import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAttributes";
import { StartDsfr } from "./StartDsfr";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";
import { headers } from "next/headers";
​
export default function RootLayout({ children }: { children: JSX.Element; }) {
  const nonce = headers().get("x-nonce") ?? undefined;
  //NOTE: The lang parameter is optional and defaults to "fr"
  const lang = "fr";
  return (
    <html {...getHtmlAttributes({ defaultColorScheme, lang })} >
      <head>
        <StartDsfr />
        <DsfrHead Link={Link} nonce={nonce} />
      </head>
      <body>
        <DsfrProvider lang={lang}>
          {children}
        </DsfrProvider>
      </body>
    </html>
  );
}
The X-Nonce header is forwarded by the middleware.ts as suggested by Next.js.
It important to remember that reading headers in the root layout turns all pages to dynamic rendering opt-in. This is mandatory for nonce.
If you use the NextAppDirEmotionCacheProvider, don't forget to add the nonce to it accordingly to what Emotion and MUI needs: <NextAppDirEmotionCacheProvider options={{ "key": "css", nonce, prepend: true }}>
Then you have to tell react-dsfr to read and forward the nonce injected to all other scripts and styles by adding doCheckNonce: true; to the startReactDsfr() function:
app/StartDsfr.tsx
"use client";
​
import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";
​
declare module "@codegouvfr/react-dsfr/next-appdir" {
  interface RegisterLink { 
    Link: typeof Link;
  }
}
​
startReactDsfr({ defaultColorScheme, Link, doCheckNonce: true });
​
export function StartDsfr(){
  //Yes, leave null here.
  return null;
}
Next.js with old Pages Router is not supported. As per Next.js suggests, we recommended migrating to App Router.
Getting Started: Installation
App Router Migration
Create React App by itself is a way to build static sites which by definition cannot handle dynamic headers (like CSP) per request as no server will serve the pages.
Before getting into nonce configuration, you have ponder whether or not you need that level of security within your static app, and if so, choosing a solution to generate and inject the nonce into your app.
Once your injected the nonce into your app, add the following code:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
​
const nonce = "123456789" // have to be dynamic and injected
startReactDsfr({ defaultColorScheme: "system", nonce });
​
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
Your framework isn't supported? Let's get in touch!
Trusted Types Policy
CSP: trusted-types - HTTP | MDN
Trusted Types are supported out-of-the box.
When configuring your CSP you only have to add our policy names to your list:
header configuration
Content-Security-Policy:
    require-trusted-types-for 'script';
    trusted-types react-dsfr react-dsfr-asap;
We register two policies with only the createHTML hook. Policy names are react-dsfr and react-dsfr-asap
Custom policy name
You can configure a custom policy name if you need to by adding the trustedTypesPolicyName options to the startReactDsfr() function.
In Next.js App Router, trustedTypesPolicyName must also be set to the <DsfrHead /> component.
When a custom name is set, the suffix -asap is used for the second policy. Don't forget to add both to your header configuration.
Example:
If you set trustedTypesPolicyName: "my-app"
You header must be configured like so: trusted-types my-app my-app-asap;
Analytics
Publishing a NPM modules that depends on react-dsfr
Last modified 2mo ago