🔒Content-Security-Policy

Add security to you application

react-dsfr supports strict Content-Security-Policy headers.

Nonce

nonce - HTML (HyperText Markup Language) | MDN

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.

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;
}

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>
);

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;

PreviousAnalytics NextPublishing a NPM modules that depends on react-dsfr

Last updated 1 year ago

Was this helpful?