chore: adds call redirect from iab to mockServer

[christopherferreira9]

Description

Enable E2E mock server interception for the in-app browser (WebView). Previously, API calls made from websites loaded in the WebView were not being intercepted by the mock server during E2E tests, causing tests to hit live endpoints.

Problem

The existing mock server implementation patches fetch and XMLHttpRequest in the React Native JavaScript context (shim.js). However, the WebView runs in a separate browser context with its own network stack, so these patches don't affect WebView requests.

Solution

This PR adds two complementary interception mechanisms for the WebView:

1. JavaScript Injection - Inject a script that patches window.fetch and window.XMLHttpRequest within the WebView context, routing requests through the mock server proxy
2. Native Interception (Android) - Pass e2eMode and mockServerUrl props to the WebView component to enable native-level request interception via shouldInterceptRequest (requires updated @metamask/react-native-webview)

Changes

app/core/EntryScriptProxyE2E.ts (New File)

• Creates the JavaScript injection script that patches fetch/XHR in WebView context
• Mirrors the logic from shim.js for consistency (health check, host fallback, proxy URL format)
• Handles platform-specific port configuration (Android uses fallback + adb reverse, iOS uses LaunchArguments)

app/components/Views/BrowserTab/BrowserTab.tsx

• Import isE2E and EntryScriptProxyE2E
• Inject the E2E proxy script before other scripts in E2E mode
• Pass e2eMode and mockServerUrl props to WebView for native interception

tests/api-mocking/MockServerE2E.ts

• Enable CORS on the mock server ({ cors: true }) to allow cross-origin requests from WebView
  scripts/build.sh

Example

With this change we can now see live calls being catch on the mock server coming from the IAB.

14:55:58.501 detox[25791] i [E2E Framework] [WARN] [MockServer] Request going to live server: https://m.youtube.com/youtubei/v1/guide?prettyPrint=false
14:55:58.968 detox[25791] i [E2E Framework] [WARN] [MockServer] Request going to live server: https://fonts.gstatic.com/s/i/youtube_outline_experimental/alert_bubble/v2/24px.svg
14:55:58.975 detox[25791] i [E2E Framework] [WARN] [MockServer] Request going to live server: https://fonts.gstatic.com/s/i/youtube_outline_experimental/arrow_left/v8/24px.svg

Dependencies

This PR requires an updated version of @metamask/react-native-webview with native E2E interception support. See: MetaMask/react-native-webview-mm#78

Changelog

CHANGELOG entry: Added the ability to intercept calls coming from the inapp browser on E2E

Related issues

Fixes:

Manual testing steps

• Verified WebView requests are routed through mock server proxy
• Verified health check connects successfully with CORS enabled
• Verified non-E2E builds are unaffected

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: FlaskBuildTests, SmokeNetworkExpansion, SmokeMultiChainAPI, SmokeNetworkAbstractions, SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 85%

click to see 🤖 AI reasoning details

E2E Test Selection:
This PR adds E2E testing infrastructure for WebView request interception:

1. EntryScriptProxyE2E.ts (new file) - Creates a proxy script that patches fetch and XMLHttpRequest in WebViews to route requests through the mock server during E2E tests. This is injected into the WebView before any page scripts run.

2. MockServerE2E.ts - Small but important change adding { cors: true } to the mock server initialization, enabling CORS support for cross-origin requests from WebViews.

3. BrowserTab.tsx - Modifies the core BrowserTab component to inject the E2E proxy script when in E2E mode (isE2E). Also adds e2eMode and mockServerUrl props to the WebView for native request interception on Android.

The BrowserTab component is the core WebView component used for all browser-based interactions in the app, including:

• Snaps functionality (installing, interacting with snaps)
• dApp connections and permissions
• Multi-chain provider connections
• Signature requests from dApps

Since this modifies E2E testing infrastructure that affects how the browser/WebView works during tests, I'm selecting tags for tests that use browser functionality:

• FlaskBuildTests: Snaps tests use the browser for snap installation and interaction
• SmokeNetworkExpansion: Multi-chain provider tests use browser for dApp connections
• SmokeMultiChainAPI: CAIP-25 session API tests use browser for dApp permissions
• SmokeNetworkAbstractions: Network permission tests use browser for dApp chain permissions
• SmokeConfirmations: dApp interactions trigger confirmations (dependent tag for SmokeNetworkExpansion)

The changes are guarded by isE2E checks, so they only affect E2E test runs and not production code. However, since this is infrastructure that could affect how tests interact with dApps, it's important to validate the changes work correctly.

Performance Test Selection:
The changes are specifically for E2E testing infrastructure (Detox tests) and do not affect app performance in production. The new EntryScriptProxyE2E is only active when isE2E is true, and the MockServerE2E changes only affect the test mock server. The BrowserTab changes are guarded by isE2E checks and don't impact normal app operation. No performance tests are needed as these changes don't affect app startup, rendering, or user-facing performance.

View GitHub Actions results