From 3e75bb7be48a39f909d7dc1dceff6ac6e6e2f768 Mon Sep 17 00:00:00 2001 From: SON NGUYEN Date: Fri, 15 Jul 2022 15:30:08 +0700 Subject: [PATCH 1/2] Fix/issues CVE-2022-32969 Mnemonic leak vulnerability --- src/components/AccessByPrivatekey.js | 2 +- src/components/ContentHeader.scss | 2 +- src/components/InputPasswordCopy.js | 119 +++++++++++++++ src/components/InputPasswordCopy.scss | 204 ++++++++++++++++++++++++++ src/components/Landing.scss | 2 +- src/components/MyWallet.js | 5 +- src/components/MyWallet.scss | 3 +- src/components/WalletCreation1.scss | 6 +- src/components/WalletCreationStep3.js | 8 +- 9 files changed, 341 insertions(+), 10 deletions(-) create mode 100644 src/components/InputPasswordCopy.js create mode 100644 src/components/InputPasswordCopy.scss diff --git a/src/components/AccessByPrivatekey.js b/src/components/AccessByPrivatekey.js index bb7de98..135f82a 100644 --- a/src/components/AccessByPrivatekey.js +++ b/src/components/AccessByPrivatekey.js @@ -81,7 +81,7 @@ class AccessByPrivateKey extends Component {

{ + state = { + isCopied: false, + showPassword: false, + } + + copy = () => { + const { clickEvent } = this.props + if (typeof clickEvent === 'function') { + clickEvent(true) + } + if (this.$input) + copy(this.$input) + this.setCopyState(true) + setTimeout(() => this.setCopyState(false), 1500) + + } + + setCopyState = (isCopied) => this.setState({ isCopied }) + + toggleShowPassword = () => { + this.setState({ + showPassword: !this.state.showPassword, + }) + } + render() { + const { isCopied, showPassword } = this.state + const { + className, + name, + value, + label, + onChange, + onKeyPress, + placeholder, + disabled, + err, + eye, + isTooltip, + tooltipText, + subName, + styleType, + } = this.props + + const bullet = madeBulletString((value && value.length) || 112); + + return ( +
+ {label && } + + {isTooltip && {tooltipText} + )}> + } + +
+ {eye && ( + +
+ {/*

+ Copied to clipboard +

*/} +
+ ) + } +} + +export default InputPasswordCopy diff --git a/src/components/InputPasswordCopy.scss b/src/components/InputPasswordCopy.scss new file mode 100644 index 0000000..a4118e2 --- /dev/null +++ b/src/components/InputPasswordCopy.scss @@ -0,0 +1,204 @@ +@import "colors.scss"; +@import "fonts.scss"; +@import "mixins.scss"; + +.InputPasswordCopy { + width: 100%; + border: 0; + padding: 0; + transition: border-width 100ms linear, border-color 300ms linear; + position: relative; + outline: 0; + background-color: transparent; + padding-bottom: 40px; + &.not__margin { + margin-bottom: 4px; + } + &.textarea__show .textarea__Copy { + @include font-style("caption-alert"); + color: $Red; + padding: 7px 8px 8px; + } +} + +.InputPasswordCopy__inputWrapper { + position: relative; + padding-right: 72px; + &__type2 { + padding-left: 68px; + } + .input__subname { + @include font-style("label"); + position: absolute; + left: 0; + bottom: 0; + height: 30px; + width: 68px; + padding-left: 8px; + line-height: 30px; + color: $dark-blue-grey; + background-color: #f0f2fc; + } + .input__subname + input { + } + &.InputPasswordCopy__inputWrapper__type3 { + padding: 0; + .InputPasswordCopy__copyButton { + bottom: -38px; + } + .InputPasswordCopy__eye { + right: 8px; + z-index: 2; + } + } + .hide { + position: absolute; + left: 0; + right: 0; + opacity: 0; + z-index: -1; + } + .textarea__Copy { + position: relative; + width: 100%; + padding: 7px 37px 6px 8px; + height: 50px; + border: none; + resize: none; + color: $dark-blue-grey; + background-color: #f0f2fc; + outline: none; + z-index: 1; + @include font-style("body"); + &.textarea__password { + font-size: 18px; + line-height: 1.1; + } + } +} + +.InputPasswordCopy__input { + @include font-style("body"); + color: $dark-blue-grey; + background-color: #f0f2fc; + outline: 0; + border: 0; + width: 100%; + height: 30px; + line-height: 30px; + display: block; + padding: 0px 8px; + + &::placeholder { + color: $middle-blue-grey; + } + + &:-webkit-autofill { + background-color: transparent; + } +} +.InputPasswordCopy__eye + .InputPasswordCopy__input { + padding-right: 30px; +} +.InputPasswordCopy__copyButton { + @include font-style("button-small"); + color: $Blue-three; + width: 64px; + height: 30px; + position: absolute; + bottom: 0; + right: 0; + outline: none; + cursor: pointer; + padding: 0; + width: 64px; + border-radius: 2px; + border: solid 1px #f0f2fc; + background-color: $White-one; + &--copied { + background-color: $Blue-green-one !important; + color: $White-one; + .InputPasswordCopy__icon { + display: none; + } + } + &:hover { + background-color: rgba(0, 0, 0, 0.1); + border: none; + } + + &:active { + background-color: rgba(0, 0, 0, 0.2); + border: none; + } +} + +.InputPasswordCopy__icon { + display: inline-block; + vertical-align: middle; + width: 11px; + height: 12px; + margin-left: 8px; +} + +.InputPasswordCopy__copiedText { + @include font-style("caption"); + @include textPosition(); + text-align: left; + color: $main-point; + transition: opacity 300ms; + opacity: 0; + margin-top: 10px; +} + +.InputPasswordCopy__label { + @include font-style("label"); + color: $main-theme; + cursor: text; + display: block; + text-align: left; + margin-bottom: 8px; +} + +.InputPasswordCopy__eye { + border: 0; + width: 20px; + height: 20px; + position: absolute; + top: calc(50% - 10px); + right: 80px; + outline: none; + background: center / contain no-repeat transparent; + cursor: pointer; + + &--show { + background-image: url("/static/images/btn-show.svg"); + } + &--hide { + background-image: url("/static/images/btn-hide.svg"); + } +} + +.InputPasswordCopy__value { + width: 100%; + padding-right: 36px; +} + +.InputPasswordCopy__span { + display: block; + width: 100%; + overflow-x: auto; + overflow-y: hidden; +} + +.InputPasswordCopy__wordWrap { + height: 50px; +} +.InputPasswordCopy__span__wordWrap { + word-wrap: break-word; + overflow-x: hidden; + overflow-y: auto; + height: 100%; + line-height: 1.4; + padding-top: 7px; +} diff --git a/src/components/Landing.scss b/src/components/Landing.scss index 78051be..b4e7c1b 100644 --- a/src/components/Landing.scss +++ b/src/components/Landing.scss @@ -73,7 +73,7 @@ float: left; } button { - @include font-style('button') + @include font-style('button'); width: 100%; height: 48px; text-align: center; diff --git a/src/components/MyWallet.js b/src/components/MyWallet.js index eae7dc8..35e8c82 100644 --- a/src/components/MyWallet.js +++ b/src/components/MyWallet.js @@ -7,6 +7,7 @@ import { caver } from 'klaytn/caver' import { pipe } from 'utils/Functional' import Input from 'components/Input' import InputCopy from 'components/InputCopy' +import InputPasswordCopy from 'components/InputPasswordCopy' import KeystorePopup from 'components/KeystorePopup' import MyToken from 'components/MyToken' import Button from 'components/Button' @@ -123,7 +124,7 @@ class MyWallet extends Component { subName="Hex" /> - { autoFocus eye /> - { )} render={() => (
- -
)} From c1ed2a1db86ee646de2092de9a8eb4c7ebbcaf0d Mon Sep 17 00:00:00 2001 From: "ollie.j" Date: Thu, 21 Jul 2022 13:55:02 +0900 Subject: [PATCH 2/2] version up to v2.4.8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ae4e6b1..a408c50 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "klaytn-wallet", - "version": "2.4.7", + "version": "2.4.8", "description": "Klaytn Wallet Project", "directories": { "test": "test"