Using CSP nonce - enforce stricter CSP

[imolorhe]

Related to #2775

• Adds cspNonce to altair config option.
• Applied nonce to angular
• Applied nonce to codemirror
• Applied nonce to emotion
• Applied nonce to ng-zorro
• Add CSP section to docs - documenting required CSP allowed values
• Updated matching config options in altair-static
• Update DEV.md about development CSP in angular.json

Required CSP allowed values

• script-src
  • self
  • nonce
  • inline init script sha ('sha256-kFTKSG2YSVB69S6DWzferO6LmwbqfHmYBTqvVbPEp4I=')
  • https://cdn.jsdelivr.net (for plugins)
  • localhost:* (for plugin local development)
  • unsafe-eval (for prerequest worker)
• style-src
  • self
  • nonce
  • inline style hiding the app before CSS is loaded ('sha256-arhA+A/TghkU+wjTBnyM2ON0qy7VX3FgX7wznWzhBd4=')
• frame-src
  • https://cdn.jsdelivr.net (for plugins)
  • self
  • localhost:*
• connect-src
  • * (allow all)
  • self
• img-src
  • self
  • * (allow all)
• font-src
  • self
• base-uri
  • * (allow all) (for easy hosting e.g. CDN backed usage)
• object-src
  • self

Summary by Sourcery

Documentation:

• Add a CSP section to the documentation to guide users on setting up Content Security Policy.

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request implements Content Security Policy (CSP) nonce support for Altair. It adds a cspNonce configuration option to pass a cryptographic nonce to various parts of the application, including Angular templates, Emotion CSS-in-JS, and CodeMirror editor. This allows the application to be compliant with CSP rules, enhancing security by only allowing scripts and styles with the correct nonce value to be executed.

Sequence diagram for applying theme with CSP nonce

sequenceDiagram
    participant ThemeDirective
    participant EmotionInstance
    participant getCSS
    ThemeDirective->>ThemeDirective: getEmotionInstance()
    alt EmotionInstance does not exist
        ThemeDirective->>ThemeDirective: createEmotion({ key: 'altair-theme', nonce: this.cspNonce })
        ThemeDirective-->>EmotionInstance: Returns new Emotion instance
    end
    ThemeDirective->>EmotionInstance: css(getCSS(appTheme, appDarkTheme, accentColor))
    EmotionInstance-->>ThemeDirective: Returns class name
    ThemeDirective->>document: document.documentElement.classList.add(className)

Loading

File-Level Changes

Change	Details	Files
Added cspNonce to the ThemeDirective to allow dynamic styling with CSP nonce.	Added cspNonce input to the ThemeDirective. Initialized emotionInstance with cspNonce from the input. Modified getEmotionInstance to create an Emotion instance with the provided nonce.	packages/altair-app/src/app/modules/altair/directives/theme/theme.directive.ts
Configured CSP headers for development environment in angular.json.	Added headers configuration to the serve target in angular.json. Set Content-Security-Policy to include nonce-change-me for style-src.	packages/altair-app/angular.json
Passed CSP nonce to CodeMirror editor for CSP compliance.	Injected AltairConfig into CodemirrorComponent. Passed cspNonce from AltairConfig to EditorView.cspNonce.of().	packages/altair-app/src/app/modules/altair/components/codemirror/codemirror.component.ts
Provided CSP_NONCE using altairConfig.cspNonce in AltairModule.	Added a provider for CSP_NONCE that uses altairConfig.cspNonce as its value.	packages/altair-app/src/app/modules/altair/altair.module.ts
Added cspNonce option to AltairConfigOptions interface.	Added cspNonce property to the AltairConfigOptions interface in altair-core.	packages/altair-core/src/config/options.ts
Passed cspNonce from AltairConfig to the main Altair component.	Added cspNonce property to AltairComponent. Initialized cspNonce with the value from altairConfig. Passed cspNonce to the app-theme directive in the template.	packages/altair-app/src/app/modules/altair/containers/altair/altair.component.ts packages/altair-app/src/app/modules/altair/containers/altair/altair.component.html
Configured cspNonce in AltairConfig and allowed properties.	Added cspNonce property to the AltairConfig class. Assigned the cspNonce value from the options to the AltairConfig instance. Added cspNonce to the allowedProperties object in altair-static.	packages/altair-core/src/config/index.ts packages/altair-static/src/index.ts

Possibly linked issues

• CSP with helmet #2775: The PR addresses the CSP errors described in the issue by implementing CSP nonce.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!
• Generate a plan of action for an issue: Comment @sourcery-ai plan on
  an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @imolorhe - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider creating a dedicated configuration service or constant for the default CSP nonce value to avoid hardcoding it in multiple places.
• It might be useful to add a runtime check to ensure the provided CSP nonce is valid before applying it.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[github-actions]

Visit the preview URL for this PR (updated for commit 2597652):

https://altair-gql--pr2786-imolorhe-use-csp-non-zows9j1c.web.app

_{(expires Fri, 14 Mar 2025 20:29:32 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 02d6323d75a99e532a38922862e269d63351a6cf}