Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-06-06 21:24:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix: fix Turnstile widget not rendering behind Cloudflare Rocket Loader

Browse source 
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.
This commit is contained in:
Sora39831 2026-04-03 02:46:20 +08:00
parent f026afbc17
commit de6131aeac
1 changed files with 12 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
web/html/login.html
View file

@ -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');