Даниэль Ленц - блог

Как же легко было его обмануть…

@dlents

Взломан фронтенд Polymarket. Каким образом? И как могли защититься?

Polymarket – одна из крупнейших платформ, где люди торгуют ставками на исходы реальных событий: президентские выборы, обладатель «Золотого мяча» и подобное. Расчеты по сделкам проходят в блокчейне.

29 октября (вчера) платформу взломали. За час вывели около $2,73 млн из 737 аккаунтов обычных юзеров.

А все дело в компрометации фронтенда площадки, а точнее одной из ее зависимостей.

Как взломали?

Polymarket использовал DebugBear — сторонний сервис для мониторинга производительности сайта. Для сбора метрик в страницы подключался скрипт с CDN DebugBear.

Хакеры добавили вредоносный код в скрипт DebugBear, который Polymarket берет из CDN. А поскольку внешний JS выполняется в контексте страницы, он получает доступ к тем же браузерным API и данным приложения, что и собственный код Polymarket.

В результате юзеры, заходящие на настоящий Polymarket, еще загружали и вредоносный JS.

Классическая Supply Chain Attack — атака через компрометацию сторонней зависимости.

Как примерно работал вредонос:

1. Скрипт читал localStorage, получая контекст авторизации, адрес кошелька и данные для работы с торговым API.

2. Через внутренние структуры React (Fiber) скрипт искал в памяти приложения торговый клиент с методами postOrder, createOrder и createMarketOrder.

3. Получив доступ к клиенту и механизму подписи транзакций, проверял балансы и открытые позиции пользователя.

4. В зависимости от типа кошелька пытался продать позиции или напрямую перевести токены на адрес злоумышленника.

Как защититься?

Один из механизмов защиты от подобных атак — Subresource Integrity (SRI).

Это старый браузерный механизм проверки целостности внешних ресурсов (таких как внешний скрипт из CDN).

Работает просто: заранее вычисляете хеш доверенной версии скрипта и указываете его в вашем HTML.

<script
  src="https://cdn.example.com/rum.js"
  integrity="sha384-..."
  crossorigin="anonymous"
></script>

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

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

Мог ли SRI предотвратить взлом Polymarket?

С высокой вероятностью да, если бы хеш чистой версии скрипта был заранее зафиксирован.

Но публичного подтверждения о наличии или отсутствии SRI у Polymarket нет.

👍 – если интересно и полезно

@dlents

Оптимизация БОЛЬШИХ картинок

Наткнулся на сайте Русского музея на просмотрщик картин: открываю картину – грузится быстро, начинаю приближать – качество отличное, видны все детали (как в тех самых сценах в кино).

На скринкасте выше слева просмотрщик на сайте музея, а справа просмотрщик на маке. Обе картинки изначально имеют одинаковое разрешении.

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

Оказалось, что в их просмотрщике используется тайловая загрузка.

Работает примерно как в картах: сначала показывается общий план, а при приближении догружаются подробности нужного участка.

Как оно устроено:

1) Готовим несколько разрешений картинки

Берем оригинал и создаем уменьшенные версии. Каждая следующая вдвое меньше по ширине и высоте. Получается пирамида от маленького общего вида до полного разрешения.

2) Нарезаем на тайлы каждую версию

Например, по 512 × 512 пикселей. Соседние тайлы могут немного перекрываться, чтобы при отрисовке не появлялись заметные стыки.

3) Добавляем метаданные изображения

Один из распространенных форматов — DZI (Deep Zoom Image). Файл .dzi содержит обычный XML: размеры оригинала, размер тайла, перекрытие и формат фрагментов. Сами JPEG лежат рядом в папках по уровням детализации.

4) Подключаем просмотрщик

Например, готовый OpenSeadragon (open-source, web-based viewer for zoomable images, implemented in pure JavaScript).

При открытии он подбирает разрешение под экран и загружает тайлы для общего вида. Если приближаем лицо на картине, то запрашиваетс более подробные фрагменты этой области. Двигаемся вправо — догружаются соседние. Уже загруженные тайлы остаются в кеше и могут использоваться повторно. При этом масштабирование остается плавным.

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

🔥 — полезно, не знал

@dlents