@swetrix/captcha 2.0.2 → 2.3.0

package/src/captcha.ts

@@ -1,358 +0,0 @@
-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 CAPTCHA_TOKEN_LIFETIME = 300 // seconds (5 minutes).
-
-// 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 = {
-  GENERATE: '/generate',
-  VERIFY: '/verify',
-}
-
-enum IFRAME_MESSAGE_TYPES {
-  SUCCESS = 'success',
-  FAILURE = 'failure',
-  TOKEN_EXPIRED = 'tokenExpired',
-}
-
-enum ACTION {
-  checkbox = 'checkbox',
-  failure = 'failure',
-  completed = 'completed',
-  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,
-    },
-    '*',
-  )
-}
-
-/**
- * Sets the provided action visible and the rest hidden with smooth transitions
- * @param {*} action checkbox | failure | completed | loading
- */
-const activateAction = (action: ACTION) => {
-  activeAction = 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'),
-    failure: document.querySelector('#failure'),
-    completed: document.querySelector('#completed'),
-    loading: document.querySelector('#loading'),
-  }
-
-  // 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') {
-    statusFailure?.classList.remove('hidden')
-  } else if (action === 'loading') {
-    statusComputing?.classList.remove('hidden')
-  } else {
-    statusDefault?.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 = () => {
-  setTimeout(() => {
-    sendMessageToLoader(IFRAME_MESSAGE_TYPES.TOKEN_EXPIRED)
-    activateAction(ACTION.checkbox)
-  }, CAPTCHA_TOKEN_LIFETIME * 1000)
-}
-
-const generateChallenge = async (): Promise<PowChallenge | null> => {
-  try {
-    const response = await fetch(`${API_URL}${ENDPOINTS.GENERATE}`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        // @ts-ignore
-        pid: window.__SWETRIX_PROJECT_ID,
-      }),
-    })
-
-    if (!response.ok) {
-      throw new Error('Failed to generate challenge')
-    }
-
-    return await response.json()
-  } catch (e) {
-    sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
-    activateAction(ACTION.failure)
-    return null
-  }
-}
-
-const verifySolution = async (challenge: string, nonce: number, solution: string): Promise<string | null> => {
-  try {
-    const response = await fetch(`${API_URL}${ENDPOINTS.VERIFY}`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        challenge,
-        nonce,
-        solution,
-        // @ts-ignore
-        pid: window.__SWETRIX_PROJECT_ID,
-      }),
-    })
-
-    if (!response.ok) {
-      throw new Error('Verification failed')
-    }
-
-    const data = await response.json()
-
-    if (!data.success) {
-      throw new Error('Verification failed')
-    }
-
-    return data.token
-  } catch (e) {
-    sendMessageToLoader(IFRAME_MESSAGE_TYPES.FAILURE)
-    activateAction(ACTION.failure)
-    return null
-  }
-}
-
-const solveChallenge = async (challenge: PowChallenge): Promise<void> => {
-  return new Promise((resolve, reject) => {
-    // Terminate any existing worker
-    if (powWorker) {
-      powWorker.terminate()
-    }
-
-    try {
-      powWorker = new Worker(WORKER_URL)
-    } catch (e) {
-      // Fallback: solve in main thread if worker fails
-      solveInMainThread(challenge).then(resolve).catch(reject)
-      return
-    }
-
-    powWorker.onmessage = async (
-      event: MessageEvent<
-        PowResult | PowProgress | { type: 'timeout'; reason: string } | { type: 'error'; message?: string }
-      >,
-    ) => {
-      const data = event.data
-
-      if (data.type === 'progress') {
-        return
-      }
-
-      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
-      }
-
-      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)
-      powWorker?.terminate()
-      powWorker = null
-      resolve()
-    }
-
-    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)
-      return
-    }
-
-    const input = `${challengeStr}:${nonce}`
-    const hash = await sha256(input)
-
-    if (hasValidPrefix(hash, difficulty)) {
-      const token = await verifySolution(challengeStr, nonce, hash)
-
-      if (token) {
-        sendMessageToLoader(IFRAME_MESSAGE_TYPES.SUCCESS, { token })
-        setLifetimeTimeout()
-        activateAction(ACTION.completed)
-      }
-      return
-    }
-
-    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')
-
-  branding?.addEventListener('click', (e: Event) => {
-    e.stopPropagation()
-  })
-
-  captchaComponent?.addEventListener('click', async () => {
-    if (activeAction === ACTION.loading || activeAction === ACTION.completed) {
-      return
-    }
-
-    if (activeAction === ACTION.failure) {
-      activateAction(ACTION.checkbox)
-      return
-    }
-
-    activateAction(ACTION.loading)
-
-    const challenge = await generateChallenge()
-
-    if (!challenge) {
-      return
-    }
-
-    await solveChallenge(challenge)
-  })
-})

package/src/pages/dark.html

@@ -1,284 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <title>Swetrix Captcha</title>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
-  <style>
-    html {
-      font-family: '-apple-system', 'system-ui', 'BlinkMacSystemFont', 'Inter', 'Cantarell', 'Helvetica Neue', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-
-    body {
-      margin: 0;
-      padding: 0;
-      height: auto;
-      overflow: auto;
-    }
-
-    #swetrix-captcha {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-
-      /* 300 - 20px (padding) */
-      width: 280px;
-
-      background-color: #0f172a;
-      border: 1px solid #1e293b;
-      height: 64px;
-      -webkit-user-select: none;
-      user-select: none;
-      padding-left: 10px;
-      padding-right: 10px;
-
-      cursor: pointer;
-    }
-
-    #swetrix-captcha:hover {
-      background-color: #1e293b;
-    }
-
-    #challenge {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      flex: 1;
-    }
-
-    #action {
-      margin-right: 10px;
-      position: relative;
-      width: 28px;
-      height: 28px;
-    }
-
-    #checkbox {
-      background-color: #111827;
-      border: 1px solid #374151;
-      height: 25px;
-      width: 25px;
-      border-radius: 3px;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      transition: opacity 0.25s ease, transform 0.25s ease;
-    }
-
-    #checkbox:hover {
-      border-color: #4b5563;
-    }
-
-    #status {
-      font-size: 14px;
-      color: #f9fafb;
-    }
-
-    #status span {
-      transition: opacity 0.2s ease;
-    }
-
-    #status-computing {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .hidden {
-      display: none !important;
-    }
-
-    /* Fade out animation for hiding elements */
-    .fade-out {
-      opacity: 0 !important;
-      transform: translate(-50%, -50%) scale(0.8) !important;
-      pointer-events: none;
-    }
-
-    /* Fade in animation for showing elements */
-    .fade-in {
-      opacity: 1;
-      transform: translate(-50%, -50%) scale(1);
-    }
-
-    #branding {
-      position: absolute;
-      bottom: 4px;
-      right: 10px;
-    }
-
-    #branding a {
-      font-size: 9px;
-      color: #6b7280;
-      text-decoration: none;
-      transition: color 0.2s ease;
-    }
-
-    #branding a:hover {
-      color: #9ca3af;
-      text-decoration: underline;
-    }
-
-    #action svg {
-      width: 28px;
-      height: 28px;
-    }
-
-    #failure > svg {
-      /* bg-red-500 */
-      color: #d6292a;
-    }
-
-    #completed > svg {
-      /* bg-green-600 */
-      color: #16a24c;
-    }
-
-    #completed,
-    #failure {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.8);
-      opacity: 0;
-      transition: opacity 0.3s ease, transform 0.3s ease;
-    }
-
-    #completed.show,
-    #failure.show {
-      opacity: 1;
-      transform: translate(-50%, -50%) scale(1);
-    }
-
-    /* Checkmark draw animation */
-    #completed.show svg path {
-      stroke-dasharray: 24;
-      stroke-dashoffset: 24;
-      animation: drawCheck 0.4s ease forwards 0.1s;
-    }
-
-    @keyframes drawCheck {
-      to {
-        stroke-dashoffset: 0;
-      }
-    }
-
-    /* Failure shake animation */
-    #failure.show {
-      animation: shake 0.4s ease;
-    }
-
-    @keyframes shake {
-      0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
-      25% { transform: translate(-50%, -50%) scale(1) rotate(-5deg); }
-      75% { transform: translate(-50%, -50%) scale(1) rotate(5deg); }
-    }
-
-    /* Loading indicator - Material Design style spinner */
-    #loading {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      width: 24px;
-      height: 24px;
-      opacity: 0;
-      transition: opacity 0.25s ease;
-    }
-
-    #loading.show {
-      opacity: 1;
-    }
-
-    #loading svg {
-      width: 24px;
-      height: 24px;
-      animation: rotate 1.4s linear infinite;
-    }
-
-    #loading svg circle {
-      stroke: #60a5fa;
-      stroke-linecap: round;
-      animation: dash 1.4s ease-in-out infinite;
-    }
-
-    @keyframes rotate {
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    @keyframes dash {
-      0% {
-        stroke-dasharray: 1, 150;
-        stroke-dashoffset: 0;
-      }
-      50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -35;
-      }
-      100% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -124;
-      }
-    }
-  </style>
-  <script>
-    window.__SWETRIX_CAPTCHA_THEME = 'dark'
-    const urlParams = new URLSearchParams(window.location.search)
-    const pid = urlParams.get('pid')
-    const cid = urlParams.get('cid')
-
-    window.__SWETRIX_CAPTCHA_ID = cid
-    window.__SWETRIX_PROJECT_ID = pid
-  </script>
-  <script src="../captcha.js" defer></script>
-</head>
-
-<body>
-  <div id="swetrix-captcha">
-    <div id="challenge">
-      <div id="action">
-        <!-- Can contain a checkbox itself / a red cross (with a retry action) / a green check mark -->
-        <div id="checkbox"></div>
-        <div id="failure">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/>
-            <path d="M12 9v4"/>
-            <path d="M12 17h.01"/>
-          </svg>
-        </div>
-        <div id="completed">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M20 6 9 17l-5-5"/>
-          </svg>
-        </div>
-        <div id="loading">
-          <svg viewBox="0 0 50 50">
-            <circle cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
-          </svg>
-        </div>
-      </div>
-      <div id="status">
-        <span id="status-default">I am human</span>
-        <span id="status-failure" class="hidden">Failure, please retry</span>
-        <span id="status-computing" class="hidden">
-          <span>Verifying...</span>
-        </span>
-      </div>
-    </div>
-    <div id="branding">
-      <a href="https://swetrix.com/captcha" target="_blank" rel="noopener noreferrer">Swetrix Captcha</a>
-    </div>
-  </div>
-</body>
-
-</html>