Постановка проблемы!

Большинство пользователей сохраняют данные в локальном хранилище. Является ли это безопасным способом хранения данных?
Нет!
Любой, у кого есть доступ к устройству, может читать и обрабатывать данные, записанные в локальное хранилище в виде простой строки.

Шифрование и дешифрование — это способы безопасного сохранения данных в localStorage. Однако в этом случае вам понадобится общий безопасный ключ для шифрования и расшифровки данных.

Рассмотрим следующий сценарий: вы зашифровали данные для входа пользователя и сохранили их локально. Когда вы перезагружаете платформу, вы расшифровываете данные, которые были записаны в локальное хранилище, и помечаете пользователя как вошедшего в систему или вышедшего из системы. Ваш веб-сайт и платформа используют один безопасный ключ для шифрования и дешифрования, что означает, что только ваш веб-сайт знает, как расшифровывать.

Если кто-то скопирует данные из локального хранилища и вставит их в отдельный браузер, а затем посетит ваш сайт, ваш сайт будет аутентифицировать пользователя. Почему?
потому что ваш сайт умеет декодировать данные!

Это проблема, когда у вас есть один ключ безопасности! Тогда как мы решим эту проблему?

Решение состоит в том, чтобы создать безопасный ключ в зависимости от вашего веб-сайта и браузера; давайте взглянем на библиотеку react-secure-storage!

У нас есть возможность использовать Secure Storage в React Native; что, если бы у нас была такая же сила в ReactJ?

Почему React Secure Storage?

Безопасное хранилище React было создано для безопасной записи данных в локальное хранилище (по сути, это оболочка, написанная поверх локального хранилища по умолчанию для безопасной записи данных в локальное хранилище). Библиотека безопасного хранения создает ключ безопасности для каждого браузера и шифрует данные с помощью этого ключа, что означает, что только браузер, зашифровавший данные, может их расшифровать.

Кроме того, безопасное хранилище React сохраняет формат данных для каждого типа данных. По умолчанию оно поддерживает следующие типы данных.

Строка | Объект | Номер | логическое значение

Это означает, что вам не нужно явно преобразовывать все данные в строку.

Как это работает ?

Безопасное хранилище React написано в шаблоне проектирования Singleton. Когда библиотека инициализируется, она считывает все данные из локального хранилища и расшифровывает все данные, записанные с использованием react-secure-storage, и сохраняет их в памяти. Это обеспечивает более быстрое считывание всех данных.

Ключ создается с помощью отпечатка пальца браузера, который состоит из более чем 10 идентификаторов ключа браузера и ключа безопасности, введенного пользователем.

Пользовательский безопасный ключ можно настроить с помощью файла .env как

SECURE_LOCAL_STORAGE_HASH_KEY=xxxxxxxxxxxxxxxx

or

REACT_APP_SECURE_LOCAL_STORAGE_HASH_KEY=xxxxxxxxxxxxxxxx

Как использовать

Чтобы использовать библиотеку, сначала необходимо установить ее с помощью

yarn add react-secure-storage

or

npm install react-secure-storage

Вы можете использовать следующие методы для чтения и записи элементов для защиты локального хранилища.

Подробнее о библиотеке читайте здесь https://www.npmjs.com/package/react-secure-storage

Образец кода

Ключевые слова