Недавно я работал над проектом для клиента, который включал страницы аутентификации и, следовательно, входа в систему. Когда я пошел настраивать текстовые вводы для логина и пароля, выскочил вопрос, о котором я раньше не задумывался. Является ли хорошей практикой безопасности использование контролируемых компонентов для входа с типом пароля?
Прежде чем мы углубимся в ответ на этот вопрос, мы должны сначала посмотреть, что такое контролируемые компоненты и как атрибут «пароль» для ввода фактически влияет на вводимый текст на вашем экране, а также на данные, хранящиеся в DOM.
Что такое контролируемые компоненты?
При традиционных вводах значение ввода сохраняется как атрибут элемента. Чтобы получить доступ к этим значениям, мы должны использовать JavaScript для подключения к элементу, в противном случае дождитесь отправки формы, чтобы получить доступ к этим значениям.
React предоставляет новый способ работы с входными значениями за счет использования контролируемых компонентов. Вместо того, чтобы позволить элементам ввода управлять своим состоянием, мы используем смесь переменных состояния и хуков onChange для передачи права собственности на входные значения от элемента ввода компоненту React.
Мы используем этот шаблон на изображении ниже:
Здесь мы устанавливаем хук useState для хранения и обновления значения пароля. Мы устанавливаем значение ввода в переменную пароля и устанавливаем обработчик события onChange для обновления значения нашей переменной пароля каждый раз при изменении ввода. Это формирует циклический процесс, в котором пользователь взаимодействует с элементом ввода, который запускает вызов onChange, который обновляет переменную пароля, которая, в свою очередь, изменяет атрибут значения в элементе ввода.
Преимущество этого заключается в более централизованном и непосредственном доступе к этим входным значениям, поскольку они хранятся в состоянии компонента, но возникает вопрос, подвергает ли эта централизация состояния и отложение ответственности входными данными компонент React наши входные значения большему риску.
Что происходит под капотом для ввода пароля?
Элемент ввода HTML по умолчанию имеет тип текста. Это означает, что любой тег ‹input›, помещенный в файл HTML без указания типа, по умолчанию будет иметь обычный текст. Конечно, есть много разных типов данных, которые мы можем запросить у пользователя, и мы хотели бы избежать необходимости переписывать проверки и функциональность элементов для каждого типа данных. Именно из-за этой необходимости HTML добавил типы для ввода, включая пароль, адрес электронной почты и телефон, среди многих других.
Эти различные типы предлагают проверку на уровне поверхности или дополнительные функции, недоступные для текстового типа по умолчанию. Когда мы хотим скрыть пароли пользователей от посторонних глаз, мы можем создать тег ввода с типом пароля. С этим атрибутом все символы, введенные во ввод, будут отображаться в виде однородных точек, а не определенных символов.
Мы можем видеть это на практике в фрагменте кода ниже:
Это отлично подходит для того, чтобы другие люди, которые физически находятся рядом с вами, не могли видеть символы на вашем экране, но как это влияет на то, что хранится в DOM? Чтобы ответить на этот вопрос, нам нужно исследовать атрибут value. Наряду с атрибутом типа входные теги HTML имеют атрибут значения. Это может быть предустановлено, но как только пользователь взаимодействует с вводом, этот атрибут значения будет хранить результирующее значение.
Хотя значение нашего пароля может выглядеть как точки на экране, в DOM это выглядит так:
Здесь мы видим, что значением нашего входного атрибута является наш пароль «password1». Точки и безопасность, обеспечиваемые вводом типа пароля, распространяются только на визуальные эффекты на экране и не защищают пароль, хранящийся в DOM. Другими словами, любое входное значение будет полностью видно тем, у кого есть доступ к DOM, независимо от того, как оно отображается в пользовательском интерфейсе.
Должны ли мы сделать наш ввод пароля контролируемым компонентом?
Мы обсудили, что такое контролируемые компоненты и как они используются, а также рассмотрели различные типы элементов ввода, в частности тип пароля. Ответ на наш вопрос — стоит ли использовать контролируемые компоненты для управления паролями в React? - Да. Хотя элемент ввода с типом пароля скрывает физических пользователей от просмотра того, что находится на вашем экране, он никак не влияет на видимость значения в вашей модели DOM.
Управляемые компоненты не усугубляют ситуацию, поскольку все, что они делают, — это перемещают управление состоянием пароля из самого элемента ввода в переменную состояния в элементе JSX. Из-за этого вы должны чувствовать себя комфортно, выбирая либо традиционный подход к вводу и отправке паролей, либо компоненты с отслеживанием состояния для обработки состояния пароля. В любом случае работает и имеет одинаковую безопасность.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.
