diff --git a/.changeset/short-ways-arrive.md b/.changeset/short-ways-arrive.md new file mode 100644 index 0000000000..11eef5755f --- /dev/null +++ b/.changeset/short-ways-arrive.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': minor +--- + +Added documentation on how to use the Components for Angular with a strict Content Security Policy (CSP). diff --git a/packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.docs.mdx b/packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.docs.mdx index 5c7d6ef64f..5af55b60e8 100644 --- a/packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.docs.mdx +++ b/packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.docs.mdx @@ -24,3 +24,20 @@ Importing the components to your project. Usage within your template. + +## Content Security Policy (CSP) + +Angular components use inline scripts and styles. +To enable their execution while enforcing a strict Content Security Policy (CSP), you can use a CSP `nonce`. + +A nonce is a randomly generated word or phrase intended for one-time use, which must update with each HTTP response. +Inline scripts or styles with a `nonce` attribute matching the current nonce value set in the CSP will execute properly, while others will be blocked. +Learn more in the CSP nonce documentation. + +There are two ways to configure Angular to automatically set `nonce` attributes: + +1. Set an `ngCspNonce` attribute on the root application element. +2. Provide the nonce using the `CSP_NONCE` injection token. + +This configuration will also apply automatically to components in the Components for Angular package. +For more details, refer to the Angular security guide.