fix: Truncate URL appropriately on iOS

[smilingkylan]

Description

The purpose if this task is to fix a vulnerability whereby long URLs do not have the most important part of their URL (domain + TLD) visible in the WebView Browser URL Bar on iOS. We fix this by getting the URL bar to prioritize that portion of the URL while ellipsizing (...) the first part of the URL (protocol and subdomain, etc)

Changelog

CHANGELOG entry: Move ellipsizing of WebView URL to beginning of URLs for security reasons

Related issues

Fixes: https://github.com/MetaMask/mobile-planning/issues/2310
Mobile-planning: https://github.com/MetaMask/mobile-planning/issues/2277

Manual testing steps

Feature: WebView URL truncation / ellipsizing (...)
  Scenario: user goes to WebView / in-app browser
    Given user navigates to http://web2cryptwalletnftmlogar.metamask.com.cybersecurityresearch.live/
    When user looks at the URL in the URL bar
    Then they should see an ellipsis (...) at the BEGINNING of the URL and NOT the end of the URL

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]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 8829b2e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/995c8107-bde4-4b44-a684-372571d64239

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[Cal-L]

Instead of providing this with a child prop, is it possible to just set text property on the native prop of the text ref?

[smilingkylan]

@Cal-L I'm kinda unsure of what you're asking here. I added the activeUrl in as a fallback when the component first mounts but before the BrowserTab has done a setNativeProps call. I'm on the fence of whether we really need it or not since it begs the question of whether the user is really on a web page if it hasn't even been loaded yet. I could add it to this area but the if (props.text) will mean the changing of the inputValueRef.current won't even occur since it is guarded by the conditional:

        if (props.text) {
          inputValueRef.current = props.text;
        }
        ```

[joaoloureirop]

@Cal-L Can we resolve the conversation?

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
90.5% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
90.5% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[sethkfman]

LGTM