← Назад к экспериментам

Лабораторные проекты

Security Playground

Интерактивные демонстрации типичных ошибок веб-безопасности и более безопасных подходов.

Примечание о безопасности

  • Это безопасные учебные симуляции.
  • Они не атакуют реальные системы и устроены так, чтобы не выполнять настоящую вредоносную нагрузку.
  • Они учат разработчиков фронтенда и full-stack безопасному подходу к работе.

Демонстрация XSS

XSS и небезопасный вывод HTML

Почему вывод недоверенного HTML опасен.

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

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

Привязка v-html (имитация)

Ожидание ввода…

Безопасный вывод с экранированием

Стандартная интерполяция

Ожидание ввода…
Основные выводы:
  • Никогда не доверяйте пользовательскому вводу.
  • Избегайте вывода необработанного HTML от пользователей.
  • Всегда экранируйте вывод (по умолчанию в Vue/React).
  • Если HTML необходим, очищайте его надёжными библиотеками и применяйте строгую CSP.

Демонстрация хранения токенов

Хранилище браузера и раскрытие токенов

Почему хранить секретные токены в localStorage рискованно.

Показывает, как любой скрипт на странице, в том числе внедрённый, может читать localStorage.

Имитируемое содержимое localStorage:

{ "auth_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.simulated_mock_token_g2k7eja2" }
Основные выводы:
  • Любой JavaScript на странице имеет доступ к localStorage.
  • При наличии XSS-уязвимости злоумышленники могут украсть сохранённые токены.
  • Для секретных идентификаторов сессий предпочтительнее cookies с HttpOnly и Secure.
  • Всегда ограничивайте срок действия и полномочия токенов.

Демонстрация распознавания фишинга

Распознавание фишинга и поддельных страниц входа

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

https://secuure-login-update.com/auth

Войти в аккаунт

Требуется действие: подтвердите в течение 24 часов

Список проверок

Перед вводом учётных данных проверьте:

  • ❌Проверьте домен: secuure-login-update.com явно подозрителен.
  • ❌Остерегайтесь срочности: «Подтвердите в течение 24 часов» — классический приём социальной инженерии.
  • ✅Проверьте HTTPS: Присутствует, но защищённое соединение с поддельным сайтом не делает его подлинным.
  • ✅Используйте менеджер паролей: Он не будет автоматически заполнять данные на незнакомом домене.
Основные выводы:

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

Демонстрация принципа SQL-инъекции

Принцип SQL-инъекции

Почему конкатенация строк SQL опасна, а параметризованные запросы безопаснее.

Небезопасная конкатенация строк

SELECT * FROM users WHERE username = 'admin';

Безопасный параметризованный запрос

SELECT * FROM users WHERE username = $1;

$1 ="admin"
Основные выводы:
  • Никогда не включайте недоверенный ввод в запросы путём конкатенации.
  • Всегда используйте параметризованные запросы или надёжные ORM.
  • Проверяйте и ограничивайте типы входных данных на сервере.