pawarprasad123 opened a new pull request, #744:
URL: https://github.com/apache/atlas/pull/744
## What changes were proposed in this pull request?
This PR prepares the React Dashboard for strict Content Security Policy
(CSP) by wiring a per-request CSP nonce into MUI/Emotion style injection. When
the server injects a nonce into the HTML shell and CSP headers,
Emotion-generated <style> tags will carry the same nonce and will not be
blocked by the browser.
Without this change, MUI components (which use Emotion for sx and runtime
styles) would render unstyled under a strict style-src 'self' 'nonce-...'
policy.
## Problem
DAST findings show Atlas UI currently allows inline scripts, dynamic eval,
and inline styles. Server-side work will introduce per-request nonce support.
On the React side:
1. MUI/Emotion injects runtime <style data-emotion="css"> tags — these need
a matching CSP nonce.
2. HTML shell needs a placeholder for the server to inject the nonce value.
Under strict CSP, blocked Emotion styles would break the entire React UI
(sidebar, tables, forms, toasts, etc.).
## Out of Scope (follow-up on same JIRA)
Item | Phase | Notes
-- | -- | --
Classic Dashboardv2 (/index.html) | — | Not in scope per JIRA
Server-side CSP filter/header | Backend | Separate PR
Lineage tooltip inline style= attributes ( need to verify once the backend
changes are available) | Phase 2 | atlas-lineage/src/index.js — separate change
dangerouslySetInnerHTML audit | Phase 2 | Separate review
Third-party CSS nonce (toastify, quill, etc.) | Server | Backend link-tag
nonce injection
## How was this patch tested?
Automated tests
Command run:
```
cd dashboard
npm test -- --testPathPattern="cspNonce|emotionCache|Main.test"
--watchAll=false
```
Result: 33/33 passed (3 suites, ~3s)
Build verification
`cd dashboard && npm run build
`
Result: Success (~12.6s) — no TypeScript or Vite errors.
Linter verification
Result: No linter errors in changed files.
Manual testing (required before integrated merge)
These require backend CSP + HTML nonce injection (not available in unit
tests):
Test | How to verify
-- | --
1 | CSP header has nonce | curl -I -k -u admin:admin
https://<host>:<port>/n3/index.html — header contains 'nonce-...', no
'unsafe-inline'
2 | Meta tag populated | curl -k ... \| grep csp-nonce — content matches
header nonce
3 | Emotion styles have nonce | DevTools console:
[...document.querySelectorAll('style[data-emotion]')].every(s =>
s.getAttribute('nonce') === '<nonce>') → true
4 | No console CSP errors | Open /n3/index.html, check DevTools Console on
all flows
5 | UI renders styled | Smoke: login → search → entity detail → admin →
statistics
6 | Local strict CSP simulation | Add test nonce to index.html + strict CSP
meta (per JIRA manual guide)
Dependencies
Backend PR must deploy per-request nonce generation and HTML injection
before full E2E validation.
Vite build already externalizes JS bundles — no pipeline changes needed.
@emotion/cache is available transitively via @emotion/react / MUI.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
