CRITICAL: Claude API key exposed in browser

[CPAtoCybersecurity]

Security Finding

Severity: CRITICAL
Location: src/stores/aiStore.js:112-119
CWE: CWE-312 (Cleartext Storage of Sensitive Information)

Description

The Claude API key is sent directly from the browser to Anthropic's API with anthropic-dangerous-direct-browser-access: true header. This exposes the API key to:

• Browser developer tools
• XSS attacks
• Network inspection
• Browser extensions

Current Code

generateWithClaude: async (prompt, maxTokens = 2500) => {
  const { claudeApiKey } = get();
  const response = await fetch("https://api.anthropic.com/v1/messages", {
    headers: {
      "x-api-key": claudeApiKey,  // Exposed to browser
      "anthropic-dangerous-direct-browser-access": "true"
    }
  });

Recommended Fix

1. Move API calls to a backend proxy endpoint
2. Store API key server-side only (environment variable)
3. Frontend calls your backend, backend calls Anthropic
4. Add authentication between frontend and backend

References

• Arcanum Anti-Patterns: Hardcoded Secrets (Priority Add JSON Export Option Alongside CSV Export #3)
• OWASP: Sensitive Data Exposure

---

Found by Arcanum sec-context security review