fix: make image captcha work with csp (#39555)

fix #39553

templates/user/auth/captcha.tmpl

@@ -1,5 +1,5 @@
 {{if .EnableCaptcha}}{{if eq .CaptchaType "image"}}
-	<div class="inline field tw-text-center">
+	<div class="inline field tw-text-center" data-global-init="initImageCaptcha">
 		{{.Captcha.CreateHTML}}
 	</div>
 	<div class="required field {{if .Err_Captcha}}error{{end}}">

web_src/js/features/captcha.ts

@@ -1,6 +1,19 @@
 import {isDarkTheme} from '../utils.ts';
+import {registerGlobalInitFunc} from '../modules/observer.ts';
 
 export async function initCaptcha() {
+  registerGlobalInitFunc('initImageCaptcha', (el: HTMLElement) => {
+    const a = el.querySelector('a')!;
+    a.removeAttribute('href'); // remove generated href="javascript:"
+    const img = el.querySelector('img')!;
+    img.removeAttribute('onclick'); // remove generated onclick="...." and use our own event listener
+    img.addEventListener('click', () => {
+      const url = new URL(img.src);
+      url.searchParams.set('reload', String(Date.now()));
+      img.src = url.href;
+    });
+  });
+
   const captchaEl = document.querySelector('#captcha');
   if (!captchaEl) return;