🔒Content-Security-Policy

Add security to you application

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

Nonce

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 SSR

Trusted Types Policy

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;

Last updated