Fix CSP-blocked inline onclick handlers

- Remove onclick from API key recovery modal Copy button (templates/pages/index.html)
- Event listener already exists in app.js (line 295)
- Remove onclick from server-rendered API key display (src/index.ts line 207)
- Remove onclick from billing success page Copy button (src/routes/billing.ts line 181)
- Create public/copy-helper.js to handle all [data-copy] elements via external JS
- All copy functionality now CSP-compliant (script-src 'self')

public/copy-helper.js

@@ -0,0 +1,38 @@
+// Copy helper for server-rendered pages
+// Attaches click handlers to all [data-copy] elements (CSP-compliant)
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Handle buttons with data-copy attribute
+  document.querySelectorAll('button[data-copy]').forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      const textToCopy = this.getAttribute('data-copy');
+      const originalText = this.textContent;
+      
+      navigator.clipboard.writeText(textToCopy).then(function() {
+        btn.textContent = 'Copied!';
+        setTimeout(function() {
+          btn.textContent = originalText;
+        }, 1500);
+      }).catch(function(err) {
+        console.error('Copy failed:', err);
+      });
+    });
+  });
+  
+  // Handle clickable divs with data-copy attribute (for key-box)
+  document.querySelectorAll('div[data-copy]').forEach(function(div) {
+    div.style.cursor = 'pointer';
+    div.addEventListener('click', function() {
+      const textToCopy = this.getAttribute('data-copy');
+      
+      navigator.clipboard.writeText(textToCopy).then(function() {
+        div.style.borderColor = '#5eead4';
+        setTimeout(function() {
+          div.style.borderColor = '#34d399';
+        }, 1500);
+      }).catch(function(err) {
+        console.error('Copy failed:', err);
+      });
+    });
+  });
+});

public/index.html

@@ -57,10 +57,10 @@
     },
     {
       "@type": "Question",
-      "name": "Do you have official SDKs?",
+      "name": "Do you have SDKs for Node.js and Python?",
       "acceptedAnswer": {
         "@type": "Answer",
-        "text": "Yes, DocFast provides official SDKs for Node.js, Python, Go, PHP, and Laravel. You can also use the REST API directly with curl or any HTTP client."
+        "text": "Yes, DocFast provides official SDKs for both Node.js and Python. You can also use the REST API directly with curl or any HTTP client in your preferred language."
       }
     }
   ]
@@ -450,7 +450,7 @@ html, body {
 <section class="features" id="features">
   <div class="container">
     <h2 class="section-title">Everything you need</h2>
-    <p class="section-sub">Official SDKs for Node.js, Python, Go, PHP, and Laravel. Or just use curl.</p>
+    <p class="section-sub">Official SDKs for Node.js and Python. Or just use curl.</p>
     <div class="features-grid">
       <div class="feature-card">
         <div class="feature-icon" aria-hidden="true">⚡</div>
@@ -627,7 +627,7 @@ html, body {
       </div>
       <div style="background:var(--bg);border:1px solid var(--accent);border-radius:8px;padding:14px;font-family:monospace;font-size:0.82rem;word-break:break-all;margin:16px 0;position:relative;">
         <span id="recoveredKeyText"></span>
-        <button onclick="copyRecoveredKey()" id="copyRecoveredBtn" style="position:absolute;top:8px;right:8px;background:var(--accent);color:var(--bg);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;font-size:0.8rem;">Copy</button>
+        <button id="copyRecoveredBtn" style="position:absolute;top:8px;right:8px;background:var(--accent);color:var(--bg);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;font-size:0.8rem;">Copy</button>
       </div>
       <p style="margin-top:20px;color:var(--muted);font-size:0.9rem;"><a href="/docs">Read the docs →</a></p>
     </div>

src/index.ts

@@ -204,10 +204,12 @@ p{color:#7a8194;margin-bottom:24px;line-height:1.6}
 <p>${message}</p>
 ${apiKey ? `
 <div class="warning">⚠️ Save your API key securely. You can recover it via email if needed.</div>
-<div class="key-box" onclick="navigator.clipboard.writeText('${apiKey}');this.style.borderColor='#5eead4';setTimeout(()=>this.style.borderColor='#34d399',1500)">${apiKey}</div>
+<div class="key-box" data-copy="${apiKey}">${apiKey}</div>
 <div class="links">Upgrade to Pro for 5,000 PDFs/month · <a href="/docs">Read the docs →</a></div>
 ` : `<div class="links"><a href="/">← Back to DocFast</a></div>`}
-</div></body></html>`;
+</div>
+<script src="/copy-helper.js"></script>
+</body></html>`;
 }
 
 // Landing page

src/routes/billing.ts

@@ -178,11 +178,13 @@ a { color: #4f9; }
 <div class="card">
 <h1>🎉 Welcome to Pro!</h1>
 <p>Your API key:</p>
-<div class="key" style="position:relative" data-key="${escapeHtml(keyInfo.key)}">${escapeHtml(keyInfo.key)}<button onclick="navigator.clipboard.writeText(this.parentElement.dataset.key);this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',1500)" style="position:absolute;top:8px;right:8px;background:#4f9;color:#0a0a0a;border:none;border-radius:4px;padding:4px 12px;cursor:pointer;font-size:0.8rem;font-family:system-ui">Copy</button></div>
+<div class="key" style="position:relative">${escapeHtml(keyInfo.key)}<button data-copy="${escapeHtml(keyInfo.key)}" style="position:absolute;top:8px;right:8px;background:#4f9;color:#0a0a0a;border:none;border-radius:4px;padding:4px 12px;cursor:pointer;font-size:0.8rem;font-family:system-ui">Copy</button></div>
 <p><strong>Save this key!</strong> It won't be shown again.</p>
 <p>5,000 PDFs/month • All endpoints • Priority support</p>
 <p><a href="/docs">View API docs →</a></p>
-</div></body></html>`);
+</div>
+<script src="/copy-helper.js"></script>
+</body></html>`);
   } catch (err: any) {
     logger.error({ err }, "Success page error");
     res.status(500).json({ error: "Failed to retrieve session" });

templates/pages/index.html

@@ -614,7 +614,7 @@ html, body {
       </div>
       <div style="background:var(--bg);border:1px solid var(--accent);border-radius:8px;padding:14px;font-family:monospace;font-size:0.82rem;word-break:break-all;margin:16px 0;position:relative;">
         <span id="recoveredKeyText"></span>
-        <button onclick="copyRecoveredKey()" id="copyRecoveredBtn" style="position:absolute;top:8px;right:8px;background:var(--accent);color:var(--bg);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;font-size:0.8rem;">Copy</button>
+        <button id="copyRecoveredBtn" style="position:absolute;top:8px;right:8px;background:var(--accent);color:var(--bg);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;font-size:0.8rem;">Copy</button>
       </div>
       <p style="margin-top:20px;color:var(--muted);font-size:0.9rem;"><a href="/docs">Read the docs →</a></p>
     </div>