[PM-3343] Capture TOTP QR codes from websites in the browser extension

[quexten]

Type of change

- [ ] Bug fix
- [x] New feature development
- [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc)
- [ ] Build/deploy pipeline (DevOps)
- [ ] Other

Objective

Some sites don't provide the TOTP secret directly, but only a QR code. Additionally, copying and pasting is an additional step for the user. Finally, copying the TOTP secret temporarily exposes it to the clipboard, which might be snooped on by other applications / browser extensions.

This PR adds a button next to the TOTP secret field, which when pressed captures a screenshot of the current webpage, extracts the TOTP QR code and reads it.

Closes https://community.bitwarden.com/t/totp-screenshot-feature/7043/2

Code changes

• messages.json: Add the i18n messages for English
• manifest.json / manifestv3: Add <all_urls> permission for chrome.tabs.captureVisibleTab to work (on chrome, just giving "activeTab" works, but firefox requires <all_urls>)
• browser-api.ts: Add a function to capture the visible tab
• add-edit.component.ts: Add the code to capture the tab, decode the QR code and - if parsed correctly - set the cipher's TOTP secret entry
• add-edit.component.html: Add the button to capture the TOTP code from the webpage
• package.json: Add the qrcode-parser library for QR code parsing

Screenshots

totp-capture.webm

Before you submit

• Please add unit tests where it makes sense to do so (encouraged but not required)
• If this change requires a documentation update - notify the documentation team
• If this change has particular deployment requirements - notify the DevOps team
• Ensure that all UI additions follow WCAG AA requirements

[bitwarden-bot]

Thank you for your contribution! We've added this to our internal Community PR board for review.
ID: PM-3343

[quexten]

Right now, the PR is parsing the QR code as a URI such as:
otpauth://totp/NodeJSTest:testuser?secret=GZ4FORKTNBVFGQTFJJGEIRDOKY&issuer=NodeJSTest
and extracting just the secret GZ4FORKTNBVFGQTFJJGEIRDOKY, as on browser the default approach is copy pasting just the secret anyways. We could also store the entire URI in the TOTP secret field (this is what happens on mobile). I'm happy to change it if required, but don't want to sway this choice either way as I'm OK with either.

[fabriziobagala]

Right now, the PR is parsing the QR code as a URI such as: otpauth://totp/NodeJSTest:testuser?secret=GZ4FORKTNBVFGQTFJJGEIRDOKY&issuer=NodeJSTest and extracting just the secret GZ4FORKTNBVFGQTFJJGEIRDOKY, as on browser the default approach is copy pasting just the secret anyways. We could also store the entire URI in the TOTP secret field (this is what happens on mobile). I'm happy to change it if required, but don't want to sway this choice either way as I'm OK with either.

Thank you very much for this interesting and desired feature!

For consistency with the mobile app, the best choice would be to store the entire URI. Moreover, in analyzing other password managers, I have noticed that the entire URI is always saved.

[quexten]

As a note for QA: I tested manifest v2 developer builds of Firefox/Chrome. I don't have a testing setup for Safari at the moment. It could be that we need a separate way to capture the webpage screenshot on Safari, reference https://stackoverflow.com/questions/3329117/what-does-visiblecontentsasdataurl-exactly-do

[sukhleenb]

Hello! The designers are requesting a few UI/UX tweaks to be consistent with mobile.

Could we look into

• updating the toast copy to "Authenticator key added" when the QR code successfully scans
• updating the toast copy to "Item saved" when the user selects Save
• on hover, add/update the camera icon tooltip to say “scan QR code”
• once the authenticator key is added, add the copy icon next to the camera icon
• double-check that when a user has "can-view" permissions, that the camera icon and the copy icon are in a disabled state

Once these changes are implemented, this will be a great win for the extension. Appreciate your work on this.

[quexten]

on hover, add/update the camera icon tooltip to say “scan QR code”

Thanks for the feedback. Minor nit-pick, "scan QR code" could mean that the camera is used (in case of a laptop, or a desktop with a webcam is used). How about "Scan QR code from webpage"?

Also:

updating the toast copy to "Item saved" when the user selects Save

When saving, it does pop the notification (visible in the video). Does the point refer to replacing the active toast instead of pushing a new one?

[quexten]

Added the copy button; changed the messages to be:

• "Unable to scan QR code from the current webpage"
• "Authenticator key added"
• "Scan authenticator QR code from current webpage"
• "Copy TOTP secret"

double-check that when a user has "can-view" permissions, that the camera icon and the copy icon are in a disabled state

Question about this; I can see why with "can-view" permissions, the capture would be disabled as the user should not modify the entry. But as the code is visible to the user, they could just mark & copy it, or manually copy it by copying it letter by letter. So I'm not sure what the purpose is for disabling the copy button?

[sukhleenb]

• "Scan QR code from webpage" works great for the tooltip
• For the "Item saved" toast, looks like the copy is correct. I must have misread it when viewing the video.
• For "can-view", the main purpose is to prevent edits to the item. We are looking into disabling all quick-action buttons for this permission. If you'd like to be consistent with the existing UI, we can disable capture for now and look at disabling the copy icon with the other initiative.
• Is the "Copy TOTP secret" the tooltip message for the copy icon? If so, can you please rename it to "Copy verification code" as seen below

[quexten]

Is the "Copy TOTP secret" the tooltip message for the copy icon? If so, can you please rename it to "Copy verification code" as seen below

When editing the entry, it shows the TOTP secret (otpauth://totp/NodeJSTest:testuser?secret=GZ4FORKTNBVFGQTFJJGEIRDOKY&issuer=NodeJSTest)
When regularly viewing the entry, it shows the generated TOTP codes (143234,...)

The copy button is left as "Copy TOTP code" in view mode (when actually copying TOTP codes).
In edit mode, since it shows the TOTP secret, and upon click it copies the secret, the copy button says "Copy TOTP secret" (since it is a different action from copying the generated TOTP code)

For "can-view", the main purpose is to prevent edits to the item. We are looking into disabling all quick-action buttons for this permission. If you'd like to be consistent with the existing UI, we can disable capture for now and look at disabling the copy icon with the other initiative.

That's fine. For now I completely hid the actions (both copy the secret and capture the qr code) when in view only mode (this is the same behaviour as is currently applied for the "generate username" / "generate password buttons").

[quexten]

Actually, thinking about it, since the text field is labeled "Authenticator key (TOTP)", it might make sense to rename the copy message to "Copy Authenticator key" or "Copy Authenticator key (TOTP)".

[quexten]

Like this?

[quexten]

In view only mode:

[sukhleenb]

I realized I misspoke. With "can view", you can currently copy all fields, regardless of if you are on the edit or view page. We should hide the copy icon for the "Can-view, except password" permission in the edit page, along with hiding the field value. We would keep the copy icon for the user to copy the verification code in the view page. Screenshots of existing UI with "Can-view, except password" permissions.

We'll still want to disable to capture icon for both permissions.

[quexten]

We should hide the copy icon for the "Can-view, except password" permission in the edit page, along with hiding the field value

That behaviour is unchanged in this PR :)

Should the "Copy Authenticator secret (TOTP)" button be enabled when the permission is "Can-view"? (Right now both actions are disabled for both permissions).

[sukhleenb]

Should the "Copy Authenticator secret (TOTP)" button be enabled when the permission is "Can-view"? (Right now both actions are disabled for both permissions).

Yup, exactly! Other than that, I think this should be good to go :)

[Jingo88]

Thanks for the contribution. Everything looks great, just one more requested change from our end. the copy method here has conflicts with the copy inside web apps/web/src/app/vault/individual-vault/add-edit.component.ts

[andrebispo5]

Looks good!

[Jingo88]

Thank you for your contribution!