Disable spellcheck and autocorrect on all sensitive input fields

These were already disabled for the username field spellcheck has recently been discovered to potentially disclose information to browser vendors that provide this feature. So disabling it helps to prevent this. autocorrect is a safari only feature that will autocorrect what it believes to be misspelled words, so this is disabled for user experience
auth0 · Sep 23, 2022 · c244da0 · c244da0
1 parent d69e607
commit c244da0
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 2 deletions.
diff --git a/src/__tests__/ui/input/__snapshots__/email_input.test.jsx.snap b/src/__tests__/ui/input/__snapshots__/email_input.test.jsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EmailInput renders without issue 1`] = `"<div data-__type=\\"input_wrap\\" data-invalidhint=\\"invalidHint\\" data-isvalid=\\"true\\" data-name=\\"email\\" data-icon=\\"[object Object]\\"><input type=\\"email\\" id=\\"1-email\\" inputmode=\\"email\\" name=\\"email\\" class=\\"auth0-lock-input\\" placeholder=\\"yours@example.com\\" autocomplete=\\"off\\" autocapitalize=\\"off\\" aria-label=\\"Email\\" aria-invalid=\\"false\\" value=\\"value\\"></div>"`;
+exports[`EmailInput renders without issue 1`] = `"<div data-__type=\\"input_wrap\\" data-invalidhint=\\"invalidHint\\" data-isvalid=\\"true\\" data-name=\\"email\\" data-icon=\\"[object Object]\\"><input type=\\"email\\" id=\\"1-email\\" inputmode=\\"email\\" name=\\"email\\" class=\\"auth0-lock-input\\" placeholder=\\"yours@example.com\\" autocomplete=\\"off\\" autocapitalize=\\"off\\" autocorrect=\\"off\\" spellcheck=\\"false\\" aria-label=\\"Email\\" aria-invalid=\\"false\\" value=\\"value\\"></div>"`;
diff --git a/src/ui/input/captcha_input.jsx b/src/ui/input/captcha_input.jsx
@@ -114,6 +114,8 @@ export default class CaptchaInput extends React.Component {
             placeholder={placeholder}
             autoComplete="off"
             autoCapitalize="off"
+            autoCorrect="off"
+            spellCheck="false"
             onChange={::this.handleOnChange}
             onFocus={::this.handleFocus}
             onBlur={::this.handleBlur}

diff --git a/src/ui/input/email_input.jsx b/src/ui/input/email_input.jsx
@@ -67,6 +67,8 @@ export default class EmailInput extends React.Component {
           placeholder="yours@example.com"
           autoComplete={autoComplete ? 'on' : 'off'}
           autoCapitalize="off"
+          autoCorrect="off"
+          spellCheck="false"
           onChange={::this.handleOnChange}
           onFocus={::this.handleFocus}
           onBlur={::this.handleBlur}

diff --git a/src/ui/input/mfa_code_input.jsx b/src/ui/input/mfa_code_input.jsx
@@ -46,6 +46,8 @@ export default class MFACodeInput extends React.Component {
           className="auth0-lock-input"
           autoComplete="off"
           autoCapitalize="off"
+          autoCorrect="off"
+          spellCheck="false"
           onChange={::this.handleOnChange}
           onFocus={::this.handleFocus}
           onBlur={::this.handleBlur}

diff --git a/src/ui/input/password_input.jsx b/src/ui/input/password_input.jsx
@@ -91,6 +91,8 @@ export default class PasswordInput extends React.Component {
           className="auth0-lock-input"
           autoComplete={allowPasswordAutocomplete ? 'on' : 'off'}
           autoCapitalize="off"
+          autoCorrect="off"
+          spellCheck="false"
           onChange={::this.handleOnChange}
           onFocus={::this.handleFocus}
           onBlur={::this.handleBlur}

diff --git a/src/ui/input/username_input.jsx b/src/ui/input/username_input.jsx
@@ -60,7 +60,7 @@ export default class UsernameInput extends React.Component {
           placeholder="username"
           autoComplete={autoComplete ? 'on' : 'off'}
           autoCapitalize="off"
-          spellCheck="off"
+          spellCheck="false"
           autoCorrect="off"
           onChange={::this.handleOnChange}
           onFocus={::this.handleFocus}