Хранение входных данных формы в состоянии компонента в React.js, в частности, паролей
получил вопрос о формах в React.js. На самом деле у меня нет проблем, но мне было интересно, есть ли недостатки в моем подходе.
У меня есть простая форма с двумя входами для электронной почты и пароля, например:
<input
type = "email"
name = "email"
value = {this.state.email}
onChange = {this.handleChangeEvent}
data-message-required = "Please enter your email address"
data-message-email = "Please enter a VALID email address"
/>
и
<input
type = "password"
name = "password"
value = {this.state.password}
onChange = {this.handleChangeEvent}
data-minlength = "3"
data-maxnlength = "20"
data-message = "Please enter your password"
/>
handleChangeEvent() записывается так:
handleChangeEvent = e => {
this.setState({
[e.target.name]:e.target.value
})}
У меня вопрос, есть ли уязвимости в этом коде? При использовании React Dev Tools я могу отслеживать внутреннее состояние компонентов, и пароль отображается в виде открытого текста. Я не уверен, означает ли это, что другие источники могут получить пароль, отслеживая состояние компонента.
Извините, если на этот вопрос уже был дан ответ, я сделал быстрый поиск, но не смог найти что-то конкретное по этой теме. Спасибо за ваше время.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Нет, здесь нет уязвимости: пользователь сможет увидеть пароль, пока он находится в ее браузере, после того, как она его введет...
Пароль не должен быть секретом для его владельца... :-)
Конечно, если вы отправите пароль на сервер, вы будете использовать протокол https, иначе он будет виден как на кабеле, а этот является является проблемой безопасности!
Хорошо, чтобы ответить на ваши вопросы на двух уровнях:
Первый: Вам потребуется авторизация для работы в защищенной среде, а браузер не для этого. Например, если вы охраняете отправку формы, вам нужно, чтобы код на стороне сервера, обрабатывающий отправку, проверял, соответствует ли ответ капчи ожидаемому. Тот факт, что состоянием на стороне клиента можно манипулировать, не должен иметь большого значения, если вы не используете его в качестве единственного источника проверки/авторизации, такого как пароли.
Второй: Я рекомендую вам использовать пароль-хэш библиотеку node.js для использования хешированные пароли. Я не проверял себя, но это не должно быть проблемой. Конечно, протоколы https - это то, как клиент и сервер должны общаться.
Конечно, пароль должен быть защищен и отключен для раскрытия, этого можно избежать с помощью refs и без события onChange.
<input type = "password" ref = "password"/>
И когда форма отправлена, вы можете получить пароль следующим образом
const password = this.refs.password.value;
Я согласен с @MarcoS, проблем с безопасностью нет.
Я бы добавил, что если вор знает, как читать состояние в инструментах разработки, он также может сделать это:
document.querySelector("[type=password]").value