Прогрессивный фишинг веб-приложений

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

Введение

Прогрессивные веб-приложения или PWAs - это приложения, созданные с использованием веб-технологий (например, HTML, CSS, JavaScript), которые могут быть установлены и вести себя аналогично собственным приложениям. PWA лучше интегрируются с операционной системой (т. Е. У них есть собственный значок приложения, они могут отправлять push-уведомления) и, следовательно, могут повысить вовлеченность веб-сайтов. Проблема с PWA заключается в том, что возможно манипулирование пользовательским интерфейсом в целях фишинга, о чем мы расскажем в этом блоге.

Введение-img

Требования к PWA

Прежде чем показывать сценарий атаки с использованием PWA, нам нужно понять, как его создать. Не стесняйтесь пропустить этот раздел, поскольку я предоставляю рабочий шаблон на моем GitHub для тестирования в конце этого поста. На базовом уровне для PWA требуются следующие файлы:

Файл манифеста - манифест представляет собой файл JSON, который предоставляет метаданные о веб-приложении. Он позволяет установить приложение на начальном экране пользователя.

{
  "name": "Microsoft Login",
  "short_name": "Microsoft",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

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

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js',
        '/images/icons/icon-192x192.png',
        '/images/icons/icon-512x512.png'
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

HTML-файл - основной HTML-файл связывает манифест и регистрирует service worker.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="manifest" href="/manifest.json">
  <title>Example PWA</title>
</head>
<body>
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/service-worker.js')
      .then((registration) => {
        console.log('Service Worker registered with scope:', registration.scope);
      }).catch((error) => {
        console.error('Service Worker registration failed:', error);
      });
    }
  </script>
</body>
</html>

Стили и скрипты - любые дополнительные файлы CSS и JavaScript для корректной работы PWA.

Сценарий атаки

Теперь, когда мы понимаем, как создается файл PWA, мы можем начать использовать его для фишинга. Мы выполним следующий сценарий атаки:

Жертва получает доступ к веб-сайту, контролируемому злоумышленником.
Жертва нажимает кнопку “Установить приложение Microsoft”.
В браузере появляется всплывающее окно с просьбой к пользователю установить приложение. Мы можем назвать наше приложение как угодно, например “Microsoft Login” или “login.microsoftonline.com”. Имейте в виду, что наше настоящее доменное имя будет указано под ним более мелким шрифтом.
Жертва устанавливает приложение.
После успешной установки перенаправьте окно PWA на фишинговую страницу с поддельной строкой URL, прикрепленной в верхней части страницы.

Излишне говорить, что этот сценарий может быть адаптирован для любой другой компании, кроме Microsoft.

Шаг 1 - Настройка целевой страницы

Мы начинаем с создания нашей целевой страницы с кнопки “Установить приложение Microsoft”.

Шаг 1

Шаг 2 - Установка приложения

При нажатии кнопки “Установить приложение Microsoft” пользователю предлагается установить наше приложение PWA.

Название приложения - “Microsoft Login".
Логотип Microsoft - это значок нашего приложения, который устанавливается в файле манифеста.

Шаг 2

Шаг 3 - Перенаправление

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

Шаг 3

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

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

Значок приложения

Обратите внимание, что значок приложения заменен логотипом Microsoft, что делает его более реалистичным.

Шаг 3

Заключение

Как мы видели, PWA открывают путь для манипуляций с пользовательским интерфейсом, которые могут заставить пользователей поверить, что они находятся на другом веб-сайте. У этого метода явно есть некоторые недостатки, такие как требование от целевого пользователя установить приложение. Кроме того, в окне PWA в правом верхнем углу ненадолго отображается фактическое доменное имя. Однако я полагаю, что привычка людей проверять строку URL приведет к тому, что они будут игнорировать это доменное имя (для этого требуется осведомленность о безопасности).

Скачать исходник можете по ссылке - https://disk.yandex.com/d/_tDRyXhg8V40uw