Этот пост - второй и последний из серии, в которой мы говорим о шифровании.
Мы рассмотрели некоторую теорию шифрования в первом посте и рассказали, как шифрование работает в AWS (шифрование на стороне сервера). В этом посте мы рассмотрим шифрование на стороне клиента, которое представляет собой метод шифрования данных на стороне отправителя перед их отправкой на сервер. Это в основном ваше приложение. Этот вид шифрования обеспечивает высокий уровень конфиденциальности, поскольку исключает возможность просмотра данных третьими сторонами, с которыми интегрируется ваше приложение. Например, предположим, что вы создаете медицинское приложение, которое собирает данные о пациентах, и хотите сохранить эти данные в базе данных. Шифрование на стороне клиента преобразует эти данные в зашифрованный текст перед отправкой, что помогает защитить их в случае потери или непреднамеренного раскрытия, поскольку эти данные будут нечитаемыми для всех, у кого нет доступа к ключу.
В следующем разделе мы вместе построим шифрование в браузере, чтобы гарантировать, что данные не покидают браузер до того, как они будут зашифрованы, что делает их видимыми в виде обычного текста только для конечного пользователя.
Создание приложения
Наше приложение соберет такие данные, как имя и возраст, а затем отправит их через POST-запрос на наш сервер. Однако для этого упражнения мы будем записывать данные в консоль браузера вместо отправки запроса POST. Это позволит нам просматривать данные до и после шифрования.
Мы будем использовать parceljs, чтобы собрать наш интерфейс с минимальными усилиями.
Front-end без шифрования
Следующие шаги помогут настроить интерфейс:
- Установить сборщик посылок глобально. Запустите
npm i -g parcel-bundler
в своем терминале - Инициализируйте свой проект как репозиторий npm:
npm init
- Установите SDK AWS Encryption для JavaScript:
npm install @aws-crypto/client-browser
- Создайте файлы src / index.html и src / index.js, которые будут формировать наше веб-приложение.
- Запустите команду
parcel index.html
в своем терминале, чтобы запустить приложение. Откройте в браузере http: // localhost: 1234.
Теперь реализуем функционал:
- Создайте файл индекса HTML:
<html> <body> <h1>Patient data</h1> <br /> <form action="" method="post" id="user-form"> <label>Name: </label> <input type="text" id="name" name="name" /><br /><br /> <label>Age: </label> <input type="text" id="age" name="age" /><br /><br /> <input type="submit" value="Submit" /> </form> <script src="./index.js"></script> </body> </html>
- Создайте js, который читает данные из HTML-формы:
const name = document.getElementById('name'); const age = document.getElementById('age'); const userForm = document.getElementById('user-form'); userForm.addEventListener('submit', (e) => { e.preventDefault(); console.log(name.value, age.value); });
До этого момента данные будут отображаться в виде обычного текста.
Интерфейс с шифрованием
В этом разделе мы будем использовать связку ключей AWS KMS для шифрования данных с помощью AWS Encryption SDK для JS в браузере. Связки ключей используются для шифрования конвертов (Взгляните на первую часть этого поста), где они генерируют, шифруют и расшифровывают ключи данных, которые будут использоваться для шифрования данных в браузере.
Сначала нам нужно создать связку ключей (требуется ключ генератора и поставщик клиента), а затем использовать его для шифрования простого текста:
- Настройте клиента-провайдера - в основном ваши учетные данные AWS - НЕ ЗАГРУЖАЙТЕ УЧЕТНЫЕ ДАННЫЕ (это только для демонстрационных целей)
- Создайте брелок
- Зашифруйте данные, используя созданную связку ключей
Полный код будет выглядеть следующим образом:
Взгляните на свою консоль и посмотрите, как имя шифруется после отправки.
Выполняя шифрование браузера, мы обеспечиваем защиту конфиденциальных данных перед их передачей третьей стороне, например, интернет-провайдеру или даже библиотеке, которую использует наш код.
Я надеюсь, что это было полезно, и хочу услышать ваши отзывы.