Comment on page
🔒
Content-Security-Policy
Add security to you application
react-dsfr
supports strict Content-Security-Policy headers.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
You are in this case if you have a
app/
directory at the root of your project.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>
);
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
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 modified 2mo ago