React Code Shield: PR Review for React + TypeScript

React Code Shield Report

Verdict: FAIL

Blockers

1. Unsanitized HTML from API data src/components/CommentList.tsx:45 (Certain)

• Issue: comment.body is user-generated content rendered as raw HTML, so a stored script payload would run in every viewer's browser (XSS).
• Fix:

  import DOMPurify from "dompurify";
  <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(comment.body) }} />
  // or, if rich text isn't needed: <div>{comment.body}</div>
  

2. Live secret key hardcoded in client code src/lib/api.ts:2 (Certain)

• Issue: PAYMENTS_SECRET_KEY is bundled into the browser build and sent as a Bearer token (line 12), so anyone can read it from the shipped JS. The literal is labelled "DEMO", but the pattern is the same. If any real key was ever committed, rotate it.
• Fix:

  const BASE_URL = "https://api.example.com";
  
  export async function getOrders(userId: string): Promise<Order[]> {
    // Authenticate via a server-side session or proxy; never ship secrets to the client.
    const res = await fetch(`${BASE_URL}/users/${encodeURIComponent(userId)}/orders`, {
      credentials: "include",
    });
    // ...
  }
  

3. Unvalidated redirect query param used as href src/components/LoginForm.tsx:61 (Certain)

• Issue: redirectUrl comes straight from ?redirect= (line 17). ?redirect=javascript:... runs script when "Skip for now" is clicked, and ?redirect=https://evil.site is an open redirect.
• Fix:

  function safeRedirect(raw: string | null): string {
    if (raw && raw.startsWith("/") && !raw.startsWith("//") && !raw.startsWith("/\\")) {
      return raw;
    }
    return "/dashboard";
  }
  
  const redirectUrl = safeRedirect(params.get("redirect"));
  

4. Effect sets state that is in its own dependency array src/components/Pagination.tsx:13 (Certain)

• Issue: the effect calls setPage (lines 15 and 17) while page is in its deps. In practice setPage(page) is a same-value no-op and won't spin forever, but the pattern is a Blocker. The clamp on line 15 and the redundant line 17 should go. onPageChange in the deps also re-fires the effect every time the parent passes an inline function.
• Fix:

  const [page, setPage] = useState(1);
  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
  const currentPage = Math.min(page, totalPages);
  
  function goTo(next: number) {
    const clamped = Math.min(Math.max(1, next), totalPages);
    setPage(clamped);
    onPageChange(clamped);
  }
  
  // buttons: onClick={() => goTo(currentPage - 1)} / goTo(currentPage + 1)
  // disabled={currentPage <= 1} / disabled={currentPage >= totalPages}
  

Should-fix

1. Index used as key on a re-sortable list src/components/CommentList.tsx:43 (Certain)

• Issue: the list reorders (newest/popular), so index keys cause React to reuse the wrong DOM nodes and state.
• Fix:

  <li key={comment.id} className="comment-item">
  

2. any cast and unchecked response src/lib/api.ts:14 (Certain)

• Issue: getOrders casts the body to any and never checks res.ok, so an error response gives data.orders === undefined typed as Order[]. getOrder (line 23) also returns res.json() without validating its shape.
• Fix:

  if (!res.ok) {
    throw new Error(`Failed to load orders (${res.status})`);
  }
  const data: unknown = await res.json();
  if (typeof data !== "object" || data === null || !Array.isArray((data as { orders?: unknown }).orders)) {
    throw new Error("Malformed orders response");
  }
  return (data as { orders: Order[] }).orders;
  

3. Interval started with no cleanup src/components/LiveTicker.tsx:28 (Certain)

• Issue: setInterval is never cleared. Every symbol or intervalMs change stacks another poller, and unmounting leaves one running. Old-symbol responses can also overwrite the newer quote.
• Fix:

  useEffect(() => {
    let cancelled = false;
    const id = setInterval(() => {
      fetchQuote(symbol)
        .then((q) => {
          if (!cancelled) {
            setQuote(q);
            setUpdates((n) => n + 1);
          }
        })
        .catch(() => {
          if (!cancelled) setQuote(null);
        });
    }, intervalMs);
    return () => {
      cancelled = true;
      clearInterval(id);
    };
  }, [symbol, intervalMs]);
  

4. Stale closure on updates src/components/LiveTicker.tsx:32 (Certain)

• Issue: updates is captured from the first render and is not in the deps, so updates + 1 always evaluates to 1 and the counter gets stuck.
• Fix: use the functional update shown in finding 3 (setUpdates((n) => n + 1)).

5. as Quote hides a type mismatch src/components/LiveTicker.tsx:19 (Likely)

• Issue: the body is cast without checking, and Number(undefined) yields NaN, which renders as "NaN".
• Fix:

  const body: unknown = await res.json();
  if (typeof body !== "object" || body === null) {
    throw new Error("Malformed quote");
  }
  const { price, change } = body as Record<string, unknown>;
  if (typeof price !== "number" || typeof change !== "number") {
    throw new Error("Malformed quote");
  }
  return { price, change };
  

6. No cancel/ignore flag, and loading can stick src/hooks/useUserSearch.ts:29 (Certain)

• Issue: with fast typing, a slower earlier response can overwrite newer results. If the query drops below 2 characters (lines 21-23) while a request is in flight, loading is never reset.
• Fix:

  useEffect(() => {
    if (query.trim().length < 2) {
      setResults([]);
      setLoading(false);
      return;
    }
  
    let ignore = false;
    setLoading(true);
    setError(null);
  
    fetch(`/api/users/search?q=${encodeURIComponent(query)}`)
      .then((res) => {
        if (!res.ok) throw new Error("Search failed");
        return res.json();
      })
      .then((data: UserResult[]) => {
        if (ignore) return;
        setResults(data);
        setLoading(false);
      })
      .catch((err: Error) => {
        if (ignore) return;
        setError(err.message);
        setLoading(false);
      });
  
    return () => {
      ignore = true;
    };
  }, [query]);
  

7. API response typed, not validated src/hooks/useUserSearch.ts:36 (Likely)

• Issue: annotating data: UserResult[] on .then is an unchecked assertion. A non-array body would break consumers.
• Fix:

  .then((data: unknown) => {
    if (!Array.isArray(data)) throw new Error("Malformed search response");
    // optionally validate item shape (e.g. with zod) before setResults(data as UserResult[])
  

8. Auth token stored in localStorage src/components/LoginForm.tsx:35 (Likely)

• Issue: any XSS, such as the dangerouslySetInnerHTML issue above, can read and exfiltrate the token. No reason for this choice is given.
• Fix: have the server set an httpOnly, Secure, SameSite cookie, and use credentials: "include" on the login request instead of storing the token in JS.

9. Unvalidated login response src/components/LoginForm.tsx:34 (Check)

• Issue: as LoginResponse assumes token exists. If the shape differs, undefined is stored and the user is treated as logged in.
• Fix:

  const data: unknown = await res.json();
  if (typeof data !== "object" || data === null || typeof (data as { token?: unknown }).token !== "string") {
    setError("Unexpected server response");
    return;
  }
  

Not assessed: src/styles/theme.css (non-React, ignored). Avatar.tsx, StatusBadge.tsx, and format.ts were reviewed with no findings.