Merge pull request #20881 from mozilla/fix-waf-header-config-page

fix(functional-tests): register WAF bypass header on the browser context

Author: vbudhram

packages/functional-tests/lib/fixtures/standard.ts

@@ -17,9 +17,12 @@ import { BaseTarget } from '../targets/base';
 import { TestAccountTracker } from '../testAccountTracker';
 import { PasskeyPage } from '../../pages/passkey';
 import { GleanEventsHelper } from '../glean';
+import { addWafBypassHeader } from '../waf';
 import { existsSync, readFileSync } from 'fs';
 import { join, dirname, basename } from 'path';
 
+export { addWafBypassHeader };
+
 // The DEBUG env is used to debug without the playwright inspector, like in vscode
 // see .vscode/launch.json
 const DEBUG = !!process.env.DEBUG;
@@ -35,42 +38,6 @@ export type TestOptions = {
 };
 export type WorkerOptions = { targetName: TargetName; target: ServerTarget };
 
-const CI_WAF_TOKEN = process.env.CI_WAF_TOKEN;
-
-/**
- * Adds a route handler that injects the WAF bypass header on requests to
- * FXA-owned domains only, leaving third-party origins (Stripe, hCaptcha)
- * untouched. No-op when CI_WAF_TOKEN is unset.
- */
-export async function addWafBypassHeader(page: Page, target: BaseTarget) {
-  if (!CI_WAF_TOKEN) {
-    if (target.name === 'stage' || target.name === 'production') {
-      // eslint-disable-next-line no-console
-      console.warn(
-        `⚠ CI_WAF_TOKEN is not set for target "${target.name}". Requests may be blocked by the WAF.`
-      );
-    }
-    return;
-  }
-  const fxaDomains = [
-    new URL(target.contentServerUrl).host,
-    new URL(target.authServerUrl).host,
-    new URL(target.paymentsNextUrl).host,
-    new URL(target.relierUrl).host,
-  ];
-  const pattern = new RegExp(
-    fxaDomains.map((d) => d.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')
-  );
-  await page.route(pattern, async (route) => {
-    await route.continue({
-      headers: {
-        ...route.request().headers(),
-        'fxa-ci': CI_WAF_TOKEN,
-      },
-    });
-  });
-}
-
 export const test = base.extend<TestOptions, WorkerOptions>({
   targetName: ['local', { scope: 'worker', option: true }],
 

packages/functional-tests/lib/waf.ts

@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Page } from '@playwright/test';
+import { BaseTarget } from './targets/base';
+
+const CI_WAF_TOKEN = process.env.CI_WAF_TOKEN;
+
+/**
+ * Adds a route handler that injects the WAF bypass header on requests to
+ * FXA-owned domains only, leaving third-party origins (Stripe, hCaptcha)
+ * untouched. No-op when CI_WAF_TOKEN is unset.
+ *
+ * Registered on the browser context, so it also covers pages opened later
+ * (e.g. `context().newPage()` in ConfigPage.getConfig), not just this page.
+ */
+export async function addWafBypassHeader(page: Page, target: BaseTarget) {
+  if (!CI_WAF_TOKEN) {
+    if (target.name === 'stage' || target.name === 'production') {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `⚠ CI_WAF_TOKEN is not set for target "${target.name}". Requests may be blocked by the WAF.`
+      );
+    }
+    return;
+  }
+  const fxaDomains = [
+    new URL(target.contentServerUrl).host,
+    new URL(target.authServerUrl).host,
+    new URL(target.paymentsNextUrl).host,
+    new URL(target.relierUrl).host,
+  ];
+  const pattern = new RegExp(
+    fxaDomains.map((d) => d.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')
+  );
+  await page.context().route(pattern, async (route) => {
+    await route.continue({
+      headers: {
+        ...route.request().headers(),
+        'fxa-ci': CI_WAF_TOKEN,
+      },
+    });
+  });
+}

packages/functional-tests/pages/config.ts

@@ -9,7 +9,8 @@ export class ConfigPage extends BaseLayout {
 
   async getConfig() {
     if (!this.config) {
-      // Create a new page
+      // Create a new page. The WAF bypass header is registered on the browser
+      // context (see addWafBypassHeader), so this page inherits it.
       const page = await this.page.context().newPage();
 
       await page.goto(this.baseUrl);