[PM-19814] Improved warning popup UI

[JimmyVo16]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-19814

📔 Objective

Context: This project's original idea came from an innovation sprint. This ticket is meant to improve the UI, but since the original code was never merged into main, I think we should review everything together. I wrote this doc to provide a general overview of the expected behavior.

Objectives:

1. Add a content script to check the current URL.
2. Add handlers to listen for and execute requests from the content script.
3. Add task scheduler to retrieve phishing domains and cache them.

Note: I'll address these TODOs while the main body of work is under review, so we can identify potential blockers sooner.

1. Add localization
2. Look into dynamically injecting the content script.

📸 Screenshots

Note:

1. I didn’t want to visit a real phishing site, so I modified the code to treat Reddit as a phishing site for testing.
2. The page linked from “Learn More” isn’t available yet, but that’s what the ticket specifies.

phishing.detection.test.mov

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 5.85%. Comparing base (95ea1b2) to head (2a9fdd9).
Report is 18 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (95ea1b2) and HEAD (2a9fdd9). Click for more details.

HEAD has 1 upload less than BASE

Flag	BASE (95ea1b2)	HEAD (2a9fdd9)
	2	1

Additional details and impacted files

@@             Coverage Diff             @@
##             main   #14255       +/-   ##
===========================================
- Coverage   36.87%    5.85%   -31.03%     
===========================================
  Files        3210       28     -3182     
  Lines       92568     1709    -90859     
  Branches    16610        0    -16610     
===========================================
- Hits        34137      100    -34037     
+ Misses      56017     1609    -54408     
+ Partials     2414        0     -2414     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Checkmarx One – Scan Summary & Details – c397fc0f-5ca8-44dc-ab55-e95f6a62b1af

New Issues (1)

Checkmarx found the following issues in this Pull Request

Severity	Issue	Source File / Package	Checkmarx Insight
	CVE-2025-27152	Npm-axios-1.7.9	details Recommended version: 1.8.2 Description: Axios is a promise-based HTTP client for the browser and node.js. The issue occurs when passing absolute URLs rather than protocol-relative URLs to... Attack Vector: NETWORK Attack Complexity: LOW ID: XQinIM3UOW4R3LmSU7mUhCrzl5Ou1Ata020RINTuPnk%3D Vulnerable Package

[JimmyVo16]

I am looking into pipeline issues now.

[JimmyVo16]

I'm still encountering type errors with BrowserApi.addListener despite adding types.​ All other calls to BrowserApi.addListener are using @ts-strict-ignore.

[typescript-strict-plugin] apps/browser/src/phishing-detection/background/phishing-detection.service.ts(217,7): error TS2345: Argument of type '(message: CheckUrlMessage, _: chrome.runtime.MessageSender, sendResponse: (response?: unknown) => void) => void' is not assignable to parameter of type '(...args: readonly unknown[]) => unknown'.
[typescript-strict-plugin] apps/browser/src/phishing-detection/background/phishing-detection.service.ts(237,7): error TS2345: Argument of type '(message: RedirectMessage, sender: chrome.runtime.MessageSender) => void' is not assignable to parameter of type '(...args: readonly unknown[]) => unknown'.

Other failed attempt

    const handler = (args: [RedirectMessage, chrome.runtime.MessageSender]): void => {
      const [message, sender] = args;
     // code
    };
    BrowserApi.addListener(chrome.runtime.onMessage, handler);

Result

[typescript-strict-plugin] apps/browser/src/phishing-detection/background/phishing-detection.service.ts(261,54): error TS2345: Argument of type '(args: [RedirectMessage, chrome.runtime.MessageSender]) => void' is not assignable to parameter of type '(...args: readonly unknown[]) => unknown'.

[jprusik]

The background can do this check (and the redirect) before script injection, no?

I'm not sure content script injection is the right way to go here since:

• We should be able to (I believe) do everything this script is doing in the background, avoiding messaging back and forth
• Is this content script not going to inject/evaluate until after page load (at least presently, I believe)? At that point, it may be too late for phishing protection to do it's job
  • Check out onBeforeRequest for this; we have some prior art in apps/browser/src/autofill/background/overlay-notifications.background.ts which may be helpful
• We should trust the tab/page execution context as little as possible, and this is a potentially high impact operation
• What happens if the script injection fails due to poor existing page code interaction (rare, but it happens)?
• Will notification excluded domains and blocked domains neverDomains filtering prevent this script injection?

[JimmyVo16]

The main reason for using the content script is to get the current URL. If I can get it with onBeforeRequest, then we can go down that route.

We didn't account for neverDomains. I can try adding it. I'll check how we're handling it in the browser, but if you know of any good examples, please send them my way.

[jprusik]

Yeah, I believe the background already knows the URL of the tabs. Skipping a content script injection for this would be safer, more performant, and avoid having to deal with NeverDomains.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud