Безопасное использование local storage в offline HTML5-приложениях

Быстрый ответ

По сути, локальное хранилище не обладает необходимой безопасностью, поскольку оно подвержено атакам типа кросс-сайтового скриптинга (XSS), которые позволяют любому скрипту на вашем сайте обращаться к нему. Это подходит для хранения общедоступных данных, но для обеспечения защиты конфиденциальной информации стоит использовать httpOnly Secure Cookies или Web Cryptography API для предварительного шифрования данных.

Пример применения безопасных Cookies:

Set-Cookie: sessionId=abc123; HttpOnly; Secure;

Вариант шифрования данных:

window.crypto.subtle.encrypt({ name: "AES-GCM", iv: crypto.getRandomValues(new Uint8Array(12)) }, key, data)
  .then(encrypted => ...);

Стратегии усиления безопасности вашего приложения

Повышение уровня безопасности локального хранилища

Для защиты данных, хранимых в локальном хранилище, можно использовать библиотеки шифрования, такие как Stanford Javascript Crypto Library.

Шифрование данных перед сохранением:

sjcl.encrypt("password", "data");

Подробнее об этом расскажет наш спикер на видео

Применение шифрования диска и защищённых хранилищ ключей

Шифрованный раздел на диске обеспечит защиту ваших данных в автономном режиме. Использование его в сочетании со защищенным хранилищем ключей повысит степень безопасности.

Пример создания шифрованного раздела:

sudo cryptsetup luksFormat /dev/sdx

Важность обеспечения физической защиты

Полный физический доступ к устройству подразумевает провал системы безопасности. Важно ограничивать сетевой доступ и применять дополнительное шифрование.

Принципы безопасного программирования

Для обеспечения безопасности своего приложения используйте протоколы SSL/TLS и строгие методы валидации на серверной стороне. Также следует соблюдать рекомендации из OWASP XSS cheat sheet и проекта antisamy.

Методы обеспечения повышенной безопасности при программировании

Борьба с XSS

Для уменьшения угрозы XSS используйте Content Security Policy и не доверяйте пользовательскому вводу.

Примеры использования CSP заголовков:

Content-Security-Policy: script-src 'self';

Отказ от использования локальных хранилищ в пользу безопасных альтернатив

Рассматривайте IndexedDB и безопасные cookies в качестве замены локальному хранилищу, если требуется повышенная безопасность.

Пример использования IndexedDB с шифрованием:

const encryptedData = CryptoJS.AES.encrypt(JSON.stringify(data), password).toString();

Применение собственных методов шифрования для обеспечения конфиденциальности

При работе с особо чувствительными данными используйте самостоятельные методы шифрования, например, метод AES-256.

Пример собственного шифрования:

const encryptedData = CryptoJS.AES.encrypt(data, 'секретный ключ 123').toString();

Визуализация

Оценим уровень безопасности локального хранилища:

Локальное хранилище — это дом 🏠 с открытыми дверями (`http`):
Любой желающий (🧟‍♂️) может заглянуть или войти внутрь.

Если же вы применяете защиту (`https`):
Доступ имеет только обладатель ключа (🔑), однако окна (🪟) могут оставаться незащищенными.

Общий обзор характеристик локального хранилища:

| Функция              | Локальное хранилище |
| -------------------  | ------------------- |
| Зашифрованные данные | ❌ (📦 открыто)     |
| Доступ только с клиентской стороны | ✅ (🏡 безопасно) |
| Контроль доступа     | ❌ (🚪 открыто)     |
| Уязвимость для XSS   | ✅ (🧟‍♂️ Да)      |

Помните: на 100% безопасных хранилищ не существует, но любые меры безопасности лучше, чем их отсутствие.

Локальное хранилище можем представить как кувшин 🍪 для печенья:
Отлично подходит для хранения данных, но не стоит ли возложить сохранность своих ценностей 💎 (конфиденциальных данных) на что-то надежней? Рассмотрите использование **зашифрованного хранилища** 🏦.

Инструменты разработчика для защиты данных

Ваш новый товарищ: Web Cryptography API

Web Cryptography API предоставит надёжную защиту конфиденциальных данных перед их сохранением в локальном хранилище.

Пример применения Web Cryptography API:

window.crypto.subtle.digest('SHA-256', new TextEncoder().encode(data))
 .then(digest => ...);

Приватные функции: недоступны для посторонних глаз

Используйте замыкания в JavaScript или модули для сохранения приватности ваших данных и функций.

Пример создания приватных переменных:

const secureModule = (function() {
  let privateVariable = 'секрет';
  return {
    publicMethod: () => privateVariable
  };
})();

Берегитесь кейлоггеров: защищенное ввод данных

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

Пример двухфакторной аутентификации:

// Использование сервисов таких как Authy или Google Authenticator для усиления безопасности.

Полезные материалы

1. Web Storage API – Веб API | MDN — подробное описание веб-хранилища в документации MDN.
2. Безопасность HTML5 – ОWASP Cheat Sheet Series — рекомендации OWASP по повышению безопасности веб-приложений.
3. HTML Веб хранилище API — Практическое руководство от W3Schools по использванию HTML5 веб-хранилище.
4. Скотт Хелме — рекомендации Скотта Хелме по использованию локального хранилища с учётом безопасности.
5. "веб хранилище" | Могу ли я использовать... Таблицы поддержки для HTML5, CSS3 и т.д. — сервис Can I use... для проверки совместимости с браузерами.