Коли ми працюємо з чутливими даними на клієнтській стороні, важливо вибирати безпечні методи їх зберігання. Хоча локальне сховище часто використовується для зберігання даних у фронтенд-аплікаціях, це не найкращий варіант для чутливої інформації. Локальне сховище доступне через консоль розробника або JS-код, що робить його вразливим до атак.
Асиметричне шифрування в локальному сховищі може здатися рішенням, але навіть у цьому випадку хакер може отримати доступ до зашифрованих даних. Іншим варіантом є зберігання даних у куках. Проте важливо знати, що фронтенд може взаємодіяти з куками — змінювати, видаляти та переглядати їх. Існують два типи куків, які можна встановити:
Non-HTTP Only cookie
Цей тип cookie подібний до локального сховища, де JS на клієнтській стороні може взаємодіяти з даними. Тому зберігати чутливі дані в таких куках не варто.
HTTP Only Cookie
Ці куки встановлюються сервером і не можуть бути доступні з клієнтської сторони, що робить їх більш безпечними. Вони ідеальні для зберігання чутливої інформації, як-от ідентифікатори сесій або токени автентифікації.
Загалом, зберігання чутливих даних на клієнтській стороні слід уникати, якщо це можливо. Якщо ж це необхідно, використовуйте шифрування, токенізацію та контекстне використання сховища.
Що стосується роботи з даними форм у Vue.js, один з основних принципів — це те, що пропси мають бути незмінними в дочірніх компонентах. Пряма мутація пропсів може призвести до помилок та непередбачуваної поведінки, зокрема коли працюєш з формами.
Використовуючи локальну змінну для зберігання даних форми, можна гарантовано уникнути впливу змін на стан батьківського компонента. Це дозволяє зберігати зміни лише в межах компонента і уникати непередбачуваних результатів.
Зокрема, при закритті модального вікна ми хочемо скинути форму до початкового стану. Якщо б ми не створили локальну копію даних, зміни, внесені користувачем, залишалися б у батьківському компоненті. Локальна змінна дозволяє скинути незбережені зміни при скасуванні.
Створення локальної змінної також покращує повторне використання компонентів. Оскільки модальне вікно працює лише зі своїм локальним станом, це дозволяє зменшити залежність від батьківського компонента. Таким чином, код стає чистішим і легшим для тестування та відлагодження.
Загалом, створення локальної змінної для управління станом форми є важливим кроком для забезпечення передбачуваної поведінки в Vue.js. Це дозволяє безпечно працювати з даними форм, скидати форму при необхідності і не змінювати стан батьківського компонента, якщо зміни не були збережені. Такий підхід робить компоненти більш стійкими, повторно використовуваними та простими в підтримці.
Перекладено з: The Importance of Creating a Local Variable for Form Data in Vue.js