From e7061a4e31d6ecc841a9ac110337f7540fb4dd3e Mon Sep 17 00:00:00 2001
From: waterWang <672684719@qq.com>
Date: Sun, 23 Aug 2026 12:38:14 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20harden=20CSP=20=E2=80=94=20dro?=
 =?UTF-8?q?p=20style-src=20unsafe-inline,=20add=20connect-src=20and=20viol?=
 =?UTF-8?q?ation=20reporting?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove 'unsafe-inline' from style-src in frontend/nginx.conf; the codebase
  now renders without inline style attributes (ProgressBar uses the CSSOM,
  QueuesPage card layout moved to the .queue-card stylesheet class)
- Add connect-src with the backend API origin () plus Stellar
  Horizon/Soroban RPC endpoints used at runtime
- Add frame-ancestors, base-uri, form-action directives and CSP violation
  reporting (report-uri / Reporting-Endpoints)
- Verified the Vite production build emits no inline scripts, so script-src
  'self' requires no sha256 hash allowlist
- Document the CSP policy, API-origin override and rollout guidance in
  docs/deployment-strategy.md

Closes #192
---
 docs/deployment-strategy.md             | 67 +++++++++++++++++++++++++
 frontend/nginx.conf                     | 17 ++++++-
 frontend/src/components/ProgressBar.tsx | 16 +++++-
 frontend/src/pages/QueuesPage.tsx       |  6 +--
 frontend/src/styles/global.css          |  9 ++++
 5 files changed, 107 insertions(+), 8 deletions(-)

diff --git a/docs/deployment-strategy.md b/docs/deployment-strategy.md
index b8172ef..40e4d1e 100644
--- a/docs/deployment-strategy.md
+++ b/docs/deployment-strategy.md
@@ -76,3 +76,70 @@ Production container deployments must adhere to the following security baselines
   - **Scope:** The final runtime image (not intermediate build stages), scanned directly from the local Docker daemon.
   - **Trade-off:** Setting the threshold to `critical` blocks deployment for any unpatched critical CVE in the final image. This is the strictest policy and may require occasional triage of false positives or accept-risk overrides. A more permissive "advisory-only" approach would log findings without blocking the pipeline; the current configuration chooses security gate over velocity. Teams may relax to `high` after evaluating their vulnerability management process.
   - **Artifacts:** Scan reports in SARIF format are uploaded as workflow artifacts for every run (including PRs).
+
+## Content Security Policy (CSP) Configuration
+
+The frontend production image (`frontend/nginx.conf`) ships a strict Content-Security-Policy:
+
+```
+default-src 'self';
+script-src 'self';
+style-src 'self' https://fonts.googleapis.com;
+font-src 'self' https://fonts.gstatic.com;
+img-src 'self' data:;
+connect-src 'self' ${API_ORIGIN} https://soroban-testnet.stellar.org https://horizon-testnet.stellar.org;
+frame-ancestors 'none';
+base-uri 'self';
+form-action 'self';
+report-uri /csp-report;
+report-to csp-endpoint;
+```
+
+### Why no `'unsafe-inline'` in `style-src`
+
+The codebase renders all styles through Tailwind CSS class utilities plus a small
+set of stylesheet classes (`global.css`). There are no inline `style="..."` attributes
+or `<style>` tags in the production bundle:
+
+- `ProgressBar` sets its fill width via the CSSOM (`element.style.width`) instead of
+  an inline style attribute.
+- `QueuesPage` card layout hints (`content-visibility`, `contain-intrinsic-size`) live
+  in the `.queue-card` stylesheet class.
+- The built `dist/index.html` contains no inline scripts, so `script-src 'self'`
+  needs no `sha256-*` hash allowlist.
+
+Before adding an inline style to the codebase, prefer a stylesheet class or CSSOM
+assignment; otherwise a `sha256-*` hash must be added to the CSP.
+
+### Configuring the API origin
+
+`connect-src` allows the backend API origin through the nginx `$api_origin`
+variable, which defaults to `http://localhost:4000`. For deployments where the API
+is served from a different origin (e.g. `https://api.lineproof.com`), override it at
+container startup:
+
+```bash
+# Edit the `set $api_origin "..."` line in the copied nginx.conf, or mount a
+# replacement config:
+docker run -v ./custom-nginx.conf:/etc/nginx/conf.d/default.conf:ro \
+  -p 8080:80 lineproof-frontend
+```
+
+`connect-src` additionally allows the Stellar Horizon and Soroban RPC endpoints the
+frontend speaks to at runtime; extend the list if additional integrations are added.
+
+### Violation reporting
+
+Violations are reported to the same-origin `/csp-report` endpoint via
+`report-uri`/`Reporting-Endpoints`. Point `report-uri` at your CSP collector if the
+backend does not serve that path, and confirm `report-to`/`Reporting-Endpoints` are
+consistent before enforcing a strict policy in production.
+
+### Rollout guidance
+
+1. Deploy with the CSP in `Report-Only` mode first
+   (`Content-Security-Policy-Report-Only`) and collect violations for a soak period.
+2. Fix or allowlist any legitimate violations.
+3. Switch to enforcement (`Content-Security-Policy`) once the report stream is clean.
+4. Keep the violation collector wired up after enforcement; a clean report stream
+   confirms the policy is not breaking the app.
diff --git a/frontend/nginx.conf b/frontend/nginx.conf
index 362617f..9ced740 100644
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -4,6 +4,11 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
+    # Backend API origin used by the CSP connect-src directive.
+    # Defaults to the local development backend; override at deploy time if the
+    # API is served from a different origin (see docs/deployment-strategy.md).
+    set $api_origin "http://localhost:4000";
+
     # Serve static assets with long cache
     location ~* \.(js|css|woff2?|png|svg|ico)$ {
         expires 1y;
@@ -19,5 +24,15 @@ server {
     add_header X-Frame-Options "DENY" always;
     add_header X-Content-Type-Options "nosniff" always;
     add_header Referrer-Policy "strict-origin-when-cross-origin" always;
-    add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;" always;
+    # Strict CSP:
+    #  - style-src: no 'unsafe-inline' — Tailwind emits class-based styles only,
+    #    and every inline style attribute has been removed from the codebase.
+    #  - script-src: 'self' — the Vite production build emits no inline scripts
+    #    (verified on the built dist/index.html), so no sha256 hash is required.
+    #  - connect-src: explicit allow-list for the API origin and Stellar/Soroban
+    #    endpoints used at runtime.
+    #  - report-uri: collect violations server-side; adjust the endpoint to your
+    #    reporting collector if /csp-report is not served by the backend.
+    add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data:; connect-src 'self' $api_origin https://soroban-testnet.stellar.org https://horizon-testnet.stellar.org; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; report-uri /csp-report; report-to csp-endpoint;" always;
+    add_header Reporting-Endpoints 'csp-endpoint="/csp-report"' always;
 }
diff --git a/frontend/src/components/ProgressBar.tsx b/frontend/src/components/ProgressBar.tsx
index 1d97efc..10d2351 100644
--- a/frontend/src/components/ProgressBar.tsx
+++ b/frontend/src/components/ProgressBar.tsx
@@ -1,3 +1,5 @@
+import { useEffect, useRef } from 'react';
+
 interface Props {
   value: number;   // 0–100
   label?: string;
@@ -7,6 +9,16 @@ interface Props {
 
 export default function ProgressBar({ value, label, className = '', ariaHidden }: Props) {
   const pct = Math.min(100, Math.max(0, value));
+  const fillRef = useRef<HTMLDivElement | null>(null);
+
+  // Set the fill width via the CSSOM instead of an inline style attribute so the
+  // app stays compatible with the strict CSP (style-src 'self', no 'unsafe-inline').
+  useEffect(() => {
+    if (fillRef.current) {
+      fillRef.current.style.width = `${pct}%`;
+    }
+  }, [pct]);
+
   return (
     <div className={`space-y-1 ${className}`} aria-hidden={ariaHidden}>
       {label && (
@@ -17,8 +29,8 @@ export default function ProgressBar({ value, label, className = '', ariaHidden }
       )}
       <div className="h-2 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-700">
         <div
+          ref={fillRef}
           className="h-2 rounded-full bg-slate-800 dark:bg-slate-300 transition-all duration-500"
-          style={{ width: `${pct}%` }}
           role="progressbar"
           aria-label={label ?? 'Progress'}
           aria-valuenow={pct}
@@ -28,4 +40,4 @@ export default function ProgressBar({ value, label, className = '', ariaHidden }
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/pages/QueuesPage.tsx b/frontend/src/pages/QueuesPage.tsx
index 19721e7..263f325 100644
--- a/frontend/src/pages/QueuesPage.tsx
+++ b/frontend/src/pages/QueuesPage.tsx
@@ -97,11 +97,7 @@ export default function QueuesPage() {
                   key={queue.id}
                   to={`/queues/${queue.id}`}
                   aria-label={queue.name}
-                  className="rounded-2xl border border-slate-200 bg-white dark:bg-slate-800 dark:border-slate-700 p-5 shadow-sm transition hover:border-slate-300 dark:hover:border-slate-600 hover:shadow-md"
-                  style={{
-                    contentVisibility: 'auto',
-                    containIntrinsicSize: 'auto 200px',
-                  }}
+                  className="queue-card rounded-2xl border border-slate-200 bg-white dark:bg-slate-800 dark:border-slate-700 p-5 shadow-sm transition hover:border-slate-300 dark:hover:border-slate-600 hover:shadow-md"
                 >
                   <div className="flex items-start justify-between gap-2">
                     <h2 className="text-base font-semibold text-slate-900 dark:text-slate-50">{queue.name}</h2>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 847baa2..58b6ce0 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -21,3 +21,12 @@ body {
   margin: 0;
   min-height: 100vh;
 }
+
+/* Rendering optimization for queue cards: content-visibility skips rendering
+ * work for cards scrolled out of view. Kept as a stylesheet class instead of
+ * an inline style attribute so the app stays compatible with the strict CSP
+ * (style-src 'self' — no 'unsafe-inline'). */
+.queue-card {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 200px;
+}