加入turnstile

Author: alvin000009238

.env.example

@@ -1,2 +1,4 @@
 TUNNEL_TOKEN=
 SECRET_KEY=your_random_secret_string_here
+TURNSTILE_SITE_KEY=your_site_key_here
+TURNSTILE_SECRET_KEY=your_secret_key_here

grades_dashboard.js

@@ -6,6 +6,20 @@
 let radarChartInstance = null;
 let barChartInstance = null;
 
+// HTML 跳脫輔助函數，防範 XSS
+function escapeHTML(str) {
+    if (str === null || str === undefined) return '';
+    const text = String(str);
+    const map = {
+        '&': '&',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;'
+    };
+    return text.replace(/[&<>"']/g, function (m) { return map[m]; });
+}
+
 document.addEventListener('DOMContentLoaded', () => {
     loadGradesData();
     setupFileImport();
@@ -377,13 +391,13 @@ function generateScoreCards(subjects) {
         card.className = 'score-card';
         card.innerHTML = `
             <div class="score-header">
-                <span class="subject-name">${subject.SubjectName}</span>
-                <span class="score-badge ${scoreClass}">${subject.ScoreDisplay ?? scoreValue}</span>
+                <span class="subject-name">${escapeHTML(subject.SubjectName)}</span>
+                <span class="score-badge ${scoreClass}">${escapeHTML(subject.ScoreDisplay ?? scoreValue)}</span>
             </div>
             <div class="score-details">
                 <div class="score-row">
                     <span class="score-label">班級平均</span>
-                    <span class="score-value">${subject.ClassAVGScoreDisplay ?? classAvgValue.toFixed(2)}</span>
+                    <span class="score-value">${escapeHTML(subject.ClassAVGScoreDisplay ?? classAvgValue.toFixed(2))}</span>
                 </div>
                 <div class="score-row">
                     <span class="score-label">與班平均差距</span>
@@ -626,7 +640,7 @@ function generateStandardsTable(subjects, standards) {
 
         const row = document.createElement('tr');
         row.innerHTML = `
-            <td>${shortenName(subject.SubjectName)}</td>
+            <td>${escapeHTML(shortenName(subject.SubjectName))}</td>
             <td class="top-mark">${std["頂標"].toFixed(2)}</td>
             <td class="front-mark">${std["前標"].toFixed(2)}</td>
             <td class="avg-mark">${std["均標"].toFixed(2)}</td>
@@ -682,7 +696,7 @@ function generateDistributionCards(subjects, standards) {
         const card = document.createElement('div');
         card.className = 'distribution-card';
         card.innerHTML = `
-            <h4>${subject.SubjectName}</h4>
+            <h4>${escapeHTML(subject.SubjectName)}</h4>
             <div class="distribution-bars">
                 ${ranges.map(r => {
             const percentage = r.count === 0 ? 0 : (r.count / total) * 100;
@@ -838,12 +852,18 @@ function setupSyncFeature() {
     const handleLogin = async () => {
         const username = usernameInput.value.trim();
         const password = passwordInput.value.trim();
+        const turnstileResponse = typeof turnstile !== 'undefined' ? turnstile.getResponse() : null;
 
         if (!username || !password) {
             showStatus(loginStatus, '請輸入帳號密碼', 'error');
             return;
         }
 
+        if (!turnstileResponse) {
+            showStatus(loginStatus, '請完成驗證', 'error');
+            return;
+        }
+
         showStatus(loginStatus, '載入中...', 'normal');
         confirmLogin.disabled = true;
 
@@ -852,7 +872,7 @@ function setupSyncFeature() {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 credentials: 'include',
-                body: JSON.stringify({ username, password })
+                body: JSON.stringify({ username, password, turnstile_response: turnstileResponse })
             });
             const data = await res.json();
 
@@ -866,9 +886,11 @@ function setupSyncFeature() {
                 }, 500);
             } else {
                 showStatus(loginStatus, data.message || '登入失敗', 'error');
+                if (typeof turnstile !== 'undefined') turnstile.reset();
             }
         } catch (error) {
             showStatus(loginStatus, '連線錯誤: ' + error.message, 'error');
+            if (typeof turnstile !== 'undefined') turnstile.reset();
         } finally {
             confirmLogin.disabled = false;
         }

index.html

@@ -5,13 +5,16 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>成績分析平台 - 中大壢中</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link
         href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&display=swap"
         rel="stylesheet">
     <link
         href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
         rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
     <link rel="stylesheet" href="/grades_dashboard.css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
@@ -158,6 +161,9 @@ <h3>登入系統</h3>
                             </button>
                         </div>
                     </div>
+                    <div class="form-group" style="display: flex; justify-content: center; margin-top: 15px;">
+                        <div class="cf-turnstile" data-sitekey="0x4AAAAAAChO97Yocoqp2iiB"></div>
+                    </div>
                     <div id="loginStatus" class="status-msg"></div>
                 </div>
                 <div class="modal-footer">

server.py

@@ -10,6 +10,7 @@
 import threading
 import secrets
 import string
+import requests
 
 SHARED_FOLDER = 'shared_grades'
 CLEANUP_INTERVAL = 600  # 10 minutes
@@ -119,6 +120,27 @@ def login():
     if not username or not data.get('password'):
         return jsonify({'success': False, 'message': '請輸入帳號密碼'}), 400
 
+    turnstile_response = data.get('turnstile_response')
+    secret_key = os.environ.get('TURNSTILE_SECRET_KEY', '1x0000000000000000000000000000000AA')
+    
+    if not turnstile_response:
+        return jsonify({'success': False, 'message': '請完成驗證'}), 400
+        
+    try:
+        cf_url = 'https://challenges.cloudflare.com/turnstile/v0/siteverify'
+        cf_data = {
+            'secret': secret_key,
+            'response': turnstile_response
+        }
+        cf_res = requests.post(cf_url, data=cf_data, timeout=10)
+        cf_json = cf_res.json()
+        if not cf_json.get('success'):
+            logger.warning(f"Turnstile verification failed for user {username}: {cf_json}")
+            return jsonify({'success': False, 'message': '驗證失敗，請重試'}), 400
+    except Exception as e:
+        logger.error(f"Turnstile API error: {e}")
+        return jsonify({'success': False, 'message': '驗證連線失敗，請稍後再試'}), 500
+
     try:
         success, message, cookies, student_no, token = GradeFetcher.login_and_get_tokens(username, data.get('password'))