bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-10 05:30:01 +00:00
Code Issues Releases Wiki Activity

[PM-19814] Add the phishing warning page to the Angular popup.

Browse Source
This commit is contained in:
Jimmy Vo
2025-04-09 17:22:34 -04:00
parent 18517aa00e
commit 9c5c8f00ba
9 changed files with 106 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/browser/src/manifest.v3.json
View File

@@ -175,7 +175,6 @@
"overlay/menu.html",
"overlay/button.html",
"overlay/list.html",
"phishing/warning.html",
"popup/fonts/*"
],
"matches": ["<all_urls>"]

BIN
apps/browser/src/phishing-detection/images/phishing-site-detected.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

15
apps/browser/src/phishing-detection/pages/phishing-warning.html Normal file
View File

@@ -0,0 +1,15 @@
<div>
<div>🏢⚠️</div>
<div>
<label for="url">Phishing url</label>
<input id="url" value="https://catphish.gotcha.io" readonly />
</div>
<a onclick="alert('Exiting...')"> Exit page </a>
</div>
<div>
<span>Question?</span>
<a href="#">Action here</a>
</div>

68
apps/browser/src/phishing-detection/pages/phishing-warning.ts Normal file
View File

@@ -0,0 +1,68 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { CommonModule } from "@angular/common";
import { Component, OnDestroy, OnInit } from "@angular/core";
import { RouterModule } from "@angular/router";
import { Subject } from "rxjs";
import { AnonLayoutComponent } from "@bitwarden/auth/angular";
import { Icon, IconModule } from "@bitwarden/components";
import { PopOutComponent } from "../../platform/popup/components/pop-out.component";
import { PopupHeaderComponent } from "../../platform/popup/layout/popup-header.component";
import { PopupPageComponent } from "../../platform/popup/layout/popup-page.component";
@Component({
standalone: true,
templateUrl: "phishing-warning.html",
imports: [
AnonLayoutComponent,
CommonModule,
IconModule,
PopOutComponent,
PopupPageComponent,
PopupHeaderComponent,
RouterModule,
PopupPageComponent,
],
})
export class PhishingWarning implements OnInit, OnDestroy {
private destroy$ = new Subject<void>();
protected showAcctSwitcher: boolean;
protected showBackButton: boolean;
protected showLogo: boolean = true;
protected hideIcon: boolean = false;
protected pageTitle: string;
protected pageSubtitle: string;
protected pageIcon: Icon;
protected showReadonlyHostname: boolean;
protected maxWidth: "md" | "3xl";
protected hasLoggedInAccount: boolean = false;
protected hideFooter: boolean;
protected theme: string;
constructor() {}
async ngOnInit(): Promise<void> {
this.resetData();
}
private resetData() {
this.pageTitle = "Jimmy pageTitle";
this.pageSubtitle = "Jimmy pageSubtitle";
this.showReadonlyHostname = null;
this.showAcctSwitcher = null;
this.showBackButton = null;
this.showLogo = true;
this.maxWidth = null;
this.hideFooter = null;
}
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
}

87
apps/browser/src/phishing-detection/pages/warning.html
View File

@@ -1,87 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phishing site detected</title>
</head>
<body
style="
margin: 0;
font-family: &quot;Segoe UI&quot;, sans-serif;
background-color: #f2f5f7;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-direction: column;
text-align: center;
"
>
<img
src="https://bitwarden.com/assets/images/branding/wordmark-horizontal-blue.svg"
alt="Bitwarden logo"
style="margin: 20px auto; width: 150px"
/>
<div
style="
background-color: white;
padding: 40px 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
max-width: 400px;
margin: 20px auto;
"
>
<div style="font-size: 48px; margin-bottom: 10px">🏢⚠️</div>
<h2 style="font-size: 20px; margin-bottom: 8px">Phishing site detected</h2>
<p style="color: #555; margin-bottom: 20px">
Bitwarden has prevented this page from loading.
</p>
<div style="text-align: left; margin: 20px 0">
<label for="url" style="font-size: 14px; color: #777; display: block; margin-bottom: 4px"
>Phishing url</label
>
<input
id="url"
value="https://catphish.gotcha.io"
readonly
style="
width: 100%;
padding: 10px;
font-size: 14px;
border: 1px solid #c0c0c0;
border-radius: 6px;
background-color: #f0f0f0;
"
/>
</div>
<a
style="
background-color: #1d4ed8;
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
width: 100%;
margin-top: 20px;
"
onclick="alert('Exiting...')"
>
Exit page
</a>
</div>
<div style="font-size: 14px; color: #666; margin-top: 20px">
<span>Question?</span>
<a href="#" style="color: #2563eb; text-decoration: none; margin-left: 5px">Action here</a>
</div>
</body>
</html>

3
apps/browser/src/phishing-detection/trigger-phishing-detection-script-injection.ts
View File

@@ -31,11 +31,8 @@ async function loadPhishingDetectionContent() {
const url = new URL(activeUrl);
const warningUrl = chrome.runtime.getURL("phishing/warning.html");
await chrome.runtime.sendMessage({
command: PhishingDetectionCommands.RedirectToWarningPage,
url: warningUrl,
phishingHost: url.hostname,
});
}

4
apps/browser/src/platform/services/phishing-detection.service.ts
View File

@@ -227,11 +227,13 @@ export class PhishingDetectionService {
static setupRedirectToWarningPageListener(): void {
BrowserApi.addListener(chrome.runtime.onMessage, async (message, sender, sendResponse) => {
if (message.command === PhishingDetectionCommands.RedirectToWarningPage) {
const phishingWarningPage = chrome.runtime.getURL("popup/index.html#/phishing-warning");
PhishingDetectionService.logService.debug("RedirectToWarningPage handler", {
message,
phishingWarning: phishingWarningPage,
});
await chrome.tabs.update(sender.tab.id, { url: message.url });
await chrome.tabs.update(sender.tab.id, { url: phishingWarningPage });
}
});
}

20
apps/browser/src/popup/app-routing.module.ts
View File

@@ -41,6 +41,7 @@ import {
DeviceVerificationIcon,
UserLockIcon,
VaultIcon,
BitwardenLogo,
} from "@bitwarden/auth/angular";
import { LockComponent } from "@bitwarden/key-management-ui";
import {
@@ -65,6 +66,7 @@ import { BlockedDomainsComponent } from "../autofill/popup/settings/blocked-doma
import { ExcludedDomainsComponent } from "../autofill/popup/settings/excluded-domains.component";
import { NotificationsSettingsComponent } from "../autofill/popup/settings/notifications.component";
import { PremiumV2Component } from "../billing/popup/settings/premium-v2.component";
import { PhishingWarning } from "../phishing-detection/pages/phishing-warning";
import BrowserPopupUtils from "../platform/popup/browser-popup-utils";
import { popupRouterCacheGuard } from "../platform/popup/view-cache/popup-router-cache.service";
import { CredentialGeneratorHistoryComponent } from "../tools/popup/generator/credential-generator-history.component";
@@ -141,6 +143,24 @@ const routes: Routes = [
canActivate: [fido2AuthGuard],
data: { elevation: 1 } satisfies RouteDataProperties,
},
{
path: "",
component: AnonLayoutWrapperComponent,
children: [
{
path: "phishing-warning",
component: PhishingWarning,
data: {
pageIcon: BitwardenLogo,
pageTitle: "Phishing site detected",
pageSubtitle: "Bitwarden has prevented this page from loading.",
showReadonlyHostname: true,
} satisfies AnonLayoutWrapperData,
},
],
},
{
path: "",
component: ExtensionAnonLayoutWrapperComponent,

5
apps/browser/webpack.config.js
View File

@@ -145,11 +145,6 @@ const plugins = [
filename: "overlay/list.html",
chunks: ["overlay/list"],
}),
new HtmlWebpackPlugin({
template: "./src/phishing-detection/pages/warning.html",
filename: "phishing/warning.html",
chunks: ["phishing/warning"],
}),
new CopyWebpackPlugin({
patterns: [
{