Этот пост - второй и последний из серии, в которой мы говорим о шифровании.

Мы рассмотрели некоторую теорию шифрования в первом посте и рассказали, как шифрование работает в 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 - НЕ ЗАГРУЖАЙТЕ УЧЕТНЫЕ ДАННЫЕ (это только для демонстрационных целей)
  • Создайте брелок
  • Зашифруйте данные, используя созданную связку ключей

Полный код будет выглядеть следующим образом:

Взгляните на свою консоль и посмотрите, как имя шифруется после отправки.

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

Я надеюсь, что это было полезно, и хочу услышать ваши отзывы.