From de6131aeac72a518a2ec67375a4bfe7ee6614a41 Mon Sep 17 00:00:00 2001
From: Sora39831 <540587985@qq.com>
Date: Fri, 3 Apr 2026 02:46:20 +0800
Subject: [PATCH] fix: fix Turnstile widget not rendering behind Cloudflare
 Rocket Loader

Load Turnstile api.js statically in <head> with data-cfasync="false"
to bypass Rocket Loader interference. Use turnstile.render() API to
manually render widget after site key is fetched, instead of relying
on dynamic script loading and Vue data-bind attributes.
---
 web/html/login.html | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)
diff --git a/web/html/login.html b/web/html/login.html
index ce99b116..2c6e3b4c 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -1,4 +1,5 @@
 {{ template "page/head_start" .}}
+<script data-cfasync="false" src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
 {{ template "page/head_end" .}}
 
 {{ template "page/body_start" .}}
@@ -118,7 +119,7 @@
                         </a-form-item>
                         <a-form-item>
                           <div class="cf-turnstile-wrapper">
-                            <div class="cf-turnstile" :data-sitekey="turnstileSiteKey" data-callback="onTurnstileCallback" :data-size="turnstileSize"></div>
+                            <div class="cf-turnstile" id="turnstile-widget"></div>
                           </div>
                         </a-form-item>
                         <a-form-item>
@@ -149,10 +150,6 @@
 <script>
   var turnstileToken = '';
 
-  function onTurnstileCallback(token) {
-    turnstileToken = token;
-  }
-
   const app = new Vue({
     delimiters: ['[[', ']]'],
     el: '#app',
@@ -172,7 +169,7 @@
       this.twoFactorEnable = await this.getTwoFactorEnable();
       this.turnstileSiteKey = await this.getTurnstileSiteKey();
       if (this.turnstileSiteKey) {
-        this.loadTurnstileScript();
+        this.renderTurnstile();
       }
     },
     computed: {
@@ -214,17 +211,19 @@
           this.regUser = { username: "", password: "", confirmPassword: "" };
           turnstileToken = '';
           if (window.turnstile) {
-            turnstile.reset('.cf-turnstile');
+            turnstile.reset('#turnstile-widget');
           }
         }
         this.loadingStates.registerSpinning = false;
       },
-      loadTurnstileScript() {
-        const script = document.createElement('script');
-        script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
-        script.async = true;
-        script.defer = true;
-        document.head.appendChild(script);
+      renderTurnstile() {
+        if (window.turnstile) {
+          turnstile.render('#turnstile-widget', {
+            sitekey: this.turnstileSiteKey,
+            callback: function(token) { turnstileToken = token; },
+            size: this.turnstileSize,
+          });
+        }
       },
       async getTurnstileSiteKey() {
         const msg = await HttpUtil.post('/getTurnstileSiteKey');
