fix(ui): disable critical-inlining to prevent CSP failure#893
Conversation
this critical inlining option is meant to improve the first contentful paint metric but does so in a way that is not compatible with a safe content-security-policy this only affected production builds which is why we never saw it in development
📝 WalkthroughWalkthroughThe production build configuration in Angular's configuration file now explicitly defines optimization settings: script optimization enabled, style minification enabled with critical CSS inlining disabled, and font optimization enabled. The service worker configuration remains unchanged. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
✨ Simplify code
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
frontend/angular.json (1)
99-106: Simplifyoptimizationconfig to show only the non-default override.Angular's production optimization defaults apply
scripts: true,styles.minify: true, andfonts: true. OnlyinlineCritical: falseis an explicit override; remove the redundant defaults to make the intent clearer and reduce future diff noise.♻️ Suggested minimal form
"outputHashing": "all", "serviceWorker": "ngsw-config.json", "optimization": { - "scripts": true, "styles": { - "minify": true, "inlineCritical": false - }, - "fonts": true + } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/angular.json` around lines 99 - 106, The optimization block contains redundant defaults; simplify it by removing explicit "scripts": true, "styles": { "minify": true }, and "fonts": true entries and keep only the actual override "inlineCritical": false under the "optimization" -> "styles" object so the config shows only the non-default change (refer to the "optimization", "scripts", "styles", "minify", "inlineCritical", and "fonts" keys in the existing snippet).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@frontend/angular.json`:
- Around line 99-106: The optimization block contains redundant defaults;
simplify it by removing explicit "scripts": true, "styles": { "minify": true },
and "fonts": true entries and keep only the actual override "inlineCritical":
false under the "optimization" -> "styles" object so the config shows only the
non-default change (refer to the "optimization", "scripts", "styles", "minify",
"inlineCritical", and "fonts" keys in the existing snippet).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro
Run ID: 1e3555ab-3853-4ce1-9034-f8260e00ee5a
📒 Files selected for processing (1)
frontend/angular.json
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: Test Suite / Backend Tests
- GitHub Check: Test Suite / Frontend Tests
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (actions)
- GitHub Check: Analyze (java-kotlin)
- GitHub Check: Frontend Lint Threshold Check
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: imnotjames
Repo: grimmory-tools/grimmory PR: 848
File: frontend/src/index.html:9-9
Timestamp: 2026-04-25T02:36:26.141Z
Learning: In the grimmory project (`frontend/src/index.html`), adding broad CSP directives like `default-src 'self'` with targeted overrides breaks the application. The CSP must be kept minimal and targeted to the actual resource needs of the app. Avoid recommending broad defense-in-depth CSP additions for this project.
🔇 Additional comments (1)
frontend/angular.json (1)
99-106: Targeted fix is correct.Disabling
inlineCriticalis the right way to avoid emitting inline<style>blocks that would otherwise be blocked by a strictstyle-src 'self'CSP without a nonce/hash. Thedevelopmentconfiguration is unaffected (stilloptimization: false), matching the PR description that the issue only manifests in production.
Description
this critical inlining option is meant to improve the first contentful paint metric but does so in a way that is not compatible with a safe content-security-policy
this only affected production builds which is why we never saw it in development
Changes
disalble angular option
projects.grimmory.architect.build.configurations.production.optimization.styles.inlineCriticalSummary by CodeRabbit