feat: address PR feedback:

- replace arrow fn with regular functions
- update provider registry
- align getSupportingCodeToInject return types

Author: madblex

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

@@ -12,7 +12,7 @@ import * as deprecatedCaptchaHandlers from './captcha-deprecated';
  * @param {Object} params
  * @param {boolean} params.useNewActionHandlers
  */
-export const resolveActionHandlers = ({ useNewActionHandlers }) => {
+export function resolveActionHandlers({ useNewActionHandlers }) {
     return {
         extract,
         fillForm,
@@ -28,4 +28,4 @@ export const resolveActionHandlers = ({ useNewActionHandlers }) => {
                   ...deprecatedCaptchaHandlers,
               }),
     };
-};
+}

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

@@ -10,22 +10,22 @@ import { buildUrl } from './build-url';
  * @param {Record<string, any>} userData
  * @return {import('../types.js').ActionResponse}
  */
-export const navigate = (action, userData) => {
-    const { id: actionID, actionType, injectCaptchaHandler } = action;
-    try {
-        const urlResult = buildUrl(action, userData);
-        if (urlResult instanceof ErrorResponse) {
-            return urlResult;
-        }
-
-        const codeToInject = injectCaptchaHandler ? getSupportingCodeToInject(injectCaptchaHandler) : null;
-        const response = {
-            ...urlResult.success.response,
-            ...(codeToInject && { code: codeToInject }),
-        };
+export function navigate(action, userData) {
+    const { id: actionID, actionType } = action;
+    const urlResult = buildUrl(action, userData);
+    if (urlResult instanceof ErrorResponse) {
+        return urlResult;
+    }
 
-        return new SuccessResponse({ actionID, actionType, response });
-    } catch (e) {
-        return new ErrorResponse({ actionID, message: `[navigate] ${e.message}` });
+    const codeToInjectResponse = getSupportingCodeToInject(action);
+    if (codeToInjectResponse instanceof ErrorResponse) {
+        return codeToInjectResponse;
     }
-};
+
+    const response = {
+        ...urlResult.success.response,
+        ...codeToInjectResponse.success.response,
+    };
+
+    return new SuccessResponse({ actionID, actionType, response });
+}

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

@@ -7,18 +7,25 @@ import { captchaFactory } from './providers/registry.js';
 /**
  * Returns the supporting code to inject for the given captcha type
  *
- * @param {import('../types.js').PirAction['captchaType']} captchaType
- * @return string
- * @throws {Error}
+ * @param {import('../types.js').PirAction} action
+ * @return {import('../types.js').ActionResponse}
  */
-export const getSupportingCodeToInject = (captchaType) => {
+export function getSupportingCodeToInject(action) {
+    const { id: actionID, actionType, injectCaptchaHandler: captchaType } = action;
+    if (!captchaType) {
+        return new SuccessResponse({ actionID, actionType, response: {} });
+    }
+
     const captchaProvider = captchaFactory.getProviderByType(captchaType);
     if (!captchaProvider) {
-        throw new Error(`[injectCaptchaHandler] could not find captchaProvider with type ${captchaType}`);
+        return new ErrorResponse({
+            actionID,
+            message: `[injectCaptchaHandler] could not find captchaProvider with type ${captchaType}`,
+        });
     }
 
-    return captchaProvider.getSupportingCodeToInject();
-};
+    return new SuccessResponse({ actionID, actionType, response: { code: captchaProvider.getSupportingCodeToInject() } });
+}
 
 /**
  * Gets the captcha information to send to the backend
@@ -27,7 +34,7 @@ export const getSupportingCodeToInject = (captchaType) => {
  * @param {Document | HTMLElement} root
  * @return {import('../types.js').ActionResponse}
  */
-export const getCaptchaInfo = (action, root = document) => {
+export function getCaptchaInfo(action, root = document) {
     const { id: actionID, selector, actionType, captchaType } = action;
     try {
         if (!selector) {
@@ -54,7 +61,7 @@ export const getCaptchaInfo = (action, root = document) => {
     } catch (e) {
         return new ErrorResponse({ actionID, message: `[getCaptchaInfo] ${e.message}` });
     }
-};
+}
 
 /**
  * Takes the solved captcha token and injects it into the page to solve the captcha
@@ -64,7 +71,7 @@ export const getCaptchaInfo = (action, root = document) => {
  * @param {Document} root
  * @return {import('../types.js').ActionResponse}
  */
-export const solveCaptcha = (action, token, root = document) => {
+export function solveCaptcha(action, token, root = document) {
     const { id: actionID, actionType, captchaType } = action;
     try {
         if (!captchaType) {
@@ -76,7 +83,11 @@ export const solveCaptcha = (action, token, root = document) => {
             throw new Error(`[solveCaptcha] cannot solve captcha with type ${captchaType}`);
         }
 
-        captchaSolveProvider.injectToken(root, token);
+        const isTokenInjected = captchaSolveProvider.injectToken(root, token);
+        if (!isTokenInjected) {
+            throw new Error(`[solveCaptcha] could not inject token for captcha with type ${captchaType}`);
+        }
+
         return new SuccessResponse({
             actionID,
             actionType,
@@ -85,4 +96,4 @@ export const solveCaptcha = (action, token, root = document) => {
     } catch (e) {
         return new ErrorResponse({ actionID, message: `[solveCaptcha] ${e.message}` });
     }
-};
+}

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

@@ -8,10 +8,9 @@ export class CaptchaFactory {
 
     /**
      * Register a captcha provider
-     * @param {typeof import('./providers/provider.interface').CaptchaProvider} ProviderClass
+     * @param {import('./providers/provider.interface').CaptchaProvider} provider - The provider to register
      */
-    registerProvider(ProviderClass) {
-        const provider = new ProviderClass();
+    registerProvider(provider) {
         this.providers.set(provider.getType(), provider);
     }
 

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

@@ -8,7 +8,7 @@ import { captchaFactory } from './providers/registry';
  * @return {import('./providers/provider.interface.js').CaptchaProvider}
  * @throws {Error}
  */
-export const getCaptchaProvider = (captchaDiv, captchaType) => {
+export function getCaptchaProvider(captchaDiv, captchaType) {
     const captchaProvider = captchaFactory.getProviderByType(captchaType);
     if (!captchaProvider) {
         throw new Error(`[getCaptchaProvider] could not find captchaProvider with type ${captchaType}`);
@@ -29,7 +29,7 @@ export const getCaptchaProvider = (captchaDiv, captchaType) => {
     }
 
     return detectedProvider;
-};
+}
 
 /**
  * Gets the captcha provider for the solveCaptcha action
@@ -38,7 +38,7 @@ export const getCaptchaProvider = (captchaDiv, captchaType) => {
  * @return {import('./providers/provider.interface.js').CaptchaProvider}
  * @throws {Error}
  */
-export const getCaptchaSolveProvider = (root, captchaType) => {
+export function getCaptchaSolveProvider(root, captchaType) {
     const captchaProvider = captchaFactory.getProviderByType(captchaType);
     if (!captchaProvider) {
         throw new Error(`[getCaptchaSolveProvider] could not find captchaProvider with type ${captchaType}`);
@@ -59,4 +59,4 @@ export const getCaptchaSolveProvider = (root, captchaType) => {
     }
 
     return detectedProvider;
-};
+}

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

@@ -1,6 +1,8 @@
-import { CaptchaProvider } from './provider.interface';
-
-export class CloudFlareTurnstileProvider extends CaptchaProvider {
+/**
+ * @import { CaptchaProvider } from './provider.interface';
+ * @implements {CaptchaProvider}
+ */
+export class CloudFlareTurnstileProvider {
     getType() {
         return 'cloudflareTurnstile';
     }

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

@@ -2,12 +2,12 @@ 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';
 
 /**
- * Provider for hCaptcha
+ * @import { CaptchaProvider } from './provider.interface';
+ * @implements {CaptchaProvider}
  */
-export class HCaptchaProvider extends CaptchaProvider {
+export class HCaptchaProvider {
     #CAPTCHA_URL = 'https://newassets.hcaptcha.com/captcha';
     #CAPTCHA_RESPONSE_ELEMENT_NAME = 'h-captcha-response';
 
@@ -41,6 +41,10 @@ export class HCaptchaProvider extends CaptchaProvider {
         return siteKey;
     }
 
+    getSupportingCodeToInject() {
+        return null;
+    }
+
     /**
      * @param {string} token - The solved captcha token
      */

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

@@ -1,28 +1,37 @@
-import { CaptchaProvider } from './provider.interface';
 import { getElementByName, getElementWithSrcStart } from '../../utils/utils';
 import { getSiteKeyFromSearchParam } from '../utils/sitekey';
 import { stringifyFunction } from '../utils/stringify-function';
 import { injectTokenIntoElement } from '../utils/token';
 // TODO move on the same folder level once we deprecate the existing captcha scripts
 import { captchaCallback } from '../../actions/captcha-callback';
 
-export class ReCaptchaV2Provider extends CaptchaProvider {
-    getType() {
-        return 'recaptcha2';
-    }
+// define the config below to reuse it in the class
+/**
+ * @typedef {Object} ReCaptchaProviderConfig
+ * @property {string} type - The captcha type
+ * @property {string} providerUrl - The captcha provider URL
+ * @property {string} responseElementName - The name of the captcha response element
+ */
 
+/**
+ * @import { CaptchaProvider } from './provider.interface';
+ * @implements {CaptchaProvider}
+ */
+export class ReCaptchaProvider {
     /**
-     * @protected
+     * @type {ReCaptchaProviderConfig}
      */
-    getCaptchaProviderUrl() {
-        return 'https://www.google.com/recaptcha/api2';
-    }
+    #config;
 
     /**
-     * @protected
+     * @param {ReCaptchaProviderConfig} config
      */
-    getCaptchaResponseElementName() {
-        return 'g-recaptcha-response';
+    constructor(config) {
+        this.#config = config;
+    }
+
+    getType() {
+        return this.#config.type;
     }
 
     /**
@@ -40,6 +49,10 @@ export class ReCaptchaV2Provider extends CaptchaProvider {
         return getSiteKeyFromSearchParam({ captchaElement: this._getCaptchaElement(captchaContainerElement), siteKeyAttrName: 'k' });
     }
 
+    getSupportingCodeToInject() {
+        return null;
+    }
+
     /**
      * @param {string} token
      */
@@ -55,22 +68,22 @@ export class ReCaptchaV2Provider extends CaptchaProvider {
      * @param {Document} root
      */
     canSolve(root) {
-        return !!getElementByName(root, this.getCaptchaResponseElementName());
+        return !!getElementByName(root, this.#config.responseElementName);
     }
 
     /**
      * @param {Document} root
      * @param {string} token
      */
     injectToken(root, token) {
-        return injectTokenIntoElement({ root, elementName: this.getCaptchaResponseElementName(), token });
+        return injectTokenIntoElement({ root, elementName: this.#config.responseElementName, token });
     }
 
     /**
      * @private
      * @param {HTMLElement} captchaContainerElement
      */
     _getCaptchaElement(captchaContainerElement) {
-        return getElementWithSrcStart(captchaContainerElement, this.getCaptchaProviderUrl());
+        return getElementWithSrcStart(captchaContainerElement, this.#config.providerUrl);
     }
 }

injected/src/features/broker-protection/captcha-services/providers/recaptcha-v2.js renamed to injected/src/features/broker-protection/captcha-services/providers/recaptcha.js

@@ -1,14 +1,27 @@
 import { CaptchaFactory } from '../factory';
-import { ReCaptchaV2Provider } from './recaptcha-v2';
-import { ReCaptchaEnterpriseProvider } from './recaptcha-enterprise';
+import { ReCaptchaProvider } from './recaptcha';
 import { CloudFlareTurnstileProvider } from './cloudflare-turnstile';
 import { HCaptchaProvider } from './hcaptcha';
 
 const captchaFactory = new CaptchaFactory();
 
-captchaFactory.registerProvider(ReCaptchaV2Provider);
-captchaFactory.registerProvider(ReCaptchaEnterpriseProvider);
-captchaFactory.registerProvider(CloudFlareTurnstileProvider);
-captchaFactory.registerProvider(HCaptchaProvider);
+captchaFactory.registerProvider(
+    new ReCaptchaProvider({
+        type: 'recaptcha2',
+        providerUrl: 'https://www.google.com/recaptcha/api2',
+        responseElementName: 'g-recaptcha-response',
+    }),
+);
+
+captchaFactory.registerProvider(
+    new ReCaptchaProvider({
+        type: 'recaptchaEnterprise',
+        providerUrl: 'https://www.google.com/recaptcha/enterprise',
+        responseElementName: 'g-recaptcha-response',
+    }),
+);
+
+captchaFactory.registerProvider(new CloudFlareTurnstileProvider());
+captchaFactory.registerProvider(new HCaptchaProvider());
 
 export { captchaFactory };

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

@@ -9,7 +9,7 @@ import { getUrlParameter } from '../../utils/url';
  * @returns {string | null} The site key extracted from the captcha element's URL or null if not found
  * @throws {Error}
  */
-export const getSiteKeyFromSearchParam = ({ captchaElement, siteKeyAttrName }) => {
+export function getSiteKeyFromSearchParam({ captchaElement, siteKeyAttrName }) {
     if (!captchaElement) {
         throw Error('[getSiteKeyFromSearchParam] could not find captcha');
     }
@@ -19,4 +19,4 @@ export const getSiteKeyFromSearchParam = ({ captchaElement, siteKeyAttrName }) =
     }
 
     return getUrlParameter(String(captchaElement.src), siteKeyAttrName);
-};
+}

injected/src/features/broker-protection/captcha-services/utils/sitekey.js

@@ -7,12 +7,12 @@ import { safeCall } from '../../utils/safe-call';
  * @param {Object} params.args - The arguments to pass to the function
  * @returns {string|null} - The stringified function
  */
-export const stringifyFunction = ({ functionName, functionBody, args }) => {
+export function stringifyFunction({ functionName, functionBody, args }) {
     return safeCall(
         () => `;(function(args) {
         ${functionBody.toString()};
         ${functionName}(args);
     })(${JSON.stringify(args)});`,
         { errorMessage: `[stringifyFunction] error stringifying function ${functionName}` },
     );
-};
+}