Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-30 17:47:44 +01:00
Code Issues Projects Releases Wiki Activity

Add support for WebAuthn to browser extension (#1379)

Browse Source
This commit is contained in:
Oscar Hinton 2021-03-17 22:14:26 +01:00 committed by GitHub
parent 24d172e3b9
commit e0f4386042
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 97 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jslib

@ -1 +1 @@
Subproject commit f80e89465ffc004705d2941301c0ffb6bfd71d1a
Subproject commit f20af0cd7c90adc07783950bed197b5d47892d6f

14
src/_locales/en/messages.json
View File

@ -798,6 +798,12 @@
"insertU2f": {
"message": "Insert your security key into your computer's USB port. If it has a button, touch it."
},
"webAuthnNewTab": {
"message": "Continue the WebAuthn 2FA verification in the new tab."
},
"webAuthnAuthenticate": {
"message": "Authenticate WebAutn"
},
"loginUnavailable": {
"message": "Login Unavailable"
},
@ -837,11 +843,11 @@
"message": "Verify with Duo Security for your organization using the Duo Mobile app, SMS, phone call, or U2F security key.",
"description": "'Duo Security' and 'Duo Mobile' are product names and should not be translated."
},
"u2fDesc": {
"message": "Use any FIDO U2F enabled security key to access your account."
"webAuthnTitle": {
"message": "FIDO2 WebAuthn"
},
"u2fTitle": {
"message": "FIDO U2F Security Key"
"webAuthnDesc": {
"message": "Use any WebAuthn enabled security key to access your account."
},
"emailTitle": {
"message": "Email"

17
src/background/main.background.ts
View File

@ -179,9 +179,6 @@ export default class MainBackground {
this.apiService = new ApiService(this.tokenService, this.platformUtilsService,
(expired: boolean) => this.logout(expired));
this.userService = new UserService(this.tokenService, this.storageService);
this.authService = new AuthService(this.cryptoService, this.apiService, this.userService,
this.tokenService, this.appIdService, this.i18nService, this.platformUtilsService,
this.messagingService, this.vaultTimeoutService, this.consoleLogService);
this.settingsService = new SettingsService(this.userService, this.storageService);
this.cipherService = new CipherService(this.cryptoService, this.userService, this.settingsService,
this.apiService, this.storageService, this.i18nService, () => this.searchService);
@ -246,7 +243,7 @@ export default class MainBackground {
this.runtimeBackground = new RuntimeBackground(this, this.autofillService, this.cipherService,
this.platformUtilsService as BrowserPlatformUtilsService, this.storageService, this.i18nService,
this.analytics, this.notificationsService, this.systemService, this.vaultTimeoutService,
this.environmentService, this.policyService, this.userService);
this.environmentService, this.policyService, this.userService, this.messagingService);
this.nativeMessagingBackground = new NativeMessagingBackground(this.storageService, this.cryptoService, this.cryptoFunctionService,
this.vaultTimeoutService, this.runtimeBackground, this.i18nService, this.userService, this.messagingService, this.appIdService);
this.commandsBackground = new CommandsBackground(this, this.passwordGenerationService,
@ -261,12 +258,24 @@ export default class MainBackground {
this.webRequestBackground = new WebRequestBackground(this.platformUtilsService, this.cipherService,
this.vaultTimeoutService);
this.windowsBackground = new WindowsBackground(this);
const that = this;
this.authService = new AuthService(this.cryptoService, this.apiService, this.userService,
this.tokenService, this.appIdService, this.i18nService, this.platformUtilsService,
new class extends MessagingServiceAbstraction {
// AuthService should send the messages to the background not popup.
send = (subscriber: string, arg: any = {}) => {
const message = Object.assign({}, { command: subscriber }, arg);
that.runtimeBackground.processMessage(message, that, null);
}
}(), this.vaultTimeoutService, this.consoleLogService);
}
async bootstrap() {
this.analytics.ga('send', 'pageview', '/background.html');
this.containerService.attachToWindow(window);
(this.authService as AuthService).init();
await (this.vaultTimeoutService as VaultTimeoutService).init(true);
await (this.i18nService as I18nService).init();
await (this.eventService as EventService).init(true);

19
src/background/runtime.background.ts
View File

@ -7,6 +7,7 @@ import { LoginView } from 'jslib/models/view/loginView';
import { CipherService } from 'jslib/abstractions/cipher.service';
import { EnvironmentService } from 'jslib/abstractions/environment.service';
import { I18nService } from 'jslib/abstractions/i18n.service';
import { MessagingService } from 'jslib/abstractions/messaging.service';
import { NotificationsService } from 'jslib/abstractions/notifications.service';
import { PolicyService } from 'jslib/abstractions/policy.service';
import { StorageService } from 'jslib/abstractions/storage.service';
@ -39,7 +40,7 @@ export default class RuntimeBackground {
private analytics: Analytics, private notificationsService: NotificationsService,
private systemService: SystemService, private vaultTimeoutService: VaultTimeoutService,
private environmentService: EnvironmentService, private policyService: PolicyService,
private userService: UserService) {
private userService: UserService, private messagingService: MessagingService) {
// onInstalled listener must be wired up before anything else, so we do it in the ctor
chrome.runtime.onInstalled.addListener((details: any) => {
@ -176,6 +177,22 @@ export default class RuntimeBackground {
}
catch { }
break;
case 'webAuthnResult':
let vaultUrl2 = this.environmentService.getWebVaultUrl();
if (vaultUrl2 == null) {
vaultUrl2 = 'https://vault.bitwarden.com';
}
if (msg.referrer == null || Utils.getHostname(vaultUrl2) !== msg.referrer) {
return;
}
const params = `webAuthnResponse=${encodeURIComponent(msg.data)};remember=${msg.remember}`;
BrowserApi.createNewTab(`popup/index.html?uilocation=popout#/2fa;${params}`, undefined, false);
break;
case 'reloadPopup':
this.messagingService.send('reloadPopup');
break;
default:
break;
}

4
src/browser/browserApi.ts
View File

@ -87,8 +87,8 @@ export class BrowserApi {
return Promise.resolve(chrome.extension.getViews({ type: 'popup' }).length > 0);
}
static createNewTab(url: string, extensionPage: boolean = false) {
chrome.tabs.create({ url: url });
static createNewTab(url: string, extensionPage: boolean = false, active: boolean = true) {
chrome.tabs.create({ url: url, active: active });
}
static messageListener(name: string, callback: (message: any, sender: any, response: any) => void) {

9
src/content/sso.ts → src/content/message_handler.ts
View File

@ -10,4 +10,13 @@ window.addEventListener('message', event => {
referrer: event.source.location.hostname,
});
}
if (event.data.command && (event.data.command === 'webAuthnResult')) {
chrome.runtime.sendMessage({
command: event.data.command,
data: event.data.data,
remember: event.data.remember,
referrer: event.source.location.hostname,
});
}
}, false);

2
src/manifest.json
View File

@ -44,7 +44,7 @@
{
"all_frames": false,
"js": [
"content/sso.js"
"content/message_handler.js"
],
"matches": [
"http://*/*",

20
src/popup/accounts/two-factor.component.html
View File

@ -9,7 +9,7 @@
<div class="right">
<button type="submit" appBlurClick [disabled]="form.loading" *ngIf="selectedProviderType != null && selectedProviderType !== providerType.Duo &&
selectedProviderType !== providerType.OrganizationDuo &&
(selectedProviderType !== providerType.U2f || form.loading)">
(selectedProviderType !== providerType.WebAuthn || form.loading)">
<span [hidden]="form.loading">{{'continue' | i18n}}</span>
<i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
</button>
@ -59,15 +59,9 @@
</div>
</div>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.U2f">
<div class="content text-center">
<span *ngIf="!u2fReady" class="text-center"><i class="fa fa-spinner fa-spin"></i></span>
<div *ngIf="u2fReady">
<p>{{'insertU2f' | i18n}}</p>
<img src="../images/u2fkey.jpg" alt="" class="img-rounded img-responsive" />
</div>
</div>
<div class="box first">
<ng-container *ngIf="selectedProviderType === providerType.WebAuthn && !webAuthnNewTab">
<div id="web-authn-frame"><iframe id="webauthn_iframe"></iframe></div>
<div class="box">
<div class="box-content">
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="remember">{{'rememberMe' | i18n}}</label>
@ -76,6 +70,11 @@
</div>
</div>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.WebAuthn && webAuthnNewTab">
<div class="content text-center" *ngIf="webAuthnNewTab">
<p class="text-center">{{'webAuthnNewTab' | i18n}}</p>
</div>
</ng-container>
<ng-container *ngIf="selectedProviderType === providerType.Duo ||
selectedProviderType === providerType.OrganizationDuo">
<div id="duo-frame"><iframe id="duo_iframe"></iframe></div>
@ -104,4 +103,3 @@
</div>
</content>
</form>
<iframe id="u2f_iframe" hidden></iframe>

31
src/popup/accounts/two-factor.component.ts
View File

@ -15,6 +15,7 @@ import { ApiService } from 'jslib/abstractions/api.service';
import { AuthService } from 'jslib/abstractions/auth.service';
import { EnvironmentService } from 'jslib/abstractions/environment.service';
import { I18nService } from 'jslib/abstractions/i18n.service';
import { MessagingService } from 'jslib/abstractions/messaging.service';
import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
import { StateService } from 'jslib/abstractions/state.service';
import { StorageService } from 'jslib/abstractions/storage.service';
@ -43,22 +44,31 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
environmentService: EnvironmentService, private ngZone: NgZone,
private broadcasterService: BroadcasterService, private changeDetectorRef: ChangeDetectorRef,
private popupUtilsService: PopupUtilsService, stateService: StateService,
storageService: StorageService, route: ActivatedRoute) {
storageService: StorageService, route: ActivatedRoute, private messagingService: MessagingService) {
super(authService, router, i18nService, apiService, platformUtilsService, window, environmentService,
stateService, storageService, route);
super.onSuccessfulLogin = () => {
return syncService.fullSync(true);
};
super.successRoute = '/tabs/vault';
this.webAuthnNewTab = this.platformUtilsService.isFirefox() || this.platformUtilsService.isSafari();
}
async ngOnInit() {
const isFirefox = this.platformUtilsService.isFirefox();
if (this.popupUtilsService.inPopup(window) && isFirefox &&
this.win.navigator.userAgent.indexOf('Windows NT 10.0;') > -1) {
// ref: https://bugzilla.mozilla.org/show_bug.cgi?id=1562620
this.initU2f = false;
if (this.route.snapshot.paramMap.has('webAuthnResponse')) {
// WebAuthn fallback response
this.selectedProviderType = TwoFactorProviderType.WebAuthn;
this.token = this.route.snapshot.paramMap.get('webAuthnResponse');
super.onSuccessfulLogin = async () => {
this.syncService.fullSync(true);
this.messagingService.send('reloadPopup');
window.close();
};
this.remember = this.route.snapshot.paramMap.get('remember') === 'true';
await this.doSubmit();
return;
}
await super.ngOnInit();
if (this.selectedProviderType == null) {
return;
@ -73,15 +83,6 @@ export class TwoFactorComponent extends BaseTwoFactorComponent {
}
}
if (!this.initU2f && this.selectedProviderType === TwoFactorProviderType.U2f &&
this.popupUtilsService.inPopup(window)) {
const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('popupU2fCloseMessage'),
null, this.i18nService.t('yes'), this.i18nService.t('no'));
if (confirmed) {
this.popupUtilsService.popOut(window);
}
}
const queryParamsSub = this.route.queryParams.subscribe(async qParams => {
if (qParams.sso === 'true') {
super.onSuccessfulLogin = () => {

13
src/popup/scss/misc.scss
View File

@ -176,6 +176,19 @@ p.lead {
}
}
#web-authn-frame {
background: url('../images/loading.svg') 0 0 no-repeat;
width: 100%;
height: 310px;
margin-bottom: -10px;
iframe {
width: 100%;
height: 100%;
border: none;
}
}
app-root > #loading {
display: flex;
text-align: center;

11
src/popup/services/services.module.ts
View File

@ -66,11 +66,6 @@ function getBgService<T>(service: string) {
export const stateService = new StateService();
export const messagingService = new BrowserMessagingService();
export const authService = new AuthService(getBgService<CryptoService>('cryptoService')(),
getBgService<ApiService>('apiService')(), getBgService<UserService>('userService')(),
getBgService<TokenService>('tokenService')(), getBgService<AppIdService>('appIdService')(),
getBgService<I18nService>('i18nService')(), getBgService<PlatformUtilsService>('platformUtilsService')(),
messagingService, getBgService<VaultTimeoutService>('vaultTimeoutService')(), getBgService<ConsoleLogService>('consoleLogService')());
export const searchService = new PopupSearchService(getBgService<SearchService>('searchService')(),
getBgService<CipherService>('cipherService')(), getBgService<ConsoleLogService>('consoleLogService')());
@ -86,7 +81,7 @@ export function initFactory(platformUtilsService: PlatformUtilsService, i18nServ
window.document.body.classList.add('body-sm');
}
document.body.style.setProperty('height',`${window.innerHeight}px`,'important');
document.body.style.setProperty('height', `${window.innerHeight}px`, 'important');
}
if (BrowserApi.getBackgroundPage() != null) {
@ -108,8 +103,6 @@ export function initFactory(platformUtilsService: PlatformUtilsService, i18nServ
window.document.documentElement.classList.add('locale_' + i18nService.translationLocale);
window.document.documentElement.classList.add('theme_' + theme);
authService.init();
const analytics = new Analytics(window, () => BrowserApi.gaFilter(), null, null, null, () => {
const bgPage = BrowserApi.getBackgroundPage();
if (bgPage == null || bgPage.bitwardenMain == null) {
@ -133,7 +126,7 @@ export function initFactory(platformUtilsService: PlatformUtilsService, i18nServ
PopupUtilsService,
BroadcasterService,
{ provide: MessagingService, useValue: messagingService },
{ provide: AuthServiceAbstraction, useValue: authService },
{ provide: AuthServiceAbstraction, useFactory: getBgService<AuthService>('authService'), deps: [] },
{ provide: StateServiceAbstraction, useValue: stateService },
{ provide: SearchServiceAbstraction, useValue: searchService },
{ provide: AuditService, useFactory: getBgService<AuditService>('auditService'), deps: [] },

8
src/services/browserPlatformUtils.service.ts
View File

@ -126,12 +126,8 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
return BrowserApi.getApplicationVersion();
}
supportsU2f(win: Window): boolean {
if (win != null && (win as any).u2f != null) {
return true;
}
return this.isChrome() || this.isOpera() || this.isVivaldi() || this.isEdge();
supportsWebAuthn(win: Window): boolean {
return (typeof(PublicKeyCredential) !== 'undefined');
}
supportsDuo(): boolean {

2
webpack.config.js
View File

@ -137,7 +137,7 @@ const config = {
'content/autofiller': './src/content/autofiller.ts',
'content/notificationBar': './src/content/notificationBar.ts',
'content/shortcuts': './src/content/shortcuts.ts',
'content/sso': './src/content/sso.ts',
'content/message_handler': './src/content/message_handler.ts',
'notification/bar': './src/notification/bar.js',
},
optimization: {