[PR] ATLAS-5389: Atlas React Dashboard — Align UI with strict browser resource policy (nonce-based script/style handling) [atlas]

["pawarprasad123 (via GitHub)" <gi...@apache.org>]

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: dev-unsubscribe@atlas.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org