Merge pull request #271 from PrivateCaptcha/copilot/add-fetch-timeout-configuration

Add configurable fetch timeout to puzzle.js with AbortController

widget/esbuild.test.config.mjs

@@ -19,7 +19,7 @@ build({
     outfile: './test/bundle.test.js',
     format: 'esm',
     loader: { '.css': 'text' },
-    external: ['node:test', 'node:assert', 'happy-dom'],
+    external: ['node:test', 'node:assert', 'node:http', 'happy-dom'],
     plugins: [
         CSSMinifyPlugin,
         inlineWorkerPlugin({

widget/js/puzzle.js

@@ -5,12 +5,17 @@ import { decode } from 'base64-arraybuffer';
 const PUZZLE_BUFFER_LENGTH = 128;
 // RequestTimeout, Conflict, TooManyRequests
 const ACCEPTABLE_CLIENT_ERRORS = [408, 409, 429];
+const DEFAULT_TIMEOUT_MS = 5000;
 
-export async function getPuzzle(endpoint, sitekey) {
+export async function getPuzzle(endpoint, sitekey, options = {}) {
+    const timeoutMs = options.timeout ?? DEFAULT_TIMEOUT_MS;
     try {
         const response = await fetchWithBackoff(`${endpoint}?sitekey=${sitekey}`,
             { headers: [["x-pc-captcha-version", "1"]], mode: "cors" },
-            5 /*max attempts*/
+            5 /*max attempts*/,
+            800 /*initialDelay*/,
+            6000 /*maxDelay*/,
+            timeoutMs
         );
 
         if (response.ok) {
@@ -30,19 +35,44 @@ export async function getPuzzle(endpoint, sitekey) {
     throw Error('Internal error');
 };
 
-function wait(delay) {
-    return new Promise((resolve) => setTimeout(resolve, delay));
+function wait(delay, signal) {
+    return new Promise((resolve, reject) => {
+        const timeoutId = setTimeout(resolve, delay);
+        if (signal) {
+            signal.addEventListener('abort', () => {
+                clearTimeout(timeoutId);
+                reject(signal.reason || new Error('Aborted'));
+            }, { once: true });
+        }
+    });
 }
 
-async function fetchWithBackoff(url, options, maxAttempts, initialDelay = 800, maxDelay = 6000) {
+async function fetchWithBackoff(url, options, maxAttempts, initialDelay = 800, maxDelay = 6000, timeoutMs = DEFAULT_TIMEOUT_MS) {
+    // Single AbortController is used across all retry attempts - if timeout occurs during any attempt
+    // (including the wait between retries), all subsequent operations will also be aborted
+    const controller = new AbortController();
+    const { signal } = controller;
+    let timeoutId = null;
+
     for (let attempt = 0; attempt < maxAttempts; attempt++) {
         if (attempt > 0) {
             const delay = Math.min(initialDelay * Math.pow(2, attempt), maxDelay);
-            await wait(delay);
+            try {
+                await wait(delay, signal);
+            } catch (err) {
+                if (signal.aborted) {
+                    throw new Error('Fetch timed out');
+                }
+                throw err;
+            }
         }
 
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => controller.abort(new Error('Fetch timed out')), timeoutMs);
+
         try {
-            const response = await fetch(url, options);
+            const response = await fetch(url, { ...options, signal });
+            clearTimeout(timeoutId);
             if (response.ok) {
                 return response;
             } else {
@@ -57,6 +87,10 @@ async function fetchWithBackoff(url, options, maxAttempts, initialDelay = 800, m
                 continue;
             }
         } catch (err) {
+            clearTimeout(timeoutId);
+            if (signal.aborted) {
+                throw new Error('Fetch timed out');
+            }
             console.error('[privatecaptcha]', err);
         }
     }

widget/package-lock.json

@@ -671,6 +671,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -939,6 +940,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -2065,7 +2067,8 @@
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "acorn-jsx": {
       "version": "5.3.2",
@@ -2271,6 +2274,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
+      "peer": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",

widget/test/widget.test.js

@@ -483,3 +483,80 @@ test('captcha.js getResponse returns widget solution', async (t) => {
 
     console.log('✓ getResponse test passed');
 });
+
+test('getPuzzle times out when server responds slowly', async (t) => {
+    const http = await import('node:http');
+    const { getPuzzle } = await import('../js/puzzle.js');
+
+    // Create a slow server that takes 1 second to respond
+    const server = http.createServer((req, res) => {
+        setTimeout(() => {
+            res.writeHead(200, { 'Content-Type': 'text/plain' });
+            res.end('slow response');
+        }, 1000);
+    });
+
+    // Find a random available port
+    await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve));
+    const port = server.address().port;
+
+    // Save original fetch and use native Node.js fetch to avoid happy-dom's mixed content blocking
+    const originalFetch = globalThis.fetch;
+    
+    // Use native fetch that doesn't have mixed content restrictions
+    globalThis.fetch = async (url, options = {}) => {
+        return new Promise((resolve, reject) => {
+            const parsedUrl = new URL(url);
+            const req = http.request({
+                hostname: parsedUrl.hostname,
+                port: parsedUrl.port,
+                path: parsedUrl.pathname + parsedUrl.search,
+                method: options.method || 'GET',
+                headers: options.headers ? Object.fromEntries(options.headers) : {}
+            }, (res) => {
+                let data = '';
+                res.on('data', (chunk) => data += chunk);
+                res.on('end', () => {
+                    resolve({
+                        ok: res.statusCode >= 200 && res.statusCode < 300,
+                        status: res.statusCode,
+                        text: async () => data,
+                        json: async () => JSON.parse(data)
+                    });
+                });
+            });
+            
+            if (options.signal) {
+                options.signal.addEventListener('abort', () => {
+                    req.destroy();
+                    reject(new Error('Aborted'));
+                });
+            }
+            
+            req.on('error', reject);
+            req.end();
+        });
+    };
+
+    try {
+        const startTime = Date.now();
+        await assert.rejects(
+            async () => {
+                await getPuzzle(`http://127.0.0.1:${port}/puzzle`, testSitekey, { timeout: 200 });
+            },
+            (err) => {
+                assert.ok(err.message.includes('timed out') || err.message.includes('Fetch timed out') || err.message.includes('Aborted'), 
+                    `Error message should indicate timeout, got: ${err.message}`);
+                return true;
+            },
+            'getPuzzle should reject with timeout error'
+        );
+        const elapsed = Date.now() - startTime;
+        assert.ok(elapsed < 800, `Should timeout quickly (took ${elapsed}ms)`);
+    } finally {
+        globalThis.fetch = originalFetch;
+        server.close();
+    }
+
+    console.log('✓ getPuzzle timeout test passed');
+});