fix(security): render step info as text; add CSP and anti-framing headers

[snevesbarros]

Summary

Fixes two findings from the security review: HTML injection in step text, and no clickjacking or security headers. The API half of the headers fix is in AnglesHQ/angles (same branch name).

Step info is rendered as text (StepsTimeline.js)

Before: a step's info was parsed as HTML after DOMPurify. That blocked scripts, but still let through forms, password inputs, inline styles (for example a full-screen fixed overlay) and protocol-relative links such as //evil.example. Anyone with an API token for a team, including a CI job, could show teammates or admins a fake "session expired, re-enter your password" form that posted off-site.

Now: info is rendered as text, so HTML in it is shown and never interpreted. Only http(s) URLs become links, built as React elements with target="_blank" rel="noopener noreferrer".

Behaviour change: results that deliberately sent HTML for formatting (bold, lists) now show the raw tags.

Security headers (src/proxy.js)

Every page now gets:

• Content-Security-Policy with a per-request nonce:
  • Next.js applies the nonce to its own scripts, and RuntimeConfigScript reads it from x-nonce. Scripts injected into a page don't run. 'unsafe-eval' is added in development only.
  • connect-src is 'self' plus the API origin from ANGLES_API_BASE_URL. It's read at runtime, which is why this lives in the proxy rather than in next.config.mjs.
  • img-src 'self' data: blob:, media-src 'self' blob: (screenshots and attachment viewers), object-src 'none', base-uri 'self'.
  • form-action 'self': no form can submit off-site. This is a second line of defence for the step-info issue above.
  • frame-ancestors 'none'.
  • style-src keeps 'unsafe-inline', because rsuite and ApexCharts set inline styles at runtime, which a nonce can't cover.
• X-Frame-Options: DENY, for browsers that predate frame-ancestors.
• X-Content-Type-Options: nosniff and Referrer-Policy: strict-origin-when-cross-origin.

Static chunks, images and public assets are excluded from the proxy.

Testing

• npm run build passes, and next start sends the new headers.

• With a production build against a running API, I browsed every page in Chromium:

  • login, dashboard, test run, metrics, screenshot library, execution history
  • manual test cases and runs, shared steps
  • user and team settings, the three admin pages, about

  Zero CSP violations, zero page errors, login works, and the runtime config is present.

• On a temporary local merge with feat(attachments): show test attachments on the execution #106 (attachments), the video, image, HTML snapshot, log and HAR viewers all work under the policy with zero violations. The HTML snapshot iframe inherits the policy, so its external resources are blocked too.

• Embedding the UI in an iframe from another page is refused.

• Posted the review's phishing payload as step info: the page renders it as text, with no form or inputs, and only the real https:// URL becomes a link.

Follow-up

dompurify and html-react-parser are now unused. Removing them makes this npm version rewrite unrelated "peer" metadata across package-lock.json, so that's left for a separate cleanup PR.

🤖 Generated with Claude Code

https://claude.ai/code/session_01KgQXSUjuLVXmLWxobnMfSf

---

Generated by Claude Code