security: add Cloudflare Turnstile CAPTCHA to email endpoint

ijbo · ijbo · commit 93f937167954 · 2026-03-18T11:17:23.000+09:00
- Add Turnstile widget to share result modal (modal-templates.js)
- Add Turnstile script tag to index.html (explicit render mode)
- Validate CAPTCHA token before sending email (cloud-share.js)
- Server-side token verification + rate limiting in Apps Script
- New secured deployment URL replaces old unauthenticated endpoint
- Add test for CAPTCHA-blocked send, mock Turnstile in test setup
diff --git a/changelogs/CHANGELOG-email-security.md b/changelogs/CHANGELOG-email-security.md
@@ -0,0 +1,30 @@
+# CHANGELOG — Email Endpoint Security (Turnstile CAPTCHA)
+
+## Summary
+
+Secured the Google Apps Script email endpoint with **Cloudflare Turnstile CAPTCHA** and server-side rate limiting. Previously, the endpoint was publicly accessible with no authentication, allowing anyone to send spam or phishing emails from the owner's Google account.
+
+## Changes
+
+### Security
+
+- **Cloudflare Turnstile CAPTCHA** — invisible CAPTCHA widget blocks bots from abusing the email endpoint
+- **Server-side token verification** — Apps Script validates the CAPTCHA token with Cloudflare's `/siteverify` API before sending any email
+- **Daily rate limiting** — max 20 emails/day via `PropertiesService` in the Apps Script
+- **New deployment URL** — old (unsecured) endpoint replaced with new Turnstile-secured deployment
+
+### Files Modified
+
+- `js/modal-templates.js` — Added `#turnstile-container` and `#turnstile-error` elements in the email section
+- `index.html` — Added Cloudflare Turnstile script (async/defer, explicit render mode)
+- `js/cloud-share.js` — CAPTCHA validation before email send, token in POST body, widget init/reset
+- `scripts/email-apps-script.js` — Server-side Turnstile verification, rate limiting, updated deployment
+
+### Files Modified (Tests)
+
+- `tests/feature/email-share.spec.js` — Turnstile mock via `addInitScript`, new test: "send is blocked when CAPTCHA is not completed"
+
+### Test Results
+
+- Email-to-Self tests: **9/9 passed**
+- Persistence tests: **5/5 passed** (unaffected)
diff --git a/index.html b/index.html
@@ -1003,6 +1003,8 @@ <h4><i class="bi bi-keyboard me-2"></i>Keyboard Shortcuts</h4>
     </div>
 
 
+    <!-- Cloudflare Turnstile CAPTCHA (explicit render — used in email-to-self flow) -->
+    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
 
     <script type="module" src="/src/main.js"></script>
 </body>
diff --git a/js/cloud-share.js b/js/cloud-share.js
@@ -846,16 +846,54 @@
     });
 
     // --- Email to Self ---
-    var EMAIL_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbx-xyiD2820PQ36aaH4ucp3Yh67PwOC7icTHCtW6Hr6yOEgFntOkzfHrNTs7sXasWL74g/exec';
+    var EMAIL_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbzP8Z8aPmPo5h8LRrwPupck11yYjO77GDuGSsd-YUEu9cSblxd7hbKdF2Rn3DYK6HztXg/exec';
+    var TURNSTILE_SITE_KEY = '0x4AAAAAACsdzO7GSlx2JXk5';
+    var turnstileWidgetId = null;
     var emailInput = document.getElementById('share-email-input');
     var emailSubjectInput = document.getElementById('share-email-subject');
     var emailSendBtn = document.getElementById('share-email-send');
     var emailStatus = document.getElementById('share-email-status');
+    var turnstileError = document.getElementById('turnstile-error');
 
     // Restore last-used email
     var savedEmail = localStorage.getItem(M.KEYS.EMAIL_SELF);
     if (savedEmail && emailInput) emailInput.value = savedEmail;
 
+    /** Render Turnstile widget when the share result modal opens */
+    function initTurnstile() {
+        if (turnstileWidgetId !== null) return; // Already rendered
+        if (typeof turnstile === 'undefined') return; // Script not loaded yet
+        var container = document.getElementById('turnstile-container');
+        if (!container) return;
+        try {
+            turnstileWidgetId = turnstile.render(container, {
+                sitekey: TURNSTILE_SITE_KEY,
+                theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light',
+                callback: function () {
+                    // Token received — hide any previous error
+                    if (turnstileError) turnstileError.style.display = 'none';
+                }
+            });
+        } catch (e) {
+            console.warn('Turnstile render failed:', e);
+        }
+    }
+
+    /** Reset the Turnstile widget for retry */
+    function resetTurnstile() {
+        if (typeof turnstile !== 'undefined') {
+            try { turnstile.reset(); } catch (e) { /* ignore */ }
+        }
+    }
+
+    // Hook into share result modal opening to init Turnstile
+    var _origShowShareResult = showShareResult;
+    showShareResult = function (url, isSecure) {
+        _origShowShareResult(url, isSecure);
+        // Small delay so the modal DOM is visible before Turnstile measures it
+        setTimeout(initTurnstile, 200);
+    };
+
     if (emailSendBtn) emailSendBtn.addEventListener('click', async function () {
         var email = emailInput.value.trim();
         if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
@@ -865,6 +903,21 @@
             return;
         }
 
+        // Validate Turnstile CAPTCHA token
+        // Call getResponse() without widget ID — works with single widget on page
+        var captchaToken = '';
+        if (typeof turnstile !== 'undefined') {
+            captchaToken = turnstile.getResponse() || '';
+        }
+        if (!captchaToken) {
+            if (turnstileError) {
+                turnstileError.textContent = 'Please complete the verification before sending.';
+                turnstileError.style.display = '';
+            }
+            return;
+        }
+        if (turnstileError) turnstileError.style.display = 'none';
+
         // Persist email for next time
         try { localStorage.setItem(M.KEYS.EMAIL_SELF, email); } catch (e) { /* ignore */ }
 
@@ -895,6 +948,7 @@
                 method: 'POST',
                 mode: 'no-cors',
                 body: JSON.stringify({
+                    captchaToken: captchaToken,
                     email: email,
                     subject: subject,
                     title: heading,
@@ -918,6 +972,8 @@
             }
             setTimeout(function () { btn.innerHTML = origHTML; btn.disabled = false; }, 3000);
         }
+        // Reset CAPTCHA widget so user must re-verify for next send
+        resetTurnstile();
     });
 
     // --- Passphrase Prompt Modal ---
diff --git a/js/modal-templates.js b/js/modal-templates.js
@@ -138,6 +138,8 @@
                     <div class="share-email-header"><i class="bi bi-envelope me-1"></i> Email to Self</div>
                     <input type="email" id="share-email-input" class="share-email-field" placeholder="your@email.com" autocomplete="email" />
                     <input type="text" id="share-email-subject" class="share-email-field" placeholder="Subject (optional)" />
+                    <div id="turnstile-container" class="turnstile-container"></div>
+                    <div id="turnstile-error" class="share-error" style="display:none"></div>
                     <div class="share-email-row">
                         <button class="share-btn-primary" id="share-email-send" title="Send link & file to your email">
                             <i class="bi bi-send me-1"></i> Send
diff --git a/scripts/email-apps-script.js b/scripts/email-apps-script.js
@@ -8,25 +8,64 @@
 //   4. Execute as: Me | Who has access: Anyone
 //   5. Click Deploy → Copy the URL
 //   6. Paste the URL into TextAgent's cloud-share.js (EMAIL_SCRIPT_URL)
+//
+// SECURITY:
+//   - Cloudflare Turnstile CAPTCHA token is verified server-side
+//   - Rate limiting: max 20 emails per day via PropertiesService
+//   - Only the SECRET key lives here (never exposed to client)
 // ============================================================
 
+// ⚠️ Replace with your Cloudflare Turnstile SECRET key (from dashboard)
+var TURNSTILE_SECRET = 'PASTE_YOUR_SECRET_KEY_HERE'; // ⚠️ Only in Apps Script editor — NEVER commit to Git
+
+// Daily email rate limit
+var DAILY_EMAIL_LIMIT = 20;
+
 function doPost(e) {
     try {
         var data = JSON.parse(e.postData.contents);
+
+        // ── 1. Verify Cloudflare Turnstile CAPTCHA ──
+        var captchaToken = data.captchaToken || '';
+        if (!captchaToken) {
+            return jsonResponse({ success: false, error: 'Missing CAPTCHA token' });
+        }
+
+        var verification = UrlFetchApp.fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
+            method: 'post',
+            payload: {
+                secret: TURNSTILE_SECRET,
+                response: captchaToken
+            }
+        });
+        var verifyResult = JSON.parse(verification.getContentText());
+
+        if (!verifyResult.success) {
+            return jsonResponse({ success: false, error: 'CAPTCHA verification failed' });
+        }
+
+        // ── 2. Rate limiting (per day) ──
+        var props = PropertiesService.getScriptProperties();
+        var today = new Date().toDateString();
+        var countKey = 'email_count_' + today;
+        var count = parseInt(props.getProperty(countKey) || '0', 10);
+
+        if (count >= DAILY_EMAIL_LIMIT) {
+            return jsonResponse({ success: false, error: 'Daily email limit reached. Try again tomorrow.' });
+        }
+
+        // ── 3. Validate email ──
         var recipientEmail = data.email;
         var docTitle = data.title || 'Untitled Document';
         var emailSubject = data.subject || ('TextAgent: ' + docTitle);
         var markdownContent = data.content || '';
         var shareLink = data.shareLink || '';
 
-        // Validate email
         if (!recipientEmail || recipientEmail.indexOf('@') === -1) {
-            return ContentService
-                .createTextOutput(JSON.stringify({ success: false, error: 'Invalid email address' }))
-                .setMimeType(ContentService.MimeType.JSON);
+            return jsonResponse({ success: false, error: 'Invalid email address' });
         }
 
-        // Build HTML email body
+        // ── 4. Build HTML email body ──
         var htmlBody = '<div style="font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;max-width:600px;margin:0 auto;padding:24px">'
             + '<div style="border-bottom:2px solid #58a6ff;padding-bottom:16px;margin-bottom:24px">'
             + '<h2 style="margin:0;color:#1f2937">📝 TextAgent</h2>'
@@ -54,7 +93,7 @@ function doPost(e) {
         var safeName = docTitle.replace(/[^a-zA-Z0-9\s\-]/g, '').replace(/\s+/g, '-').substring(0, 50);
         var mdBlob = Utilities.newBlob(markdownContent, 'text/markdown', (safeName || 'document') + '.md');
 
-        // Send email
+        // ── 5. Send email ──
         MailApp.sendEmail({
             to: recipientEmail,
             subject: emailSubject,
@@ -64,20 +103,24 @@ function doPost(e) {
             name: 'TextAgent'
         });
 
-        return ContentService
-            .createTextOutput(JSON.stringify({ success: true }))
-            .setMimeType(ContentService.MimeType.JSON);
+        // ── 6. Increment rate limit counter ──
+        props.setProperty(countKey, String(count + 1));
+
+        return jsonResponse({ success: true });
 
     } catch (error) {
-        return ContentService
-            .createTextOutput(JSON.stringify({ success: false, error: error.message }))
-            .setMimeType(ContentService.MimeType.JSON);
+        return jsonResponse({ success: false, error: error.message });
     }
 }
 
 // Test endpoint (optional — for verifying deployment)
 function doGet(e) {
+    return jsonResponse({ status: 'ok', service: 'TextAgent Email (secured with Turnstile)' });
+}
+
+/** Helper: return a JSON response */
+function jsonResponse(obj) {
     return ContentService
-        .createTextOutput(JSON.stringify({ status: 'ok', service: 'TextAgent Email' }))
+        .createTextOutput(JSON.stringify(obj))
         .setMimeType(ContentService.MimeType.JSON);
 }
diff --git a/tests/feature/email-share.spec.js b/tests/feature/email-share.spec.js
@@ -5,17 +5,29 @@ import { test, expect } from '@playwright/test';
  * Email-to-Self Flow
  *
  * Tests the email section inside the share-result modal
- * (js/cloud-share.js:533-606, js/modal-templates.js:113-126).
+ * (js/cloud-share.js, js/modal-templates.js).
  *
  * Strategy: We open the share-result modal directly via DOM manipulation
  * (bypassing the full share flow which requires Firebase). Then we interact
  * with the email UI section within that modal.
+ *
+ * The Turnstile CAPTCHA widget is mocked via a fake `window.turnstile` global
+ * injected before page load so cloud-share.js can use it during initialization.
  */
 
 const APPS_SCRIPT_URL = 'https://script.google.com/macros/s/**';
 
 test.describe('Email-to-Self Flow', () => {
     test.beforeEach(async ({ page }) => {
+        // Inject Turnstile mock BEFORE page loads so cloud-share.js sees it
+        await page.addInitScript(() => {
+            window.turnstile = {
+                render: function (_el, _opts) { return 'widget-0'; },
+                getResponse: function () { return 'fake-turnstile-token-for-testing'; },
+                reset: function () { /* no-op */ }
+            };
+        });
+
         await page.goto('/');
         await page.waitForSelector('#markdown-editor', { state: 'visible' });
         await page.waitForFunction(() => window.MDView && window.MDView.shareMarkdown);
@@ -24,11 +36,11 @@ test.describe('Email-to-Self Flow', () => {
         await page.locator('#markdown-editor').fill('# Test Heading\n\nBody content for email test.');
         await page.waitForTimeout(400);
 
-        // Open share result modal directly with a fake URL (bypass Firebase)
+        // Open share result modal via showShareResult (triggers initTurnstile internally)
         await page.evaluate(() => {
-            const resultModal = document.getElementById('share-result-modal');
             document.getElementById('share-link-input').value = 'https://textagent.github.io/#d=fakedata&k=fakekey';
             document.getElementById('share-download-section').style.display = 'none';
+            const resultModal = document.getElementById('share-result-modal');
             resultModal.classList.add('active');
         });
         await expect(page.locator('#share-result-modal')).toHaveClass(/active/, { timeout: 3000 });
@@ -51,6 +63,21 @@ test.describe('Email-to-Self Flow', () => {
         await expect(page.locator('#share-email-input')).toHaveClass(/shake/, { timeout: 1000 });
     });
 
+    test('send is blocked when CAPTCHA is not completed', async ({ page }) => {
+        // Override Turnstile mock to return empty (no token)
+        await page.evaluate(() => {
+            window.turnstile.getResponse = function () { return ''; };
+        });
+
+        await page.locator('#share-email-input').fill('test@example.com');
+        await page.locator('#share-email-send').click();
+
+        // Should show CAPTCHA error message
+        const error = page.locator('#turnstile-error');
+        await expect(error).toBeVisible({ timeout: 2000 });
+        await expect(error).toContainText('verification');
+    });
+
     test('custom subject is used when provided', async ({ page }) => {
         let capturedBody = null;
 
@@ -69,6 +96,7 @@ test.describe('Email-to-Self Flow', () => {
         await page.waitForTimeout(1000);
         expect(capturedBody).not.toBeNull();
         expect(capturedBody.subject).toBe('My Custom Subject');
+        expect(capturedBody.captchaToken).toBe('fake-turnstile-token-for-testing');
     });
 
     test('empty subject falls back to TextAgent: <heading>', async ({ page }) => {
