Merge branch 'main' into max/dev-firefox-fix

Author: muodov

.github/workflows/asana.yml

@@ -15,9 +15,11 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
-            - uses: sammacbeth/action-asana-sync@v6
+            - uses: duckduckgo/action-asana-sync@v9
               with:
                   ASANA_ACCESS_TOKEN: ${{ secrets.ASANA_ACCESS_TOKEN }}
                   ASANA_WORKSPACE_ID: ${{ secrets.ASANA_WORKSPACE_ID }}
                   ASANA_PROJECT_ID: '1208598406046969'
+                  GITHUB_PAT: ${{ secrets.GH_RO_PAT }}
                   USER_MAP: ${{ vars.USER_MAP }}
+                  ASSIGN_PR_AUTHOR: 'true'

CODEOWNERS

@@ -7,8 +7,8 @@ injected/src/element-hiding.js @duckduckgo/content-scope-scripts-owners @jonatha
 injected/src/features/click-to-load.js @duckduckgo/content-scope-scripts-owners @kzar @ladamski @franfaccin @jonathanKingston @shakyShane
 injected/src/features/click-to-load/ @duckduckgo/content-scope-scripts-owners @kzar @ladamski @franfaccin @jonathanKingston @shakyShane
 injected/src/locales/click-to-load/ @duckduckgo/content-scope-scripts-owners @kzar @ladamski @franfaccin @jonathanKingston @shakyShane
-injected/src/features/broker-protection.js @duckduckgo/content-scope-scripts-owners @brianhall @shakyShane
-injected/src/features/broker-protection/ @duckduckgo/content-scope-scripts-owners @brianhall @shakyShane
+injected/src/features/broker-protection.js @duckduckgo/content-scope-scripts-owners @brianhall @shakyShane @madblex
+injected/src/features/broker-protection/ @duckduckgo/content-scope-scripts-owners @brianhall @shakyShane @madblex
 injected/src/features/autofill-password-import.js @duckduckgo/content-scope-scripts-owners @dbajpeyi
 
 # Platform owners

injected/integration-test/broker-protection-tests/broker-protection-captcha.spec.js

@@ -334,19 +334,9 @@ test.describe('Broker Protection communications', () => {
         });
     });
     test.describe('Executes action and sends success message', () => {
-        test('buildUrl with useEnhancedCaptchaSystem: "enabled"', async ({ page }, workerInfo) => {
+        test('buildUrl', async ({ page }, workerInfo) => {
             const dbp = BrokerProtectionPage.create(page, workerInfo.project.use);
-            await dbp.withFeatureConfig(BROKER_PROTECTION_CONFIGS.enhancedCaptchaSystemEnabled);
-            await dbp.navigatesTo('results.html');
-            await dbp.receivesAction('navigate.json');
-            const response = await dbp.collector.waitForMessage('actionCompleted');
-            dbp.isSuccessMessage(response);
-            dbp.isUrlMatch(response[0].payload.params.result.success.response);
-        });
-
-        test('buildUrl with useEnhancedCaptchaSystem: "disabled"', async ({ page }, workerInfo) => {
-            const dbp = BrokerProtectionPage.create(page, workerInfo.project.use);
-            await dbp.withFeatureConfig(BROKER_PROTECTION_CONFIGS.enhancedCaptchaSystemDisabled);
+            await dbp.withFeatureConfig(BROKER_PROTECTION_CONFIGS.default);
             await dbp.navigatesTo('results.html');
             await dbp.receivesAction('navigate.json');
             const response = await dbp.collector.waitForMessage('actionCompleted');

injected/integration-test/broker-protection-tests/broker-protection.spec.js

@@ -1,16 +1,5 @@
 import { createFeatureConfig } from '../mocks/broker-protection/feature-config';
 
 export const BROKER_PROTECTION_CONFIGS = Object.freeze({
-    enhancedCaptchaSystemEnabled: createFeatureConfig({
-        state: 'enabled',
-        settings: {
-            useEnhancedCaptchaSystem: 'enabled',
-        },
-    }),
-    enhancedCaptchaSystemDisabled: createFeatureConfig({
-        state: 'enabled',
-        settings: {
-            useEnhancedCaptchaSystem: 'disabled',
-        },
-    }),
+    default: createFeatureConfig(),
 });

injected/integration-test/broker-protection-tests/tests-config.js

@@ -94,7 +94,7 @@ test.describe('Duck Player - Drawer UI variant', () => {
             await overlays.mobile.clicksOnVideoThumbnail();
             await overlays.pixels.sendsPixels([
                 { pixelName: 'overlay', params: {} },
-                { pixelName: 'play.do_not_use.thumbnail', params: {} },
+                { pixelName: 'play.do_not_use.dismiss', params: {} },
             ]);
             await overlays.userSettingWasNotUpdated();
         });
@@ -112,7 +112,7 @@ test.describe('Duck Player - Drawer UI variant', () => {
             await overlays.mobile.clicksOnDrawerBackdrop();
             await overlays.pixels.sendsPixels([
                 { pixelName: 'overlay', params: {} },
-                { pixelName: 'play.do_not_use', params: {} },
+                { pixelName: 'play.do_not_use.dismiss', params: {} },
             ]);
             await overlays.userSettingWasNotUpdated();
         });

injected/integration-test/duckplayer-mobile-drawer.spec.js

@@ -34,6 +34,18 @@ export function createGetRecaptchaInfoAction(actionOverrides = {}) {
     });
 }
 
+/**
+ * @param {Partial<PirAction>} [actionOverrides]
+ */
+export function createGetImageCaptchaInfoAction(actionOverrides = {}) {
+    return createGetCaptchaInfoAction({
+        action: {
+            captchaType: 'image',
+            ...actionOverrides,
+        },
+    });
+}
+
 /**
  * @param {object} params
  * @param {Omit<PirAction, 'id' | 'actionType'>} params.action
@@ -66,6 +78,18 @@ export function createSolveRecaptchaAction(actionOverrides = {}) {
     });
 }
 
+/**
+ * @param {Partial<PirAction>} [actionOverrides]
+ */
+export function createSolveImageCaptchaAction(actionOverrides = {}) {
+    return createSolveCaptchaAction({
+        action: {
+            captchaType: 'image',
+            ...actionOverrides,
+        },
+    });
+}
+
 // Captcha responses
 
 /**

injected/integration-test/mocks/broker-protection/captcha.js

@@ -3,7 +3,6 @@
  * @param {'enabled' | 'disabled'} [brokerProtection.state] - optional state of the broker protection feature
  * @param {string[]} [brokerProtection.exceptions] - optional list of exceptions
  * @param {object} [brokerProtection.settings] - optional settings
- * @param {'enabled' | 'disabled'} [brokerProtection.settings.useEnhancedCaptchaSystem] - optional flag to use new action handlers
  */
 export function createFeatureConfig(brokerProtection = {}) {
     return {

injected/integration-test/mocks/broker-protection/feature-config.js

@@ -70,8 +70,8 @@ export class BrokerProtectionPage {
      * @return {Promise<void>}
      */
     async isCaptchaTokenFilled(responseElementSelector) {
-        const captchaTextArea = await this.page.$(responseElementSelector);
-        const captchaToken = await captchaTextArea?.evaluate((element) => element.innerHTML);
+        const captchaTarget = await this.page.$(responseElementSelector);
+        const captchaToken = await captchaTarget?.evaluate((element) => ('value' in element ? element.value : element.innerHTML));
         expect(captchaToken).toBe('test_token');
     }
 
@@ -99,7 +99,17 @@ export class BrokerProtectionPage {
      */
     isCaptchaMatch(response, { captchaType, targetPage }) {
         const expectedResponse = createCaptchaResponse({ captchaType, targetPage });
-        expect(response).toStrictEqual(expectedResponse);
+
+        switch (captchaType) {
+            case 'image':
+                // Validate that the correct keys are present in the response
+                expect(Object.keys(response).sort()).toStrictEqual(Object.keys(expectedResponse).sort());
+                // Validate that the siteKey looks like a base64 encoded image
+                expect(response.siteKey).toMatch(/^data:image\/jpeg;base64,/);
+                break;
+            default:
+                expect(response).toStrictEqual(expectedResponse);
+        }
     }
 
     async isCaptchaError() {

injected/integration-test/page-objects/broker-protection.js

@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@canvas/image-data": "^1.0.0",
-    "@duckduckgo/privacy-configuration": "github:duckduckgo/privacy-configuration#main",
+    "@duckduckgo/privacy-configuration": "github:duckduckgo/privacy-configuration#ca6101bb972756a87a8960ffb3029f603052ea9d",
     "@fingerprintjs/fingerprintjs": "^4.5.1",
     "@types/chrome": "^0.0.308",
     "@types/jasmine": "^5.1.7",

injected/integration-test/test-pages/broker-protection/pages/image-captcha.html

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

injected/package.json

@@ -1,31 +1,6 @@
-import { extract } from './extract';
-import { fillForm } from './fill-form';
-import { click } from './click';
-import { expectation } from './expectation';
-import { navigate } from './navigate';
-import { buildUrl } from './build-url';
-import * as captchaHandlers from '../captcha-services/captcha.service';
-import * as deprecatedCaptchaHandlers from './captcha-deprecated';
-
-/**
- * Returns the captcha handlers based on the useEnhancedCaptchaSystem flag
- * @param {Object} params
- * @param {boolean} params.useEnhancedCaptchaSystem
- */
-export function resolveActionHandlers({ useEnhancedCaptchaSystem }) {
-    return {
-        extract,
-        fillForm,
-        click,
-        expectation,
-        ...(useEnhancedCaptchaSystem
-            ? {
-                  navigate,
-                  ...captchaHandlers,
-              }
-            : {
-                  navigate: buildUrl,
-                  ...deprecatedCaptchaHandlers,
-              }),
-    };
-}
+export { extract } from './extract.js';
+export { fillForm } from './fill-form.js';
+export { click } from './click.js';
+export { expectation } from './expectation.js';
+export { navigate } from './navigate.js';
+export { getCaptchaInfo, solveCaptcha } from '../captcha-services/captcha.service.js';

injected/src/features/broker-protection.js

@@ -51,9 +51,9 @@ export function getSupportingCodeToInject(action) {
  *
  * @param {import('../types.js').PirAction} action
  * @param {Document | HTMLElement} root
- * @return {import('../types.js').ActionResponse}
+ * @return {Promise<import('../types.js').ActionResponse>}
  */
-export function getCaptchaInfo(action, root = document) {
+export async function getCaptchaInfo(action, root = document) {
     const { id: actionID, actionType, captchaType, selector } = action;
     if (!captchaType) {
         // ensures backward compatibility with old actions
@@ -72,7 +72,7 @@ export function getCaptchaInfo(action, root = document) {
         return createError(captchaProvider.error.message);
     }
 
-    const captchaIdentifier = captchaProvider.getCaptchaIdentifier(captchaContainer);
+    const captchaIdentifier = await captchaProvider.getCaptchaIdentifier(captchaContainer);
     if (!captchaIdentifier) {
         return createError(`could not extract captcha identifier from the container with selector ${selector}`);
     }

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

@@ -22,7 +22,7 @@ export class CloudFlareTurnstileProvider {
      */
     getCaptchaIdentifier(_captchaContainerElement) {
         // TODO: Implement
-        return null;
+        return Promise.resolve(null);
     }
 
     getSupportingCodeToInject() {

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

@@ -22,7 +22,7 @@ export class HCaptchaProvider {
      */
     getCaptchaIdentifier(_captchaContainerElement) {
         // TODO: Implement
-        return null;
+        return Promise.resolve(null);
     }
 
     getSupportingCodeToInject() {

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

@@ -0,0 +1,90 @@
+import { PirError } from '../../types';
+import { svgToBase64Jpg, imageToBase64 } from '../utils/image';
+import { injectTokenIntoElement } from '../utils/token';
+import { isElementType } from '../utils/element';
+import { stringifyFunction } from '../utils/stringify-function';
+
+/**
+ * @import { CaptchaProvider } from './provider.interface';
+ * @implements {CaptchaProvider}
+ */
+export class ImageProvider {
+    getType() {
+        return 'image';
+    }
+
+    /**
+     * @param {HTMLElement} captchaImageElement - The captcha image element
+     */
+    isSupportedForElement(captchaImageElement) {
+        if (!captchaImageElement) {
+            return false;
+        }
+
+        return isElementType(captchaImageElement, ['img', 'svg']);
+    }
+
+    /**
+     * @param {HTMLElement} captchaImageElement - The captcha image element
+     */
+    async getCaptchaIdentifier(captchaImageElement) {
+        if (isSVGElement(captchaImageElement)) {
+            return await svgToBase64Jpg(captchaImageElement);
+        }
+
+        if (isImgElement(captchaImageElement)) {
+            return imageToBase64(captchaImageElement);
+        }
+
+        return PirError.create(
+            `[ImageProvider.getCaptchaIdentifier] could not extract Base64 from image with tag name: ${captchaImageElement.tagName}`,
+        );
+    }
+
+    getSupportingCodeToInject() {
+        return null;
+    }
+
+    /**
+     * @param {HTMLElement} captchaInputElement - The captcha input element
+     */
+    canSolve(captchaInputElement) {
+        return isElementType(captchaInputElement, ['input', 'textarea']);
+    }
+
+    /**
+     * @param {HTMLInputElement} captchaInputElement - The captcha input element
+     * @param {string} token - The solved captcha token
+     */
+    injectToken(captchaInputElement, token) {
+        return injectTokenIntoElement({ captchaInputElement, token });
+    }
+
+    /**
+     * @param {HTMLElement} _captchaInputElement - The element containing the captcha
+     * @param {string} _token - The solved captcha token
+     */
+    getSolveCallback(_captchaInputElement, _token) {
+        return stringifyFunction({
+            functionBody: function callbackNoop() {},
+            functionName: 'callbackNoop',
+            args: {},
+        });
+    }
+}
+
+/**
+ * @param {HTMLElement} element
+ * @return {element is SVGElement}
+ */
+function isSVGElement(element) {
+    return isElementType(element, 'svg');
+}
+
+/**
+ * @param {HTMLElement} element
+ * @return {element is HTMLImageElement}
+ */
+function isImgElement(element) {
+    return isElementType(element, 'img');
+}

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

@@ -28,10 +28,10 @@ export class CaptchaProvider {
      * Extracts the site key from the captcha container element
      * @abstract
      * @param {HTMLElement} _captchaContainerElement - The element containing the captcha
-     * @returns {PirError | string | null} The site key or null if not found
+     * @returns {Promise<PirError | string | null>} The site key or null if not found
      */
     getCaptchaIdentifier(_captchaContainerElement) {
-        throw new Error('getCaptchaIdentifier() missing implementation');
+        return Promise.reject(new Error('getCaptchaIdentifier() missing implementation'));
     }
 
     /**

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

@@ -46,9 +46,11 @@ export class ReCaptchaProvider {
      * @param {HTMLElement} captchaContainerElement
      */
     getCaptchaIdentifier(captchaContainerElement) {
-        return safeCallWithError(
-            () => getSiteKeyFromSearchParam({ captchaElement: this._getCaptchaElement(captchaContainerElement), siteKeyAttrName: 'k' }),
-            { errorMessage: '[ReCaptchaProvider.getCaptchaIdentifier] could not extract site key' },
+        return Promise.resolve(
+            safeCallWithError(
+                () => getSiteKeyFromSearchParam({ captchaElement: this._getCaptchaElement(captchaContainerElement), siteKeyAttrName: 'k' }),
+                { errorMessage: '[ReCaptchaProvider.getCaptchaIdentifier] could not extract site key' },
+            ),
         );
     }
 

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

@@ -1,5 +1,6 @@
 import { CaptchaFactory } from '../factory';
 import { ReCaptchaProvider } from './recaptcha';
+import { ImageProvider } from './image';
 
 const captchaFactory = new CaptchaFactory();
 
@@ -19,4 +20,6 @@ captchaFactory.registerProvider(
     }),
 );
 
+captchaFactory.registerProvider(new ImageProvider());
+
 export { captchaFactory };