@swetrix/captcha 1.0.3 → 2.0.1

package/src/captcha.ts

@@ -1,25 +1,26 @@
+export {}
+
 // @ts-ignore
 const isDevelopment = window.__SWETRIX_CAPTCHA_DEV || false
 
 const API_URL = isDevelopment ? 'http://localhost:5005/v1/captcha' : 'https://api.swetrix.com/v1/captcha'
+const WORKER_URL = isDevelopment ? './pow-worker.js' : 'https://cap.swetrix.com/pow-worker.js'
 const MSG_IDENTIFIER = 'swetrix-captcha'
-const DEFAULT_THEME = 'light'
 const CAPTCHA_TOKEN_LIFETIME = 300 // seconds (5 minutes).
-let TOKEN = ''
-let HASH = ''
+
+// Main-thread fallback limits (same as worker)
+const MAX_ITERATIONS = 100_000_000 // 100 million attempts
+const TIMEOUT_MS = 5 * 60 * 1000 // 5 minutes
 
 const ENDPOINTS = {
-  VERIFY: '/verify',
   GENERATE: '/generate',
-  VERIFY_MANUAL: '/verify-manual',
+  VERIFY: '/verify',
 }
 
 enum IFRAME_MESSAGE_TYPES {
   SUCCESS = 'success',
   FAILURE = 'failure',
   TOKEN_EXPIRED = 'tokenExpired',
-  MANUAL_STARTED = 'manualStarted',
-  MANUAL_FINISHED = 'manualFinished',
 }
 
 enum ACTION {
@@ -29,20 +30,41 @@ enum ACTION {
   loading = 'loading',
 }
 
+interface PowChallenge {
+  challenge: string
+  difficulty: number
+}
+
+interface PowResult {
+  type: 'result'
+  nonce: number
+  solution: string
+}
+
+interface PowProgress {
+  type: 'progress'
+  attempts: number
+  hashRate: number
+}
+
 let activeAction: ACTION = ACTION.checkbox
+let powWorker: Worker | null = null
 
 const sendMessageToLoader = (event: IFRAME_MESSAGE_TYPES, data = {}) => {
-  window.parent.postMessage({
-    event,
-    type: MSG_IDENTIFIER,
-    // @ts-ignore
-    cid: window.__SWETRIX_CAPTCHA_ID,
-    ...data,
-  }, '*')
+  window.parent.postMessage(
+    {
+      event,
+      type: MSG_IDENTIFIER,
+      // @ts-ignore
+      cid: window.__SWETRIX_CAPTCHA_ID,
+      ...data,
+    },
+    '*',
+  )
 }
 
 /**
- * Sets the provided action visible and the rest hidden
+ * Sets the provided action visible and the rest hidden with smooth transitions
  * @param {*} action checkbox | failure | completed | loading
  */
 const activateAction = (action: ACTION) => {
@@ -50,6 +72,7 @@ const activateAction = (action: ACTION) => {
 
   const statusDefault = document.querySelector('#status-default')
   const statusFailure = document.querySelector('#status-failure')
+  const statusComputing = document.querySelector('#status-computing')
 
   const actions = {
     checkbox: document.querySelector('#checkbox'),
@@ -58,23 +81,39 @@ const activateAction = (action: ACTION) => {
     loading: document.querySelector('#loading'),
   }
 
-  // Apply hidden class to all actions
-  actions.checkbox?.classList.add('hidden')
-  actions.failure?.classList.add('hidden')
-  actions.completed?.classList.add('hidden')
-  actions.loading?.classList.add('hidden')
+  // Hide all action elements with transitions
+  // Checkbox uses fade-out class for smooth transition
+  if (action !== ACTION.checkbox) {
+    actions.checkbox?.classList.add('fade-out')
+  } else {
+    actions.checkbox?.classList.remove('fade-out')
+  }
+
+  // Loading, failure, completed use .show class for visibility
+  actions.loading?.classList.remove('show')
+  actions.failure?.classList.remove('show')
+  actions.completed?.classList.remove('show')
 
   // Change the status text
+  statusDefault?.classList.add('hidden')
+  statusFailure?.classList.add('hidden')
+  statusComputing?.classList.add('hidden')
+
   if (action === 'failure') {
-    statusDefault?.classList.add('hidden')
     statusFailure?.classList.remove('hidden')
+  } else if (action === 'loading') {
+    statusComputing?.classList.remove('hidden')
   } else {
     statusDefault?.classList.remove('hidden')
-    statusFailure?.classList.add('hidden')
   }
 
-  // Remove hidden class from the provided action
-  actions[action]?.classList.remove('hidden')
+  // Show the active action element with animation
+  if (action !== ACTION.checkbox) {
+    // Small delay to ensure CSS transitions work properly
+    requestAnimationFrame(() => {
+      actions[action]?.classList.add('show')
+    })
+  }
 }
 
 const setLifetimeTimeout = () => {
@@ -84,41 +123,7 @@ const setLifetimeTimeout = () => {
   }, CAPTCHA_TOKEN_LIFETIME * 1000)
 }
 
-const enableManualChallenge = (svg: string) => {
-  const manualChallenge = document.querySelector('#manual-challenge')
-  const svgCaptcha = document.querySelector('#svg-captcha')
-
-  if (!svgCaptcha) {
-    return
-  }
-
-  if (!svg) {
-    const error = document.createElement('p')
-    error.innerText = 'Error loading captcha'
-    error.style.color = '#d6292a'
-    svgCaptcha?.appendChild(error)
-  } else {
-    svgCaptcha.innerHTML = svg
-  }
-
-  sendMessageToLoader(IFRAME_MESSAGE_TYPES.MANUAL_STARTED)
-  manualChallenge?.classList.remove('hidden')
-}
-
-const disableManualChallenge = () => {
-  const manualChallenge = document.querySelector('#manual-challenge')
-  const svgCaptcha = document.querySelector('#svg-captcha')
-
-  if (!svgCaptcha) {
-    return
-  }
-
-  sendMessageToLoader(IFRAME_MESSAGE_TYPES.MANUAL_FINISHED)
-  svgCaptcha.innerHTML = ''
-  manualChallenge?.classList.add('hidden')
-}
-
-const generateCaptcha = async () => {
+const generateChallenge = async (): Promise<PowChallenge | null> => {
   try {
     const response = await fetch(`${API_URL}${ENDPOINTS.GENERATE}`, {
       method: 'POST',
@@ -126,27 +131,24 @@ const generateCaptcha = async () => {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        // @ts-ignore
-        theme: window.__SWETRIX_CAPTCHA_THEME || DEFAULT_THEME,
         // @ts-ignore
         pid: window.__SWETRIX_PROJECT_ID,
       }),
     })
-  
+
     if (!response.ok) {
-      throw ''
+      throw new Error('Failed to generate challenge')
     }
-  
-    const data = await response.json()
-    return data
+
+    return await response.json()
   } catch (e) {
     sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
     activateAction(ACTION.failure)
-    return {}
+    return null
   }
 }
 
-const verify = async () => {
+const verifySolution = async (challenge: string, nonce: number, solution: string): Promise<string | null> => {
   try {
     const response = await fetch(`${API_URL}${ENDPOINTS.VERIFY}`, {
       method: 'POST',
@@ -154,99 +156,183 @@ const verify = async () => {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
+        challenge,
+        nonce,
+        solution,
         // @ts-ignore
         pid: window.__SWETRIX_PROJECT_ID,
       }),
     })
 
     if (!response.ok) {
-      return {}
+      throw new Error('Verification failed')
     }
 
     const data = await response.json()
-    return data
+
+    if (!data.success) {
+      throw new Error('Verification failed')
+    }
+
+    return data.token
   } catch (e) {
     sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
     activateAction(ACTION.failure)
-    return {}
+    return null
   }
 }
 
-document.addEventListener('DOMContentLoaded', () => {
-  const captchaComponent = document.querySelector('#swetrix-captcha')
-  const branding = document.querySelector('#branding')
-  const svgCaptchaInput = document.querySelector('#svg-captcha-input')
-  const manualSubmitBtn = document.querySelector('#manual-submit-btn')
-
-  branding?.addEventListener('click', (e: Event) => {
-    e.stopPropagation()
-  })
-
-  manualSubmitBtn?.addEventListener('click', async (e: Event) => {
-    e.stopPropagation()
+const solveChallenge = async (challenge: PowChallenge): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    // Terminate any existing worker
+    if (powWorker) {
+      powWorker.terminate()
+    }
 
-    if (!svgCaptchaInput) {
+    try {
+      powWorker = new Worker(WORKER_URL)
+    } catch (e) {
+      // Fallback: solve in main thread if worker fails
+      solveInMainThread(challenge).then(resolve).catch(reject)
       return
     }
 
-    // @ts-ignore
-    const code = svgCaptchaInput.value
+    powWorker.onmessage = async (
+      event: MessageEvent<
+        PowResult | PowProgress | { type: 'timeout'; reason: string } | { type: 'error'; message?: string }
+      >,
+    ) => {
+      const data = event.data
 
-    if (!code) {
-      return
-    }
+      if (data.type === 'progress') {
+        return
+      }
 
-    let response
+      if (data.type === 'timeout') {
+        // Worker timed out or hit max iterations
+        console.error('PoW worker timeout:', (data as { type: 'timeout'; reason: string }).reason)
+        sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
+        activateAction(ACTION.failure)
+        powWorker?.terminate()
+        powWorker = null
+        resolve()
+        return
+      }
 
-    try {
-      response = await fetch(`${API_URL}${ENDPOINTS.VERIFY_MANUAL}`, {
-        method: 'POST',
-        body: JSON.stringify({
-          hash: HASH,
-          code,
-          // @ts-ignore
-          pid: window.__SWETRIX_PROJECT_ID,
-        }),
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      })
-    } catch (e) {
-      disableManualChallenge()
+      if (data.type === 'result') {
+        // Worker found the solution
+        const token = await verifySolution(challenge.challenge, (data as PowResult).nonce, (data as PowResult).solution)
+
+        if (token) {
+          sendMessageToLoader(IFRAME_MESSAGE_TYPES.SUCCESS, { token })
+          setLifetimeTimeout()
+          activateAction(ACTION.completed)
+        }
+
+        powWorker?.terminate()
+        powWorker = null
+        resolve()
+        return
+      }
+
+      // Handle error message from worker
+      if (data.type === 'error') {
+        const errorData = data as { type: 'error'; message?: string }
+        console.error('PoW worker error message:', errorData.message || 'Unknown error')
+        sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
+        activateAction(ACTION.failure)
+        powWorker?.terminate()
+        powWorker = null
+        resolve()
+        return
+      }
+
+      // Fallback for unexpected message types
+      console.warn('PoW worker received unexpected message type:', (data as { type?: unknown }).type, 'Raw data:', data)
       sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
       activateAction(ACTION.failure)
-      // @ts-ignore
-      svgCaptchaInput.value = ''
-      return
+      powWorker?.terminate()
+      powWorker = null
+      resolve()
     }
 
-    if (!response.ok) {
-      disableManualChallenge()
+    powWorker.onerror = (error) => {
+      console.error('PoW worker error:', error)
+      powWorker?.terminate()
+      powWorker = null
+
+      // Fallback to main thread
+      solveInMainThread(challenge).then(resolve).catch(reject)
+    }
+
+    // Start the worker
+    powWorker.postMessage({
+      challenge: challenge.challenge,
+      difficulty: challenge.difficulty,
+    })
+  })
+}
+
+// Fallback solution for environments where workers don't work
+const solveInMainThread = async (challenge: PowChallenge): Promise<void> => {
+  const { challenge: challengeStr, difficulty } = challenge
+  let nonce = 0
+  const startTime = Date.now()
+
+  const sha256 = async (message: string): Promise<string> => {
+    const encoder = new TextEncoder()
+    const data = encoder.encode(message)
+    const hashBuffer = await crypto.subtle.digest('SHA-256', data)
+    const hashArray = Array.from(new Uint8Array(hashBuffer))
+    return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
+  }
+
+  const hasValidPrefix = (hash: string, diff: number): boolean => {
+    for (let i = 0; i < diff; i++) {
+      if (hash[i] !== '0') return false
+    }
+    return true
+  }
+
+  while (nonce < MAX_ITERATIONS) {
+    // Check overall timeout
+    const elapsedMs = Date.now() - startTime
+    if (elapsedMs >= TIMEOUT_MS) {
+      console.error(`PoW main-thread timeout: ${TIMEOUT_MS}ms elapsed after ${nonce} attempts`)
       sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
       activateAction(ACTION.failure)
-      // @ts-ignore
-      svgCaptchaInput.value = ''
       return
     }
 
-    const { success, token } = await response.json()
+    const input = `${challengeStr}:${nonce}`
+    const hash = await sha256(input)
 
-    if (!success) {
-      disableManualChallenge()
-      sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
-      activateAction(ACTION.failure)
-      // @ts-ignore
-      svgCaptchaInput.value = ''
+    if (hasValidPrefix(hash, difficulty)) {
+      const token = await verifySolution(challengeStr, nonce, hash)
+
+      if (token) {
+        sendMessageToLoader(IFRAME_MESSAGE_TYPES.SUCCESS, { token })
+        setLifetimeTimeout()
+        activateAction(ACTION.completed)
+      }
       return
     }
 
-    // @ts-ignore
-    svgCaptchaInput.value = ''
+    nonce++
+  }
+
+  // Max iterations reached without finding solution
+  console.error(`PoW main-thread max iterations reached: ${MAX_ITERATIONS} attempts`)
+  sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
+  activateAction(ACTION.failure)
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const captchaComponent = document.querySelector('#swetrix-captcha')
+  const branding = document.querySelector('#branding')
 
-    sendMessageToLoader(IFRAME_MESSAGE_TYPES.SUCCESS, { token })
-    setLifetimeTimeout()
-    activateAction(ACTION.completed)
-    disableManualChallenge()
+  branding?.addEventListener('click', (e: Event) => {
+    e.stopPropagation()
   })
 
   captchaComponent?.addEventListener('click', async () => {
@@ -261,24 +347,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
     activateAction(ACTION.loading)
 
-    try {
-      const { token } = await verify()
-
-      if (!token) {
-        throw ''
-      }
-
-      TOKEN = token
-      sendMessageToLoader(IFRAME_MESSAGE_TYPES.SUCCESS, { token })
-      setLifetimeTimeout()
-      activateAction(ACTION.completed)
-      return
-    } catch (e) {
-      const { data, hash } = await generateCaptcha()
+    const challenge = await generateChallenge()
 
-      HASH = hash
-      enableManualChallenge(data)
+    if (!challenge) {
       return
     }
+
+    await solveChallenge(challenge)
   })
 })