SchweizerischeBundesbahnen / scion-microfrontend-platform

SCION Microfrontend Platform is a TypeScript-based open-source library that helps to implement a microfrontend architecture using iframes.
Eclipse Public License 2.0
68 stars 9 forks source link

Make sci-router-outlet CSP nonce compatible. #287

Open valentin-kennke opened 5 days ago

valentin-kennke commented 5 days ago

Is your feature request related to a problem? Please describe.

Our Angular application implements Content Security Policy (CSP) using ngCspNonce (as described in https://angular.dev/best-practices/security#content-security-policy). However, this doesn't affect the inline styles [1] within the shadow DOM of sci-router-outlet. As a result, we're forced to use the unsafe-inline directive in our CSP, which compromises our application's security posture.

Describe the solution you'd like

We propose modifying the Web Component to support CSP nonces for its styles. This could be achieved by:

  1. Accepting a data-nonce attribute on the sci-router-outlet Web Component.
  2. The inline styles should not be part of the HTML_TEMPLATE but should be added to the shadow DOM in the constructor of SciRouterOutletElement.
  3. Using the nonce when creating the