Парольная защита статичной HTML-страницы на JS

Обычно парольная защита производится через веб-сервер, который проверяет пароль и выдаёт контент. Стандартный способ: .htaccess и htpasswd. Но что, если нужно выложить зашифрованную веб-страницу и файлы на публичном хостинге, где у нас нет контроля над сервером? Эту проблему решают инструменты StatiCrypt и Portable Secret.

Для шифрования HTML перед публикацией StatiCrypt использует AES-256 и WebCrypto, а расшифровка происходит с помощью ввода пароля в браузере на стороне клиента, как показано в демо (пароль test).

StatiCrypt генерирует статическую страницу, которую можно безопасно заливать на любой хостинг, в том числе бесплатный сторонний хостинг, такой как GitHub Pages.

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

Расшифровка происходит на обычном JavaScript, то есть со стороны клиента не требуется скачивание и установка дополнительных инструментов, кроме стандартного браузера. Ни хостинг-провайдер, ни интернет-провайдер не получают доступ к этой информации в процессе расшифровки её расшировки в браузере.

Проверить шифрование можно в веб-версии StatiCrypt. Сверху поля для исходного HTML и пароля:

Снизу — результат с зашифрованным HTML:

Есть даже веб-редактор для HTML и различные опции оформления интерфейса:

Консольная утилита StatiCrypt доступна для скачивания на Github, а также в виде пакета NPM. В консольной программе настройка интерфейса для поля ввода пароля производится изменением шаблона lib/password_template.html в комплекте утилиты с указанием потом пути к шаблону через флаг -t path/to/my/file.html. Важно только не изменять фрагмент шифрования в этом шаблоне, в том числе формат переменных /*[|variable|]*/0 с обязательным нулём на конце.

Существует готовый шаблон для создания и хостинга одностраничного зашифрованного сайта на GitHub Pages.

По умолчанию поле ввода пароля содержит флажок «Запомнить меня» (Remember me). В этом случае пароль хранится в localStorage (в хешированном виде с солью). Опять же по умолчанию нет срока хранения пароля. Для отключения данной опции при генерации страницы из консоли можно использовать флаг --remember false. Срок хранения в днях указывает опция --remember NUMBER_OF_DAYS.

Страница шифруется с помощью AES-256 в режиме CBC, который в контексте StatiCrypt лишён характерных для него уязвимостей. Пароль хешируется с помощью функции PBKDF2: 599 тыс. операций хеширования SHA-256 и 1000 операций SHA-1 (для легаси), что составляет рекомендуемой значение 600 тыс. операций.

По сути, генерируется новая веб-страница (зашифрованная), которая вмещает содержимое старой.

Для наилучшей безопасности рекомендуется использовать пароли длиной более 16-ти символов (буквы, цифры, спецсимволы) и менеджер паролей. Например, опенсорсный Bitwarden. Хотя AES-256 считается надёжным современным шифром, но для лучшей защиты от брутфорса лучше использовать пароли как можно большей длины.

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

Похожий проект, но для шифрования файлов — Portable Secret. Его можно использовать для шифрования конфиденциальных файлов, которые хранятся в небезопасном месте: на USB-флешке, облачном хостинге, на веб-сайте и т. д. А также для шифрования файлов перед отправкой по открытому каналу: по почте или в мессенджере. В принципе, это современная удобная альтернатива PGP. Есть веб-демо для шифрования в браузере (в офлайне).