feat: address PR feedback #2:

- wire up the remote config setting
- replace querying by root with querying by captcha container
- remove hcaptcha and cloudflare providers

Author: madblex

injected/src/features/broker-protection.js

@@ -58,7 +58,8 @@ export default class BrokerProtection extends ContentFeature {
      */
     async exec(action, data) {
         const retryConfig = this.retryConfigFor(action);
-        const { result, exceptions } = await retry(() => execute(action, data), retryConfig);
+        const options = { useEnhancedCaptchaSystem: this.getFeatureSettingEnabled('useEnhancedCaptchaSystem') };
+        const { result, exceptions } = await retry(() => execute(action, data, document, options), retryConfig);
 
         if (result) {
             if ('success' in result && Array.isArray(result.success.next)) {

injected/src/features/broker-protection/actions/actions.js

@@ -8,17 +8,17 @@ import * as captchaHandlers from '../captcha-services/captcha.service';
 import * as deprecatedCaptchaHandlers from './captcha-deprecated';
 
 /**
- * Returns the captcha handlers based on the useNewActionHandlers flag
+ * Returns the captcha handlers based on the useEnhancedCaptchaSystem flag
  * @param {Object} params
- * @param {boolean} params.useNewActionHandlers
+ * @param {boolean} params.useEnhancedCaptchaSystem
  */
-export function resolveActionHandlers({ useNewActionHandlers }) {
+export function resolveActionHandlers({ useEnhancedCaptchaSystem }) {
     return {
         extract,
         fillForm,
         click,
         expectation,
-        ...(useNewActionHandlers
+        ...(useEnhancedCaptchaSystem
             ? {
                   navigate,
                   ...captchaHandlers,

injected/src/features/broker-protection/captcha-services/captcha.service.js

@@ -5,6 +5,25 @@ import { getCaptchaProvider, getCaptchaSolveProvider } from './get-captcha-provi
 import { captchaFactory } from './providers/registry.js';
 import { getCaptchaInfo as getCaptchaInfoDeprecated, solveCaptcha as solveCaptchaDeprecated } from '../actions/captcha-deprecated';
 
+/**
+ *
+ * @param {Document | HTMLElement} root
+ * @param {import('../types.js').PirAction['selector']} [selector]
+ * @returns {HTMLElement | import('../types.js').PirError}
+ */
+const getCaptchaContainer = (root, selector) => {
+    if (!selector) {
+        return PirError.create('missing selector');
+    }
+
+    const captchaContainer = getElement(root, selector);
+    if (!captchaContainer) {
+        return PirError.create(`could not find captcha container with selector ${selector}`);
+    }
+
+    return captchaContainer;
+};
+
 /**
  * Returns the supporting code to inject for the given captcha type
  *
@@ -35,20 +54,17 @@ export function getSupportingCodeToInject(action) {
  * @return {import('../types.js').ActionResponse}
  */
 export function getCaptchaInfo(action, root = document) {
-    const { id: actionID, selector, actionType, captchaType } = action;
+    const { id: actionID, actionType, captchaType, selector } = action;
     if (!captchaType) {
         // ensures backward compatibility with old actions
         return getCaptchaInfoDeprecated(action, root);
     }
 
     const createError = ErrorResponse.generateErrorResponseFunction({ actionID, context: `[getCaptchaInfo] captchaType: ${captchaType}` });
-    if (!selector) {
-        return createError('missing selector');
-    }
 
-    const captchaContainer = getElement(root, selector);
-    if (!captchaContainer) {
-        return createError(`could not find captcha container with selector ${selector}`);
+    const captchaContainer = getCaptchaContainer(root, selector);
+    if (PirError.isError(captchaContainer)) {
+        return createError(captchaContainer.error.message);
     }
 
     const captchaProvider = getCaptchaProvider(captchaContainer, captchaType);
@@ -79,24 +95,29 @@ export function getCaptchaInfo(action, root = document) {
  * @return {import('../types.js').ActionResponse}
  */
 export function solveCaptcha(action, token, root = document) {
-    const { id: actionID, actionType, captchaType } = action;
+    const { id: actionID, actionType, captchaType, selector } = action;
     if (!captchaType) {
         // ensures backward compatibility with old actions
         return solveCaptchaDeprecated(action, token, root);
     }
 
     const createError = ErrorResponse.generateErrorResponseFunction({ actionID, context: `[solveCaptcha] captchaType: ${captchaType}` });
-    const captchaSolveProvider = getCaptchaSolveProvider(root, captchaType);
 
+    const captchaContainer = getCaptchaContainer(root, selector);
+    if (PirError.isError(captchaContainer)) {
+        return createError(captchaContainer.error.message);
+    }
+
+    const captchaSolveProvider = getCaptchaSolveProvider(captchaContainer, captchaType);
     if (PirError.isError(captchaSolveProvider)) {
         return createError(captchaSolveProvider.error.message);
     }
 
-    if (!captchaSolveProvider.canSolve(root)) {
+    if (!captchaSolveProvider.canSolve(captchaContainer)) {
         return createError('cannot solve captcha');
     }
 
-    const tokenResponse = captchaSolveProvider.injectToken(root, token);
+    const tokenResponse = captchaSolveProvider.injectToken(captchaContainer, token);
     if (PirError.isError(tokenResponse)) {
         return createError(tokenResponse.error.message);
     }

injected/src/features/broker-protection/captcha-services/factory.js

@@ -34,11 +34,11 @@ export class CaptchaFactory {
 
     /**
      * Detect the captcha provider based on the root document
-     * @param {Document} root - The root document
+     * @param {HTMLElement} element - The element to check
      * @returns {import('./providers/provider.interface').CaptchaProvider|null}
      */
-    detectSolveProvider(root) {
-        return this._getAllProviders().find((provider) => provider.canSolve(root)) || null;
+    detectSolveProvider(element) {
+        return this._getAllProviders().find((provider) => provider.canSolve(element)) || null;
     }
 
     /**

injected/src/features/broker-protection/captcha-services/get-captcha-container.js

@@ -0,0 +1,21 @@
+import { getElement } from '../utils/utils.js';
+import { PirError } from '../types';
+
+/**
+ *
+ * @param {Document | HTMLElement} root
+ * @param {import('../types.js').PirAction['selector']} [selector]
+ * @returns {HTMLElement | PirError}
+ */
+export function getCaptchaContainer(root, selector) {
+    if (!selector) {
+        return PirError.create('missing selector');
+    }
+
+    const captchaContainer = getElement(root, selector);
+    if (!captchaContainer) {
+        return PirError.create(`could not find captcha container with selector ${selector}`);
+    }
+
+    return captchaContainer;
+}

injected/src/features/broker-protection/captcha-services/get-captcha-provider.js

@@ -4,60 +4,62 @@ import { captchaFactory } from './providers/registry';
 /**
  * Gets the captcha provider for the getCaptchaInfo action
  *
- * @param {HTMLElement} captchaDiv
+ * @param {HTMLElement} captchaContainer
  * @param {string} captchaType
  */
-export function getCaptchaProvider(captchaDiv, captchaType) {
+export function getCaptchaProvider(captchaContainer, captchaType) {
     const captchaProvider = captchaFactory.getProviderByType(captchaType);
     if (!captchaProvider) {
-        return PirError.create(`[getCaptchaProvider] could not find captchaProvider with type ${captchaType}`);
+        return PirError.create(`[getCaptchaProvider] could not find captcha provider with type ${captchaType}`);
     }
 
-    if (captchaProvider.isSupportedForElement(captchaDiv)) {
+    if (captchaProvider.isSupportedForElement(captchaContainer)) {
         return captchaProvider;
     }
 
-    // TODO fire a pixel
-    // if the captcha provider type is different from the expected type, log a warning
-    console.warn(
-        `[getCaptchaProvider] mismatch between expected captha type ${captchaType} and detected type ${captchaProvider.getType()}`,
-    );
-    const detectedProvider = captchaFactory.detectProvider(captchaDiv);
+    const detectedProvider = captchaFactory.detectProvider(captchaContainer);
     if (!detectedProvider) {
         return PirError.create(
-            `[getCaptchaProvider] could not detect captcha provider for ${captchaType} captcha and element ${captchaDiv}`,
+            `[getCaptchaProvider] could not detect captcha provider for ${captchaType} captcha and element ${captchaContainer}`,
         );
     }
 
+    // TODO fire a pixel
+    // if the captcha provider type is different from the expected type, log a warning
+    console.warn(
+        `[getCaptchaProvider] mismatch between expected capctha type ${captchaType} and detected type ${detectedProvider.getType()}`,
+    );
+
     return detectedProvider;
 }
 
 /**
  * Gets the captcha provider for the solveCaptcha action
- * @param {Document} root
+ * @param {HTMLElement} captchaContainer
  * @param {string} captchaType
  */
-export function getCaptchaSolveProvider(root, captchaType) {
+export function getCaptchaSolveProvider(captchaContainer, captchaType) {
     const captchaProvider = captchaFactory.getProviderByType(captchaType);
     if (!captchaProvider) {
-        return PirError.create(`[getCaptchaSolveProvider] could not find captchaProvider with type ${captchaType}`);
+        return PirError.create(`[getCaptchaSolveProvider] could not find captcha provider with type ${captchaType}`);
     }
 
-    if (captchaProvider.canSolve(root)) {
+    if (captchaProvider.canSolve(captchaContainer)) {
         return captchaProvider;
     }
 
-    // TODO fire a pixel
-    // if the captcha provider type is different from the expected type, log a warning
-    console.warn(
-        `[getCaptchaSolveProvider] mismatch between expected captha type ${captchaType} and detected type ${captchaProvider.getType()}`,
-    );
-    const detectedProvider = captchaFactory.detectSolveProvider(root);
+    const detectedProvider = captchaFactory.detectSolveProvider(captchaContainer);
     if (!detectedProvider) {
         return PirError.create(
-            `[getCaptchaSolveProvider] could not detect captcha provider for ${captchaType} captcha and element ${root}`,
+            `[getCaptchaSolveProvider] could not detect captcha provider for ${captchaType} captcha and element ${captchaContainer}`,
         );
     }
 
+    // TODO fire a pixel
+    // if the captcha provider type is different from the expected type, log a warning
+    console.warn(
+        `[getCaptchaSolveProvider] mismatch between expected captha type ${captchaType} and detected type ${detectedProvider.getType()}`,
+    );
+
     return detectedProvider;
 }

injected/src/features/broker-protection/captcha-services/providers/cloudflare-turnstile.js

@@ -31,18 +31,18 @@ export class CloudFlareTurnstileProvider {
     }
 
     /**
-     * @param {Document} root - The document root to search for captchas
+     * @param {HTMLElement} captchaContainerElement - The element containing the captcha
      */
-    canSolve(root) {
+    canSolve(captchaContainerElement) {
         // TODO: Implement
         return false;
     }
 
     /**
-     * @param {Document} root - The document root containing the captcha
+     * @param {HTMLElement} captchaContainerElement - The element containing the captcha
      * @param {string} token - The solved captcha token
      */
-    injectToken(root, token) {
+    injectToken(captchaContainerElement, token) {
         // TODO: Implement
         return PirError.create('Not implemented');
     }

injected/src/features/broker-protection/captcha-services/providers/hcaptcha.js

@@ -1,17 +1,10 @@
 import { PirError } from '../../types';
-import { getUrlHashParameter, getUrlParameter } from '../../utils/url';
-import { getElementByName, getElementWithSrcStart } from '../../utils/utils';
-import { stringifyFunction } from '../utils/stringify-function';
-import { injectTokenIntoElement } from '../utils/token';
 
 /**
  * @import { CaptchaProvider } from './provider.interface';
  * @implements {CaptchaProvider}
  */
 export class HCaptchaProvider {
-    #CAPTCHA_URL = 'https://newassets.hcaptcha.com/captcha';
-    #CAPTCHA_RESPONSE_ELEMENT_NAME = 'h-captcha-response';
-
     getType() {
         return 'hcaptcha';
     }
@@ -20,90 +13,44 @@ export class HCaptchaProvider {
      * @param {HTMLElement} captchaContainerElement - The element to check
      */
     isSupportedForElement(captchaContainerElement) {
-        return !!this._getCaptchaElement(captchaContainerElement);
+        // TODO: Implement
+        return false;
     }
 
     /**
-     * @param {HTMLElement} captchaContainerElement - The element to check
+     * @param {HTMLElement} captchaContainerElement - The element containing the captcha
      */
     getCaptchaIdentifier(captchaContainerElement) {
-        const captchaElement = this._getCaptchaElement(captchaContainerElement);
-        if (!captchaElement) {
-            return PirError.create('[getCaptchaIdentifier] could not find captcha');
-        }
-
-        const siteKey = this._getSiteKeyFromElement(captchaElement) || this._getSiteKeyFromUrl(captchaElement);
-        if (!siteKey) {
-            return PirError.create('[HCaptchaProvider.getCaptchaIdentifier] could not extract site key');
-        }
-
-        return siteKey;
+        // TODO: Implement
+        return null;
     }
 
     getSupportingCodeToInject() {
+        // TODO: Implement
         return null;
     }
 
     /**
-     * @param {string} token - The solved captcha token
-     */
-    getSolveCallback(token) {
-        return stringifyFunction({
-            functionBody: hCaptchaCallback,
-            functionName: 'hCaptchaCallback',
-            args: { token },
-        });
-    }
-
-    /**
-     * @param {Document} root - The document root
-     * @returns {boolean}
+     * @param {HTMLElement} captchaContainerElement - The element containing the captcha
      */
-    canSolve(root) {
-        return !!getElementByName(root, this.#CAPTCHA_RESPONSE_ELEMENT_NAME);
+    canSolve(captchaContainerElement) {
+        // TODO: Implement
+        return false;
     }
 
     /**
-     * Injects the token to solve the captcha
-     * @param {Document} root - The document root
+     * @param {HTMLElement} captchaContainerElement - The element containing the captcha
      * @param {string} token - The solved captcha token
      */
-    injectToken(root, token) {
-        return injectTokenIntoElement({ root, elementName: this.#CAPTCHA_RESPONSE_ELEMENT_NAME, token });
-    }
-
-    /**
-     * @private
-     * @param {HTMLElement} root - The root element to search from
-     * @returns {HTMLElement|null}
-     */
-    _getCaptchaElement(root) {
-        return getElementWithSrcStart(root, this.#CAPTCHA_URL);
-    }
-
-    /**
-     * @private
-     * @param {HTMLElement} captchaElement
-     * @returns {string|null} The site key or null if not found
-     */
-    _getSiteKeyFromElement(captchaElement) {
-        return captchaElement instanceof Element ? captchaElement.getAttribute('data-sitekey') : null;
+    injectToken(captchaContainerElement, token) {
+        // TODO: Implement
+        return PirError.create('Not implemented');
     }
 
     /**
-     * @private
-     * @param {HTMLElement} captchaElement
+     * @param {string} token - The solved captcha token
      */
-    _getSiteKeyFromUrl(captchaElement) {
-        if (!('src' in captchaElement)) {
-            return null;
-        }
-
-        const captchaUrl = String(captchaElement.src);
-        return getUrlParameter(captchaUrl, 'sitekey') || getUrlHashParameter(captchaUrl, 'sitekey');
+    getSolveCallback(token) {
+        return null;
     }
 }
-
-const hCaptchaCallback = () => {
-    // TODO: Implementation
-};