Защита локальных данных в браузере: что реально возможно

В четвёртом модуле «Змейка» обрастает скинами, звуком и магазином: за очки можно купить визуальные фишки, а рекорд и количество монет удобно хранить прямо в браузере через localStorage. Но вот вопрос: а что, если пользователь откроет инструменты разработчика и пропишет себе миллион монет? Это уже не «взлом» — это обычная возможность браузера, и важно понимать, что от неё можно защитить, а что нет. В этой статье говорим честно: без иллюзий, без «военного шифрования» и с упором на здравый смысл.

Что такое localStorage и почему он «прозрачный»

localStorage — это встроенное в браузер хранилище вида «ключ — значение». Оно сохраняет данные между перезагрузками страницы, работает просто (setItem, getItem, removeItem) и не требует сервера. Идеально подходит для черновиков, настроек интерфейса, локального рекорда и кеша.

Аналогия: представь, что localStorage — это блокнот, лежащий на твоём рабочем столе. Любой, кто заходит в комнату, может его открыть, прочитать и переписать. Браузер не ставит замок: данные хранятся на устройстве пользователя, и пользователь ими полностью распоряжается.

Проверить это просто. Открой любую страницу, которая что-то сохраняет в localStorage, нажми F12, перейди во вкладку Application (в Chrome) или Storage (в Firefox), выбери Local Storage → адрес сайта. Ты увидишь пары ключ-значение. Двойной клик по значению — и можно написать что угодно. После обновления страницы сайт примет новое значение как родное.

Что реально можно защитить в браузере

Давайте не преувеличивать: в браузере можно защитить немногое. Но это «немногое» всё же полезно:

• Данные в пути. HTTPS (TLS) шифрует трафик между браузером и сервером. Это важно, но не относится к localStorage: он лежит уже на устройстве.
• От случайного повреждения. Можно проверять формат значения. Если вместо числа оказалась строка «abc», приложение сбрасывает значение в безопасное значение по умолчанию.
• От невнимательного взгляда. Можно кодировать значение в base64 или JSON — это убережёт от случайного редактирования, но не от человека с поисковиком.
• От изменения без подготовки. Можно добавить контрольную сумму (хеш) или подпись (HMAC). Если значение поменяли, приложение заметит несоответствие. Но ключ для проверки всё равно живёт в клиентском коде, а значит, его можно найти.
• Локальное шифрование. Через Web Crypto API можно зашифровать данные паролем пользователя. Это работает, пока пароль не записан в коде и не хранится рядом с данными.

Главное правило: всё, что выполняется на устройстве пользователя, контролируется пользователем. Можно усложнить жизнь любопытным, но нельзя сделать клиентскую защиту абсолютной.

Что защитить нельзя

Если данные хранятся только в браузере, их можно подменить. Примеры:

• Рекорд в игре.
• Количество внутриигровой валюты.
• Флаг «премиум-пользователь».
• Разблокированные скины или уровни.
• Любое состояние, по которому принимается важное решение.

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

Расширения браузера, пользовательские скрипты и консоль позволяют не только читать localStorage, но и перехватывать вызовы функций, подменять ответы и изменять логику приложения. Поэтому «спрятать» проверку в JavaScript бессмысленно: код доступен для чтения и изменения.

Когда без сервера не обойтись

Если от данных зависит честность, безопасность или взаимодействие между пользователями, им место на сервере. Сервер — это единственное место, где логику можно скрыть от пользователя и где можно доверять результатам.

Ситуации, когда нужен сервер:

• Общая таблица рекордов. Рекорд должен приходить на сервер вместе с данными игровой сессии, которую сервер может проверить или хотя бы записать.
• Аккаунты и сохранения. Состояние пользователя хранится в базе данных, браузер только отображает копию.
• Покупки и платежи. Любая оплата проходит через серверный обработчик; клиент лишь показывает результат.
• Достижения, разблокирующие контент. Условия должны проверяться на стороне сервера, иначе пользователь сам себе откроет всё.

В курсе это видно на примере модулей. В четвёртом модуле «Змейка» может хранить личный рекорд в localStorage — это нормально, потому что он важен только самому игроку. В пятом модуле, когда добавляется Supabase и общая таблица рекордов, сервер берёт на себя роль арбитра: он получает результат, проверяет авторизацию и записывает только то, что прошло проверку.

Практика: проверь, как легко меняется localStorage

Открой свою «Змейку» или любой сайт с localStorage и повтори:

1. Нажми F12.
2. Перейди в Application (Chrome) / Storage (Firefox).
3. Открой Local Storage → URL сайта.
4. Найди ключ, например snake_highscore или coins.
5. Дважды кликни по значению, введи 999999, нажми Enter.
6. Обнови страницу.

Игра теперь думает, что у тебя рекорд 999999. Никакого кода, никакого взлома — только два клика. Это и есть главный аргумент против того, чтобы доверять клиенту в вопросах безопасности.

Что можно сделать прямо сейчас

Если приложение работает только локально:

• Проверяй формат и диапазоны значений из localStorage.
• При повреждении данных сбрасывай их в безопасное значение по умолчанию.
• Не храни в localStorage ничего чувствительного: пароли, токены, личные данные.
• Для временных данных используй sessionStorage — оно очищается при закрытии вкладки.
• Предупреждай пользователя, что локальные данные привязаны к браузеру и могут быть потеряны.

Если появляется сервер:

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

Заключение

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

Поэтому честный подход: localStorage — для черновиков, настроек и персонального опыта; сервер — для всего, что должно быть защищено, проверено или разделено между пользователями. В «Змейке» это означает: свой рекорд в браузере — ок, общий рейтинг — только через сервер.

Источники

1. MDN — Web Storage API: developer.mozilla.org
2. web.dev — Understand storage in web browsers: web.dev/articles/storage-for-the-web