Merge pull request #57 from drips-stellar/fix/issue-13-harden-api-key-handling

Flamki · web-flow · commit 12eadff4f441 · 2026-05-29T16:09:16.000+05:30
fix(security): harden API key handling with security warning and ephemeral storage
diff --git a/public/index.html b/public/index.html
@@ -615,6 +615,25 @@
       .main { height: auto; overflow: visible; }
       .g3, .g4 { grid-template-columns: 1fr 1fr; }
     }
+
+    /* ═══ SECURITY MODAL ═══ */
+    #security-modal {
+      animation: fadeIn 0.2s ease-out;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+
+    #security-modal > div {
+      animation: slideUp 0.3s ease-out;
+    }
+
+    @keyframes slideUp {
+      from { transform: translateY(20px); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    }
   </style>
 </head>
 <body>
@@ -756,14 +775,15 @@ <h1>StellarMind</h1>
           <div class="card-h"><h2>🧠 Claude AI Configuration</h2><span class="tag" id="key-status-tag">Checking...</span></div>
           <div class="card-b">
             <div id="api-key-config">
-              <p class="lbl" style="margin-bottom:10px;">Configure your Anthropic API key to enable real AI responses (starts with sk-ant-). If not set, the system uses high-quality fallback agents.</p>
+              <p class="lbl" style="margin-bottom:10px;color:var(--text-secondary);">Configure your Anthropic API key to enable real AI responses (starts with sk-ant-). Your key is stored in server memory only and never persisted.</p>
               <div class="task-row">
                 <div class="task-input-w">
                   <input type="password" id="api-key-input" class="task-input" placeholder="sk-ant-..." />
                 </div>
-                <button class="btn" onclick="saveApiKey()" id="btn-save-key">Update Key</button>
+                <button class="btn" onclick="showSecurityWarning()" id="btn-save-key">Update Key</button>
               </div>
               <p class="sc-sub" id="key-hint" style="margin-top:10px;">Current: Loading...</p>
+              <p class="sc-sub" style="margin-top:8px;color:var(--text-muted);font-size:10px;">💡 Tip: Your key is ephemeral and cleared when the server restarts. For production, use environment variables.</p>
             </div>
           </div>
         </div>
@@ -778,6 +798,34 @@ <h1>StellarMind</h1>
         </div>
       </div>
 
+      <!-- ═══ SECURITY WARNING MODAL ═══ -->
+      <div id="security-modal" role="dialog" aria-modal="true" aria-labelledby="security-modal-title" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:100;align-items:center;justify-content:center;">
+        <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,0.5);">
+          <h3 id="security-modal-title" style="font-size:16px;font-weight:700;margin-bottom:12px;color:var(--red);">🔐 API Key Security Warning</h3>
+          <div style="font-size:12px;color:var(--text-secondary);line-height:1.7;margin-bottom:16px;">
+            <p style="margin-bottom:10px;"><strong>Your API key will be:</strong></p>
+            <ul style="margin-left:16px;margin-bottom:10px;">
+              <li>✓ Sent over HTTPS only</li>
+              <li>✓ Stored in server memory (session-only)</li>
+              <li>✓ Never persisted to disk or logs</li>
+              <li>✓ Cleared when server restarts</li>
+            </ul>
+            <p style="margin-bottom:10px;"><strong>Your API key will NOT be:</strong></p>
+            <ul style="margin-left:16px;margin-bottom:10px;">
+              <li>✗ Stored in browser storage (localStorage/sessionStorage)</li>
+              <li>✗ Sent to third parties</li>
+              <li>✗ Logged or exposed in error messages</li>
+              <li>✗ Persisted across server restarts</li>
+            </ul>
+            <p style="margin-top:10px;color:var(--amber);"><strong>⚠️ Only submit your key if you trust this server.</strong></p>
+          </div>
+          <div style="display:flex;gap:10px;justify-content:flex-end;">
+            <button class="btn" style="background:var(--bg-input);color:var(--text-primary);padding:9px 16px;font-size:11px;" onclick="closeSecurityModal()">Cancel</button>
+            <button class="btn" style="padding:9px 16px;font-size:11px;" onclick="confirmApiKeySubmission()">I Understand, Submit Key</button>
+          </div>
+        </div>
+      </div>
+
       <!-- ═══ PAGE: TRANSACTIONS ═══ -->
       <div class="page" id="page-transactions">
         <div class="card">
@@ -1256,6 +1304,72 @@ <h1>StellarMind</h1>
 
     document.getElementById('task-input').addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); runOrchestration(); }});
 
+    // ─── Security Modal Functions ───
+    function showSecurityWarning() {
+      const key = document.getElementById('api-key-input').value.trim();
+      if (!key) {
+        alert('Please enter an API key first');
+        return;
+      }
+      if (!key.startsWith('sk-ant-')) {
+        alert('Please enter a valid Anthropic API key starting with sk-ant-');
+        return;
+      }
+      const modal = document.getElementById('security-modal');
+      modal.style.display = 'flex';
+
+      // Escape key handler — stored on modal so closeSecurityModal can remove it
+      modal._escHandler = function(e) {
+        if (e.key === 'Escape') closeSecurityModal();
+      };
+      document.addEventListener('keydown', modal._escHandler);
+
+      // Focus trap: collect focusable elements inside the modal
+      modal._trapHandler = function(e) {
+        if (e.key !== 'Tab') return;
+        const focusable = Array.from(modal.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        )).filter(el => !el.disabled);
+        if (!focusable.length) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey) {
+          if (document.activeElement === first) { e.preventDefault(); last.focus(); }
+        } else {
+          if (document.activeElement === last) { e.preventDefault(); first.focus(); }
+        }
+      };
+      document.addEventListener('keydown', modal._trapHandler);
+
+      // Focus the Cancel button (first actionable control)
+      const cancelBtn = modal.querySelector('button');
+      if (cancelBtn) cancelBtn.focus();
+    }
+
+    function closeSecurityModal() {
+      const modal = document.getElementById('security-modal');
+      modal.style.display = 'none';
+
+      // Remove Escape and focus-trap handlers
+      if (modal._escHandler) {
+        document.removeEventListener('keydown', modal._escHandler);
+        modal._escHandler = null;
+      }
+      if (modal._trapHandler) {
+        document.removeEventListener('keydown', modal._trapHandler);
+        modal._trapHandler = null;
+      }
+
+      // Return focus to the API key input
+      const input = document.getElementById('api-key-input');
+      if (input) input.focus();
+    }
+
+    function confirmApiKeySubmission() {
+      closeSecurityModal();
+      saveApiKey();
+    }
+
     async function saveApiKey() {
       const key = document.getElementById('api-key-input').value.trim();
       const btn = document.getElementById('btn-save-key');
@@ -1273,7 +1387,7 @@ <h1>StellarMind</h1>
         });
         const d = await res.json();
         if (d.success) {
-          alert('API Key updated successfully! Agents will now use your key.');
+          alert('✅ API Key updated successfully! Agents will now use your key.\n\n⚠️ Remember: Your key is stored in server memory only and will be cleared when the server restarts.');
           document.getElementById('api-key-input').value = '';
           loadStatusPage();
         } else {
diff --git a/src/agents/services.js b/src/agents/services.js
@@ -24,12 +24,14 @@ export const MODEL_LABELS = {
 /**
  * Update the Anthropic API key at runtime.
  * Allows users to plug in their own key without restarting the server.
+ * Security: Key is stored in memory only, never logged or persisted.
  */
 export function setApiKey(newKey) {
   anthropic = new Anthropic({ apiKey: newKey });
   config.anthropicApiKey = newKey;
   claudeAvailable = true;
-  console.log('  🔑 Anthropic API key updated at runtime');
+  // Security: Never log the actual key, only confirm it was set
+  console.log('  🔑 Anthropic API key updated at runtime (ephemeral, session-only)');
 }
 
 /**
diff --git a/src/server.js b/src/server.js
@@ -323,6 +323,8 @@ app.post('/api/config/apikey', (req, res, next) => {
     err.code = 'INVALID_API_KEY';
     return next(err);
   }
+  // Security: Log only that a key was updated, never log the key itself
+  console.log('  🔑 API key updated (ephemeral, session-only)');
   setApiKey(apiKey);
   res.json({ success: true, masked: `sk-ant-...${apiKey.slice(-6)}` });
 });

Original file line number	Diff line number	Diff line change
`@@ -323,6 +323,8 @@ app.post('/api/config/apikey', (req, res, next) => {`
`323`	`323`	`err.code = 'INVALID_API_KEY';`
`324`	`324`	`return next(err);`
`325`	`325`	`}`
	`326`	`+ // Security: Log only that a key was updated, never log the key itself`
	`327`	`+ console.log(' 🔑 API key updated (ephemeral, session-only)');`
`326`	`328`	`setApiKey(apiKey);`
`327`	`329`	res.json({ success: true, masked: `sk-ant-...${apiKey.slice(-6)}` });
`328`	`330`	`});`