@prosopo/procaptcha-bundle 3.3.0 → 4.1.8

package/src/index.ts

@@ -0,0 +1,259 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { getWindowCallback } from "@prosopo/procaptcha-common";
+import type { ProcaptchaRenderOptions } from "@prosopo/types";
+import { at } from "@prosopo/util";
+import type { Root } from "react-dom/client";
+import { extractParams, getProcaptchaScript } from "./util/config.js";
+import { WidgetFactory } from "./util/widgetFactory.js";
+import { WidgetThemeResolver } from "./util/widgetThemeResolver.js";
+
+const BUNDLE_NAMES = ["procaptcha.bundle.iife.js", "procaptcha.bundle.js"];
+let procaptchaRoots: Root[] = [];
+
+const widgetFactory = new WidgetFactory(new WidgetThemeResolver());
+
+// Define a custom event name for procaptcha execution
+const PROCAPTCHA_EXECUTE_EVENT = "procaptcha:execute";
+
+// Define a custom event name for procaptcha ready
+const PROCAPTCHA_READY_EVENT = "procaptcha:ready";
+
+// Implicit render for targeting all elements with class 'procaptcha'
+const implicitRender = async () => {
+	// Get elements with class 'procaptcha', not including buttons
+	const elements: Element[] = Array.from(
+		document.getElementsByClassName("procaptcha"),
+	).filter((element) => element.tagName.toLowerCase() !== "button");
+
+	// Set siteKey from renderOptions or from the first element's data-sitekey attribute
+	if (elements.length) {
+		const siteKey = at(elements, 0).getAttribute("data-sitekey");
+		const web3 = at(elements, 0).getAttribute("data-web3");
+		if (!siteKey) {
+			console.error("No site key found");
+			return;
+		}
+
+		const root = await widgetFactory.createWidgets(
+			elements,
+			{
+				siteKey: siteKey,
+			},
+			!(web3 === "true"),
+		);
+
+		procaptchaRoots.push(...root);
+	}
+
+	// Check for invisible mode indicators (procaptcha class on buttons)
+	const invisibleButtons = Array.from(
+		document.getElementsByClassName("procaptcha"),
+	).filter((button) => button.tagName.toLowerCase() === "button");
+
+	if (invisibleButtons.length) {
+		for (const button of invisibleButtons) {
+			const siteKey = button.getAttribute("data-sitekey") || "";
+			const callback = button.getAttribute("data-callback") || "";
+
+			const root = await widgetFactory.createWidgets(
+				[button],
+				{
+					siteKey: siteKey,
+					callback: callback,
+				},
+				true,
+				true,
+			);
+
+			procaptchaRoots.push(...root);
+
+			// Add click event listener to the button
+			button.addEventListener("click", async (event) => {
+				event.preventDefault();
+				execute();
+			});
+		}
+	}
+};
+
+// Explicit render for targeting specific elements
+export const render = async (
+	element: Element,
+	renderOptions: ProcaptchaRenderOptions,
+) => {
+	const hasInvisibleSize =
+		Object.prototype.hasOwnProperty.call(renderOptions, "size") &&
+		renderOptions.size === "invisible";
+
+	const isWeb2 = !renderOptions.web3;
+
+	if (hasInvisibleSize || element.tagName.toLowerCase() === "button") {
+		const roots = await widgetFactory.createWidgets(
+			[element],
+			renderOptions,
+			isWeb2,
+			true,
+		);
+		procaptchaRoots.push(...roots);
+		return;
+	}
+
+	const roots = await widgetFactory.createWidgets(
+		[element],
+		renderOptions,
+		isWeb2,
+		false,
+	);
+
+	procaptchaRoots.push(...roots);
+};
+
+export default function ready(fn: () => void) {
+	if (document && document.readyState !== "loading") {
+		console.log("document.readyState ready!");
+		fn();
+	} else {
+		console.log("DOMContentLoaded listener!");
+		document.addEventListener("DOMContentLoaded", () => {
+			console.log("DOMContentLoaded fired");
+			console.log(window);
+			fn();
+		});
+	}
+}
+
+export const execute = () => {
+	const containers = findProcaptchaContainers();
+
+	if (containers.length === 0) {
+		console.error("No Procaptcha containers found for execution");
+		return;
+	}
+
+	// Dispatch a custom event to notify React components to show the modal or perform silent verification
+	const executeEvent = new CustomEvent(PROCAPTCHA_EXECUTE_EVENT, {
+		detail: {
+			containerId: containers[0]?.id || "procaptcha-container",
+			containerCount: containers.length,
+			timestamp: Date.now(),
+		},
+		bubbles: true,
+		cancelable: true,
+	});
+
+	// Dispatch the event on the document
+	document.dispatchEvent(executeEvent);
+};
+
+function findProcaptchaContainers(): Element[] {
+	const containers: Element[] = [];
+
+	// Strategy 1: Look for elements with data-size="invisible"
+	const invisibleContainers = Array.from(
+		document.querySelectorAll('[data-size="invisible"]'),
+	);
+	containers.push(...invisibleContainers);
+
+	// Strategy 2: Look for elements with specific IDs
+	const idContainers = Array.from(
+		document.querySelectorAll(
+			'#procaptcha-container, [id$="-procaptcha-container"]',
+		),
+	);
+
+	// Strategy 3: Look for elements with class 'p-procaptcha'
+	const classContainers = Array.from(
+		document.getElementsByClassName("p-procaptcha"),
+	);
+	containers.push(...classContainers);
+
+	for (const container of idContainers) {
+		if (!containers.includes(container)) {
+			containers.push(container);
+		}
+	}
+
+	return containers;
+}
+
+// extend the global Window interface to include the procaptcha object
+declare global {
+	interface Window {
+		procaptcha: {
+			ready: typeof ready;
+			render: typeof render;
+			reset: typeof reset;
+			execute: typeof execute;
+		};
+	}
+}
+
+const start = () => {
+	// onLoadUrlCallback defines the name of the callback function to be called when the script is loaded
+	// onRenderExplicit takes values of either explicit or implicit
+	const { onloadUrlCallback, renderExplicit } = extractParams(BUNDLE_NAMES);
+	let readyCalled = false;
+
+	// Render the Procaptcha component implicitly if renderExplicit is not set to explicit
+	if (renderExplicit !== "explicit") {
+		getProcaptchaScript(BUNDLE_NAMES)?.addEventListener("load", () => {
+			ready(implicitRender);
+			readyCalled = true;
+		});
+		// or if the document has already loaded, call the implicit render function
+		if (document.readyState === "complete" && !readyCalled) {
+			ready(implicitRender);
+		}
+	}
+
+	if (onloadUrlCallback) {
+		// Add event listener to the script tag to call the callback function when the script is loaded
+		getProcaptchaScript(BUNDLE_NAMES)?.addEventListener("load", () => {
+			const onloadCallback = getWindowCallback(onloadUrlCallback);
+			ready(onloadCallback);
+		});
+
+		// or if the document has already loaded, call the callback function
+		if (document.readyState === "complete" && !readyCalled) {
+			const onloadCallback = getWindowCallback(onloadUrlCallback);
+			ready(onloadCallback);
+		}
+	}
+};
+
+export const reset = () => {
+	for (const root of procaptchaRoots) {
+		root.unmount();
+	}
+	procaptchaRoots = [];
+
+	start();
+};
+
+// set the procaptcha attribute on the window
+window.procaptcha = { ready, render, reset, execute };
+
+// Dispatch a custom event to notify that window.procaptcha is ready
+const procaptchaReadyEvent = new CustomEvent(PROCAPTCHA_READY_EVENT, {
+	detail: {
+		timestamp: Date.now(),
+	},
+	bubbles: true,
+	cancelable: false,
+});
+document.dispatchEvent(procaptchaReadyEvent);
+
+start();

package/src/tests/procaptchaReady.unit.test.ts

@@ -0,0 +1,58 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { JSDOM } from "jsdom";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+describe("procaptcha:ready event", () => {
+	let dom: JSDOM;
+
+	beforeEach(() => {
+		dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
+			url: "https://example.com",
+		});
+		// @ts-ignore
+		global.document = dom.window.document;
+		// @ts-ignore
+		global.window = dom.window as unknown as Window & typeof globalThis;
+	});
+
+	afterEach(() => {
+		// biome-ignore lint/suspicious/noExplicitAny: TODO fix any
+		(global as any).document = undefined;
+		// biome-ignore lint/suspicious/noExplicitAny: TODO fix any
+		(global as any).window = undefined;
+	});
+
+	it("should dispatch procaptcha:ready event when window.procaptcha is set", (done) => {
+		// Set up event listener before importing the module
+		document.addEventListener("procaptcha:ready", (event: Event) => {
+			const customEvent = event as CustomEvent;
+			expect(customEvent.detail).toBeDefined();
+			expect(typeof customEvent.detail.timestamp).toBe("number");
+			expect(customEvent.bubbles).toBe(true);
+			expect(customEvent.cancelable).toBe(false);
+
+			// Check that window.procaptcha is available when the event fires
+			expect(window.procaptcha).toBeDefined();
+			expect(window.procaptcha?.render).toBeDefined();
+			expect(window.procaptcha?.ready).toBeDefined();
+			expect(window.procaptcha?.reset).toBeDefined();
+			expect(window.procaptcha?.execute).toBeDefined();
+		});
+
+		// Import the module which should set window.procaptcha and dispatch the event
+		import("../index.js");
+	});
+});

package/src/tests/util/config.test.ts

@@ -0,0 +1,97 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { JSDOM } from "jsdom";
+
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { extractParams, getProcaptchaScript } from "../../util/config.js";
+
+describe("Config utility functions", () => {
+	let dom: JSDOM;
+
+	beforeEach(() => {
+		dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
+			url: "https://example.com",
+		});
+		global.document = dom.window.document;
+	});
+
+	afterEach(() => {
+		// biome-ignore lint/suspicious/noExplicitAny: TODO fix any
+		(global as any).document = undefined;
+	});
+
+	describe("getProcaptchaScript", () => {
+		it("should return null when no matching script is found", () => {
+			const result = getProcaptchaScript(["nonexistent"]);
+			expect(result).toBeNull();
+		});
+
+		it("should return the script element when a matching script is found", () => {
+			const script = document.createElement("script");
+			script.src = "https://example.com/procaptcha.js";
+			document.body.appendChild(script);
+
+			const result = getProcaptchaScript(["procaptcha"]);
+			expect(result).toBe(script);
+		});
+	});
+
+	describe("extractParams", () => {
+		it("should return undefined values when no matching script is found", () => {
+			const result = extractParams(["nonexistent"]);
+			expect(result).toEqual({
+				onloadUrlCallback: undefined,
+				renderExplicit: undefined,
+			});
+		});
+
+		it("should extract parameters from the script URL", () => {
+			const script = document.createElement("script");
+			script.src =
+				"https://example.com/procaptcha.js?onload=onloadCallback&render=explicit";
+			document.body.appendChild(script);
+
+			const result = extractParams(["procaptcha"]);
+			expect(result).toEqual({
+				onloadUrlCallback: "onloadCallback",
+				renderExplicit: "explicit",
+			});
+		});
+
+		it("should return undefined for missing parameters", () => {
+			const script = document.createElement("script");
+			script.src = "https://example.com/procaptcha.js?onload=onloadCallback";
+			document.body.appendChild(script);
+
+			const result = extractParams(["procaptcha"]);
+			expect(result).toEqual({
+				onloadUrlCallback: "onloadCallback",
+				renderExplicit: undefined,
+			});
+		});
+
+		it("should handle scripts without query parameters", () => {
+			const script = document.createElement("script");
+			script.src = "https://example.com/procaptcha.js";
+			document.body.appendChild(script);
+
+			const result = extractParams(["procaptcha"]);
+			expect(result).toEqual({
+				onloadUrlCallback: undefined,
+				renderExplicit: undefined,
+			});
+		});
+	});
+});

package/src/tests/util/renderLogic.test.tsx

@@ -0,0 +1,221 @@
+// Copyright 2021-2026 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { ProcaptchaFrictionless } from "@prosopo/procaptcha-frictionless";
+import type { Callbacks, ProcaptchaProps } from "@prosopo/types";
+import { type DOMWindow, JSDOM } from "jsdom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { WidgetFactory } from "../../util/widgetFactory.js";
+import { WidgetThemeResolver } from "../../util/widgetThemeResolver.js";
+
+const widgetFactory = new WidgetFactory(new WidgetThemeResolver());
+
+interface TestContext {
+	document?: Document;
+	window?: DOMWindow;
+}
+
+const callbacks: Callbacks = {
+	onHuman: () => console.log("onHuman"),
+	onChallengeExpired: () => console.log("onChallengeExpired"),
+	onExpired: () => console.log("onExpired"),
+	onError: () => console.log("onError"),
+	onClose: () => console.log("onClose"),
+	onOpen: () => console.log("onOpen"),
+	onFailed: () => console.log("onFailed"),
+	onReset: () => console.log("onReset"),
+	onExtensionNotFound: () => console.log("onExtensionNotFound"),
+	onReload: () => console.log("onReload"),
+};
+
+vi.mock("@prosopo/detector", async () => {
+	return {
+		isBot: async () => {
+			return { isBot: true };
+		},
+	};
+});
+
+vi.mock("@polkadot/extension-dapp", async () => {
+	return {
+		web3Enable: async () => {
+			return [];
+		},
+	};
+});
+
+vi.mock("@prosopo/procaptcha-frictionless", async () => {
+	return {
+		ProcaptchaFrictionless: vi.fn((props: ProcaptchaProps) => {
+			return (
+				// @ts-ignore
+				<div config={props.config} callbacks={props.callbacks}>
+					ProcaptchaFrictionless
+				</div>
+			);
+		}),
+	};
+});
+
+describe("Config utility functions", () => {
+	let dom: JSDOM;
+
+	beforeEach<TestContext>((context) => {
+		dom = new JSDOM("<!DOCTYPE html><html><body></body></html>", {
+			url: "https://example.com",
+		});
+		context.document = dom.window.document;
+		context.window = dom.window;
+		// @ts-ignore
+		global.window = dom.window;
+		// @ts-ignore
+		global.document = dom.window.document;
+		// @ts-ignore
+		global.HTMLElement = dom.window.HTMLElement;
+		// @ts-ignore
+		global.Element = dom.window.Element;
+		// @ts-ignore
+		global.Node = dom.window.Node;
+		// @ts-ignore
+		global.navigator = dom.window.navigator;
+		vi.clearAllMocks();
+	});
+
+	afterEach<TestContext>((context) => {
+		context.document = undefined;
+		context.window = undefined;
+		// @ts-ignore
+		global.HTMLElement = undefined;
+		// @ts-ignore
+		global.Element = undefined;
+		// @ts-ignore
+		global.Node = undefined;
+		// @ts-ignore
+		global.navigator = undefined;
+		vi.clearAllMocks();
+	});
+
+	it<TestContext>("always mounts the unified frictionless dispatcher", async (ctx) => {
+		// @ts-ignore
+		const script = ctx.document.createElement("script");
+		script.src = "https://example.com/procaptcha.js";
+		document.body.appendChild(script);
+
+		expect(ctx.window).toBeDefined();
+
+		if (!ctx.window) {
+			expect(true).toBe(false);
+			return;
+		}
+
+		await widgetFactory.createWidgets([script], {
+			siteKey: "1234",
+		});
+
+		await vi.waitFor(() => {
+			expect(ProcaptchaFrictionless).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	it<TestContext>("ignores any legacy data-captcha-type attribute on the host element", async (ctx) => {
+		// @ts-ignore
+		const script = ctx.document.createElement("script");
+		script.src = "https://example.com/procaptcha.js";
+		// Customers may still have this attribute on their HTML from before
+		// the server-driven captchaType refactor. The bundle must silently
+		// ignore it and always mount the unified dispatcher.
+		script.setAttribute("data-captcha-type", "image");
+		document.body.appendChild(script);
+
+		expect(ctx.window).toBeDefined();
+
+		if (!ctx.window) {
+			expect(true).toBe(false);
+			return;
+		}
+
+		await widgetFactory.createWidgets([script], {
+			siteKey: "1234",
+		});
+
+		await vi.waitFor(() => {
+			expect(ProcaptchaFrictionless).toHaveBeenCalledTimes(1);
+		});
+	});
+
+	it<TestContext>("user callbacks should be set when defined on the window and pulled in via data attributes", async (ctx) => {
+		// @ts-ignore
+		const script = ctx.document.createElement("script");
+		script.src = "https://example.com/procaptcha.js";
+		// @ts-ignore
+		script["data-callback"] = "onHuman";
+		// @ts-ignore
+		script["data-chalexpired-callback"] = "onChallengeExpired";
+		// @ts-ignore
+		script["data-expired-callback"] = "onExpired";
+		// @ts-ignore
+		script["data-error-callback"] = "onError";
+		// @ts-ignore
+		script["data-close-callback"] = "onClose";
+		// @ts-ignore
+		script["data-open-callback"] = "onOpen";
+		// @ts-ignore
+		script["data-failed-callback"] = "onFailed";
+		// @ts-ignore
+		script["data-reset-callback"] = "onReset";
+		document.body.appendChild(script);
+
+		expect(ctx.window).toBeDefined();
+
+		if (!ctx.window) {
+			expect(true).toBe(false);
+			return;
+		}
+
+		ctx.window.onHuman = callbacks.onHuman;
+		ctx.window.onChallengeExpired = callbacks.onChallengeExpired;
+		ctx.window.onExpired = callbacks.onExpired;
+		ctx.window.onError = callbacks.onError;
+		ctx.window.onClose = callbacks.onClose;
+		ctx.window.onOpen = callbacks.onOpen;
+		ctx.window.onFailed = callbacks.onFailed;
+		ctx.window.onReset = callbacks.onReset;
+		ctx.window.onExtensionNotFound = callbacks.onExtensionNotFound;
+		ctx.window.onReload = callbacks.onReload;
+
+		await widgetFactory.createWidgets([script], {
+			siteKey: "1234",
+		});
+
+		await vi.waitFor(() => {
+			expect(ProcaptchaFrictionless).toHaveBeenCalledTimes(1);
+			// hack to get mock calls
+			// @ts-ignore
+			const call = ProcaptchaFrictionless.mock.calls[0];
+			const props = call[0];
+
+			// Check that the core properties we care about are present
+			expect(props.config.account.address).toBe("1234");
+			expect(props.config.web2).toBe(true);
+			expect(props.config.solutionThreshold).toBe(80);
+			expect(props.config.dappName).toBe("ProsopoClientDapp");
+			expect(props.config.theme).toBe("light");
+			expect(props.config.mode).toBe("visible");
+
+			// Check that callbacks object exists (it will be empty since we're not testing callback extraction here)
+			expect(props.callbacks).toBeDefined();
+			expect(typeof props.callbacks).toBe("object");
+		});
+	});
+});