🔒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
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.
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:
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