Prasad P. Pawar created ATLAS-5389:
--------------------------------------
Summary: Atlas React Dashboard — Align UI with strict browser
resource policy (nonce-based script/style handling)
Key: ATLAS-5389
URL: https://issues.apache.org/jira/browse/ATLAS-5389
Project: Atlas
Issue Type: Bug
Components: atlas-webui
Reporter: Prasad P. Pawar
Assignee: Prasad P. Pawar
DAST scan findings on Atlas UI endpoints show that current browser resource
policy headers allow inline scripts, dynamic JavaScript evaluation, and inline
styles. Server-side work will introduce per-request nonce support; this ticket
covers React Dashboard UI only ({{{}/n3/{}}}).
h3. Scope
In scope
* React Dashboard ({{{}dashboard/{}}} module, served at {{{}/n3/index.html{}}})
* Client-side changes to work with nonce-based script/style policy
* Unit tests for new/changed React code
* Smoke validation of main dashboard flows under the updated policy
Out of scope
* Classic Dashboardv2 (Backbone UI at {{{}/index.html{}}})
* Server-side filter/header implementation (tracked separately)
* Login/error page templates in {{webapp/}}
h3. Problem (UI perspective)
Under the planned strict policy:
# Inline scripts in HTML shell — must receive a server-injected nonce or be
externalized.
# MUI/Emotion runtime {{<style>}} tags — must use the same nonce as the CSP
header, or styles will be blocked.
# Lineage tooltip HTML — uses inline {{style=}} attributes in dynamically
built strings; may need CSS class migration.
React {{style=\{{}}}} props and MUI {{sx={}}} are handled differently: {{sx}}
goes through Emotion (needs nonce); {{style=\{{}}}} is governed by
{{style-src-attr}} (server policy decision, no React code change if
transitional allowance is kept).
h3. Planned Fix
Phase 1 — Client nonce wiring (P0)
* Add {{dashboard/src/utils/cspNonce.ts}} to read nonce from {{<meta
name="csp-nonce">}} or the first {{<script nonce="...">}} tag.
* Update {{{}dashboard/src/Main.tsx{}}}:
** Create Emotion cache with {{createCache(\{ key: 'css', nonce: getCspNonce()
})}}
** Wrap app in {{CacheProvider}} + {{StyledEngineProvider}}
* Add unit tests: {{{}cspNonce.test.ts{}}}, update {{Main.test.tsx}}
Phase 2 — Inline content cleanup (P1)
* Refactor lineage tooltip inline styles in
{{dashboard/src/views/Lineage/atlas-lineage/src/index.js}} to CSS classes.
* Review {{dangerouslySetInnerHTML}} usage in {{commonComponents.tsx}} and
related components (content handling, not policy headers).
Phase 3 — Validation (P0)
* Smoke test: login → search → entity detail → lineage → admin → statistics.
* Confirm no browser console policy violations on {{/n3/}} routes.
* Update test documentation.
h3. Files to change (approx.)
||File||Change||
|{{dashboard/src/utils/cspNonce.ts}}|New — nonce reader utility|
|{{dashboard/src/utils/__tests__/cspNonce.test.ts}}|New — unit tests|
|{{dashboard/src/Main.tsx}}|Wire Emotion cache with nonce|
|{{dashboard/src/__tests__/Main.test.tsx}}|Assert nonce wiring|
|{{dashboard/src/views/Lineage/atlas-lineage/src/index.js}}|Replace inline
tooltip styles with CSS classes|
|{{dashboard/index.html}}|Optional {{<meta name="csp-nonce">}} placeholder for
server injection|
Estimated total: ~6–8 files, ~150 lines of change
h3. Dependencies
* Server must deploy per-request nonce generation and HTML nonce injection
before this UI work is validated in an integrated environment.
* Vite build already externalizes JS bundles; no build pipeline changes
expected.
h3. Acceptance Criteria
* React Dashboard loads and renders correctly at {{/n3/index.html}} under
nonce-based policy
* MUI/Emotion components render without blocked styles
* No browser console policy violations on primary user flows
* Unit tests added/updated for {{cspNonce.ts}} and {{Main.tsx}}
* Lineage tooltips display correctly after CSS class migration
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
