- Шведский разработчик Дэвид Фантоп создал метод извлечения React-компонентов с работающих сайтов без доступа к исходному коду.
- Метод использует внутреннюю структуру React Fiber и языковую модель для автоматической реконструкции работоспособного кода компонентов.
- Техника применима к статичным UI-компонентам, но имеет ограничения из-за анимаций и внутреннего состояния, а также вызывает вопросы правового характера.
Разработчик из Швеции Дэвид Фантоп представил новый подход к извлечению React-компонентов напрямую с продакшен-сайтов, не имея доступ к их исходному коду. Эта методика основана на уникальной архитектуре React, в которой наряду с видимой пользователю DOM-структурой существует скрытое Fiber-дерево. Fiber-структура хранит детальную информацию о том, какой компонент создал соответствующий элемент, с какими свойствами (пропсами) и в каком состоянии он находится.
Используя эту возможность, Фантоп разработал скрипт, который обходит Fiber-дерево и собирает соответствия между пропсами компонентов и результирующим HTML. Для восстановления рабочего кода применяется большая языковая модель (LLM), которая на основании собранных данных и минифицированного кода генерирует чистый React-компонент. Далее происходит верификация: компонент рендерится с теми же пропсами, а вывод сравнивается с оригиналом. Если есть различия, модель корректирует код. Обработка компонентов проводится в порядке их зависимостей — сначала элементарные (например, Button или Input), затем более сложные родительские компоненты.
Однако метод не лишён ограничений. Так, присутствие JavaScript-анимаций мешает точной верификации, поскольку состояние DOM может изменяться динамически, а внутреннее состояние компонентов, не выраженное через пропсы, остаётся недоступным. Для таких случаев автор предлагает альтернативный сценарий — просто сохранить статичный HTML. Техника эффективна для типичных статичных пользовательских интерфейсов, включая кнопки, карточки и формы.
Несмотря на техническую новизну, правовой статус подобного реверс-инжиниринга остаётся спорным. Данные для анализа уже отправляются браузеру и доступны публично, следовательно, это не взлом в классическом понимании. Тем не менее многие сайты прямо запрещают обратную разработку в пользовательских соглашениях, а коммерческое использование извлечённого кода может нарушать авторские права.
Таким образом, работа Фантопа демонстрирует перспективный способ анализа и воссоздания React-компонентов из уже загруженных веб-приложений, открывая новые возможности для изучения и повторного использования интерфейсных элементов, однако требует осторожного подхода с правовой точки зрения.
