Prevent browsers from writing sensitive form inputs to user data

src/app/components/MnemonicField/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { FormField, TextArea } from 'grommet'
+import { preventSavingInputsToUserData } from 'app/lib/preventSavingInputsToUserData'
 
 interface Props {
   placeholder?: string
@@ -24,6 +25,7 @@ export function MnemonicField(props: Props) {
         size="medium"
         rows={5}
         fill
+        {...preventSavingInputsToUserData}
       />
     </FormField>
   )

src/app/components/MnemonicValidation/index.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Header } from 'app/components/Header'
 import { MnemonicField } from 'app/components/MnemonicField'
+import { preventSavingInputsToUserData } from 'app/lib/preventSavingInputsToUserData'
 
 interface Props {
   /** Called once the mnemonic is confirmed */
@@ -42,7 +43,7 @@ export function MnemonicValidation(props: Props) {
       border={{ color: 'background-front-border', size: '1px' }}
     >
       <Grid gap="small" pad="none" columns={size === 'small' ? '100%' : ['1fr', '1fr']}>
-        <Form onSubmit={onSubmit}>
+        <Form onSubmit={onSubmit} {...preventSavingInputsToUserData}>
           <Header>{t('openWallet.mnemonic.header', 'Enter your keyphrase')}</Header>
           <Paragraph>
             {t(

src/app/components/PasswordField/__tests__/index.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { preventSavingInputsToUserData } from 'app/lib/preventSavingInputsToUserData'
 import { Form, FormField, TextInput } from 'grommet'
 import * as React from 'react'
 import { PasswordField } from '..'
@@ -18,6 +19,7 @@ describe('<PasswordField />', () => {
             expect(value.privateKey.length).toBeGreaterThanOrEqual(5)
             props.onSubmit(value)
           }}
+          {...preventSavingInputsToUserData}
         >
           <FormField name="name">
             <TextInput name="name" value="name" />
@@ -26,7 +28,6 @@ describe('<PasswordField />', () => {
             inputElementId="privateKey"
             name="privateKey"
             label="privateKey"
-            autoComplete="current-password"
             validate={(privateKey, form) => {
               return privateKey.length < 5 ? 'invalid' : undefined
             }}
@@ -60,6 +61,7 @@ describe('<PasswordField />', () => {
             // expect(privateKey.length).toBeGreaterThanOrEqual(5)
             props.onSubmit({ name, privateKey })
           }}
+          {...preventSavingInputsToUserData}
         >
           <FormField name="name">
             <TextInput name="name" value={name} onChange={event => setName(event.target.value)} />
@@ -68,7 +70,6 @@ describe('<PasswordField />', () => {
             inputElementId="privateKey"
             name="privateKey"
             label="privateKey"
-            autoComplete="off"
             value={privateKey}
             onChange={event => setPrivateKey(event.target.value)}
             error={privateKey.length < 5 ? 'invalid' : undefined}

src/app/components/PasswordField/__tests__/type-only.test.tsx

@@ -1,3 +1,4 @@
+import { preventSavingInputsToUserData } from 'app/lib/preventSavingInputsToUserData'
 import { Form, FormField, TextInput } from 'grommet'
 import * as React from 'react'
 import { PasswordField } from '..'
@@ -16,6 +17,7 @@ describe('type-only test', () => {
             expect(value.privateKey !== 5).toBeTruthy()
             expect(value.privateKey !== '5').toBeTruthy()
           }}
+          {...preventSavingInputsToUserData}
         >
           <FormField name="name">
             <TextInput name="name" value="name" />
@@ -24,8 +26,6 @@ describe('type-only test', () => {
             inputElementId="privateKey"
             name="privateKey"
             label="privateKey"
-            // @ts-expect-error Detect incorrect value
-            autoComplete="password"
             validate={(privateKey, form) => {
               // @ts-expect-error Detect incorrect type
               expect(privateKey !== 5).toBeTruthy()
@@ -47,7 +47,6 @@ describe('type-only test', () => {
             inputElementId="privateKey3"
             // @ts-expect-error Detect missing field
             name="privateKey3"
-            autoComplete="current-password"
             showTip="show"
             hideTip="hide"
           />
@@ -63,6 +62,7 @@ describe('type-only test', () => {
             // @ts-expect-error Doesn't know about any fields
             expect(value.privateKey !== '5').toBeTruthy()
           }}
+          {...preventSavingInputsToUserData}
         >
           <FormField name="name">
             <TextInput name="name" value="name" />
@@ -71,7 +71,6 @@ describe('type-only test', () => {
             inputElementId="privateKey"
             name="privateKey"
             label="privateKey"
-            autoComplete="off"
             validate={(privateKey, form) => {
               // @ts-expect-error Detect incorrect type
               expect(privateKey !== 5).toBeTruthy()

src/app/components/PasswordField/index.tsx

@@ -1,3 +1,4 @@
+import { preventSavingInputsToUserData } from 'app/lib/preventSavingInputsToUserData'
 import { Box, FormField, Button, TextInput, Tip } from 'grommet'
 import { View, Hide } from 'grommet-icons'
 import * as React from 'react'
@@ -8,7 +9,6 @@ interface Props<TFormValue> {
   placeholder?: string
   inputElementId: string
 
-  autoComplete: 'on' | 'off' | 'new-password' | 'current-password'
   autoFocus?: boolean
   value?: string
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
@@ -42,9 +42,9 @@ export function PasswordField<TFormValue = any>(props: Props<TFormValue>) {
             onChange={props.onChange}
             type={passwordIsVisible ? 'text' : 'password'}
             required={props.required}
-            autoComplete={props.autoComplete}
             autoFocus={props.autoFocus}
             plain
+            {...preventSavingInputsToUserData}
           />
           <Tip content={passwordIsVisible ? props.hideTip : props.showTip}>
             <Button

src/app/lib/preventSavingInputsToUserData.ts

@@ -0,0 +1,21 @@
+/**
+ * Usage: Add to sensitive inputs, textareas, and parent forms (because Chrome
+ * doesn't support it on textareas).
+ *
+ * Browsers write visible input fields from any website to user data to enable
+ * restoring sessions. Browsers exclude inputs with autocomplete="off" from
+ * cached form data in the session history (even though they ignore it and still
+ * offer autofill from saved passwords).
+ *
+ * To ensure this fixes vulnerability:
+ * - Manually checked
+ *   grep --text t.e.s.t.M.n.e.m.o.n.i.c -r ~/.config/google-chrome
+ *   grep --text testMnemonic -r ~/.mozilla/firefox
+ *
+ * References:
+ * - https://nvd.nist.gov/vuln/detail/CVE-2022-32969
+ * - https://coinyuppie.com/slow-mist-a-brief-analysis-of-the-metamask-wallet-demonic-vulnerability/
+ * - https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
+ * - https://nvd.nist.gov/vuln/detail/CVE-2022-0167
+ */
+export const preventSavingInputsToUserData = { autoComplete: 'off' }

src/app/pages/OpenWalletPage/Features/FromMnemonic/__tests__/__snapshots__/index.test.tsx.snap

@@ -404,7 +404,9 @@ exports[`<FromMnemonic/> should match snapshot 1`] = `
     <div
       class="c2"
     >
-      <form>
+      <form
+        autocomplete="off"
+      >
         <h1
           class="c3"
         >
@@ -422,6 +424,7 @@ exports[`<FromMnemonic/> should match snapshot 1`] = `
             class="c6 "
           >
             <textarea
+              autocomplete="off"
               class="c7"
               id="mnemonic"
               placeholder="openWallet.mnemonic.enterPhraseHere"

src/app/pages/OpenWalletPage/Features/FromPrivateKey/__tests__/__snapshots__/index.test.tsx.snap

@@ -439,7 +439,9 @@ exports[`<FromPrivateKey  /> should match snapshot 1`] = `
   <div
     class="c1"
   >
-    <form>
+    <form
+      autocomplete="off"
+    >
       <h1
         class="c2"
       >

src/app/pages/OpenWalletPage/Features/FromPrivateKey/index.tsx

@@ -7,6 +7,7 @@ import { base64ToUint, uint2hex } from 'app/lib/helpers'
 import { useTranslation } from 'react-i18next'
 import { PasswordField } from 'app/components/PasswordField'
 import { Header } from 'app/components/Header'
+import { preventSavingInputsToUserData } from 'app/lib/preventSavingInputsToUserData'
 
 interface Props {}
 
@@ -51,7 +52,7 @@ export function FromPrivateKey(props: Props) {
       round="5px"
       border={{ color: 'background-front-border', size: '1px' }}
     >
-      <Form<FormValue> onSubmit={onSubmit}>
+      <Form<FormValue> onSubmit={onSubmit} {...preventSavingInputsToUserData}>
         <Header>{t('openWallet.privateKey.header', 'Enter your private key')}</Header>
         <Paragraph>
           <label htmlFor="privatekey">
@@ -63,7 +64,6 @@ export function FromPrivateKey(props: Props) {
           inputElementId="privatekey"
           name="privateKey"
           placeholder={t('openWallet.privateKey.enterPrivateKeyHere', 'Enter your private key here')}
-          autoComplete="off"
           autoFocus
           validate={privateKey =>
             isValidKey(privateKey) ? undefined : t('openWallet.privateKey.error', 'Invalid private key')

src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/__tests__/__snapshots__/index.test.tsx.snap

@@ -612,7 +612,9 @@ exports[`<ImportAccountsSelectionModal  /> should match snapshot 1`] = `
             tabindex="-1"
           />
           <div>
-            <form>
+            <form
+              autocomplete="off"
+            >
               <div
                 class="c5"
               >

src/app/pages/OpenWalletPage/Features/ImportAccountsSelectionModal/index.tsx

@@ -19,6 +19,7 @@ import { walletActions } from 'app/state/wallet'
 import { Box, Button, Form, ResponsiveContext, Spinner, Text } from 'grommet'
 import { numberOfAccountPages } from 'app/state/importaccounts/saga'
 import { WalletType } from 'app/state/wallet/types'
+import { preventSavingInputsToUserData } from 'app/lib/preventSavingInputsToUserData'
 
 interface ImportAccountsSelectorSelectorProps {
   accounts: ImportAccountsListAccount[]
@@ -98,7 +99,7 @@ export function ImportAccountsSelectionModal(props: ImportAccountsSelectionModal
 
   return (
     <ResponsiveLayer onEsc={props.abort} onClickOutside={props.abort} modal background="background-front">
-      <Form<FormValue> onSubmit={openAccounts}>
+      <Form<FormValue> onSubmit={openAccounts} {...preventSavingInputsToUserData}>
         <Box width="800px" pad="medium">
           <ModalSplitHeader
             side={t('openWallet.importAccounts.accountCounter', '{{ count }} accounts selected', {

src/app/pages/ParaTimesPage/TransactionRecipient/__tests__/__snapshots__/index.test.tsx.snap

@@ -367,6 +367,7 @@ exports[`<TransactionRecipient /> should render component 1`] = `
       class="c4"
     >
       <form
+        autocomplete="off"
         style="width: 465px;"
       >
         <div

src/app/pages/ParaTimesPage/TransactionRecipient/index.tsx

@@ -8,6 +8,7 @@ import { ParaTimeFormFooter } from '../ParaTimeFormFooter'
 import { useParaTimes } from '../useParaTimes'
 import { useParaTimesNavigation } from '../useParaTimesNavigation'
 import { PasswordField } from 'app/components/PasswordField'
+import { preventSavingInputsToUserData } from 'app/lib/preventSavingInputsToUserData'
 
 export const TransactionRecipient = () => {
   const { t } = useTranslation()
@@ -56,6 +57,7 @@ export const TransactionRecipient = () => {
         onSubmit={navigateToAmount}
         value={transactionForm}
         style={{ width: isMobile ? '100%' : '465px' }}
+        {...preventSavingInputsToUserData}
       >
         <Box margin={{ bottom: 'medium' }}>
           {isEvmcParaTime && !isDepositing && (
@@ -80,7 +82,6 @@ export const TransactionRecipient = () => {
                 'Enter Ethereum-compatible private key',
               )}
               value={transactionForm.ethPrivateKey}
-              autoComplete="off"
               showTip={t('openWallet.privateKey.showPrivateKey', 'Show private key')}
               hideTip={t('openWallet.privateKey.hidePrivateKey', 'Hide private key')}
             />