Содержание
Узнать, на каком фреймворке сделан сайт, можно несколькими способами: через анализ HTTP-заголовков (например, заголовок X-Powered-By), изучение HTML-кода (специфичные CSS-классы, ID, комментарии), использование онлайн-детекторов (Wappalyzer, BuiltWith), анализ путей к статическим файлам (CSS/JS), а также по cookie, именам сессий и структуре URL. Ни один метод не даёт 100% гарантии, но комбинация из 2-3 подходов почти всегда раскрывает фреймворк.
Почему нужно уметь определять фреймворк сайта
Знание фреймворка конкурента или потенциального заказчика полезно для:
- Оценки сложности доработок (например, если сайт на Laravel, то найти PHP-разработчика проще, чем под самописный движок).
- Понимания, какие уязвимости могут быть (известные проблемы старых версий фреймворка).
- Выбора подрядчика: если ваш проект на Django, не стоит нанимать команду, специализирующуюся на Ruby on Rails.
- Быстрого прототипирования: увидели удачное решение — подсмотрели, на чём оно сделано.
Метод 1: Визуальный анализ HTML и CSS
Это самый простой способ, доступный любому пользователю через инструменты разработчика (F12).
- Классы и атрибуты: Фреймворки часто используют уникальные префиксы. Например, у Bootstrap классы начинаются с
col-,row-,btn-. У Tailwind CSS — множественные утилитарные классы вродеflex,pt-4,text-center. У Foundation —grid-x,cell. - ID и data-атрибуты: Vue.js использует атрибуты
v-(например,v-for,v-if). React —data-reactrootилиdata-reactid(в старых версиях). Angular — атрибутыng-или_ngcontent. - Структура комментариев: Некоторые фреймворки оставляют отладочные комментарии. Например, WordPress оставляет
<!-- /wp:paragraph -->. В Twig (шаблонизатор Symfony) можно встретить<!-- template name -->. - Формат ссылок (роутинг): Сайты на Angular часто используют
#в URL (hashbang). React Router может создавать URL без#, но с кастомной историей. Laravel и Django имеют свои паттерны ЧПУ, которые можно спутать, но в целом не слишком специфичны.
Таблица: признаки популярных фреймворков в HTML
| Фреймворк | Типичные маркеры в коде |
|---|---|
| Bootstrap | Классы .container, .row, .col-*, .btn-primary, компоненты модальных окон и навбара. |
| Tailwind CSS | Огромное количество классов в одном элементе: flex items-center justify-between p-4 bg-white shadow-md. |
| React (Next.js, Gatsby) | Атрибут data-reactroot или data-reactid, id="__next" (Next.js), div id="root" (Create React App). |
| Vue.js (Nuxt) | Атрибуты data-v-xxxxx, v- в исходниках (если не минифицирован), id="__nuxt" (Nuxt). |
| Angular | Атрибуты _ngcontent-xxx, ng-version в корневом теге, кастомные элементы <app-root>. |
Метод 2: Анализ HTTP-заголовков
Сервер может явно сообщать фреймворк в заголовках ответа. Проверьте через консоль браузера (вкладка Network) или командой curl -I https://example.com.
X-Powered-By— часто содержитPHP/7.4,ASP.NET,Express. Например,X-Powered-By: LaravelилиX-Powered-By: PleskLin(редко). Но администратор может отключить этот заголовок.Server— иногда указывает на серверное окружение, косвенно связанное с фреймворком (например,Server: WSGIServer/0.2часто у Django).Set-Cookie— имена сессий:laravel_session(Laravel),djdt(Django Debug Toolbar),JSESSIONID(Java Spring),PHPSESSID(чистый PHP или любой PHP-фреймворк).- Заголовки
X-FrameworkилиX-Generator— явный ответ (но редко встречается).
Метод 3: Пути к статическим файлам (CSS, JS)
Фреймворки часто генерируют стандартные пути к ассетам.
- Laravel:
/css/app.css,/js/app.js,/vendor/laravel/...(хотя пути могут быть изменены). Наличие файла/mix-manifest.json(Laravel Mix) почти стопроцентный признак. - Django:
/static/admin/— стандартная панель администратора. Даже если админка скрыта, путь/static/admin/css/base.cssчасто доступен. - Ruby on Rails:
/assets/application-*.css,/assets/application-*.jsс fingerprint'ом (хеш в имени файла). - Symfony:
/bundles/,/assets/или файлы/app.js,/app.cssв корне сборки Encore. - WordPress (CMS, но часто её путают с фреймворком):
/wp-content/,/wp-includes/,/wp-admin/. Это один из самых лёгких для распознавания.
Метод 4: Онлайн-детекторы и расширения браузера
Не нужно быть экспертом — инструменты сделают работу за вас.
- Wappalyzer (расширение для Chrome/Firefox) — определяет CMS, фреймворки, библиотеки, серверное ПО. Точность высокая, определяет Laravel, Django, React, Vue, Angular, Bootstrap и сотни других.
- BuiltWith (онлайн-сервис) — даёт подробный отчёт по технологиям сайта, включая фреймворки и хостинг. Часть информации платная, но базовый анализ бесплатен.
- WhatRuns — альтернатива Wappalyzer, чуть менее известна.
- Retire.js — расширение для поиска уязвимых версий JavaScript-библиотек (косвенно указывает на фреймворк).
Эти сервисы работают на основе анализа тех же заголовков, HTML и JavaScript-переменных. Обычно они точнее ручного просмотра.
Метод 5: Специфичные для фреймворка ошибки и сообщения
Если сайт не настроен для production, можно увидеть страницу ошибки, которая выплёвывает имя фреймворка. Например:
- Деббаг-панель Laravel (красивая серо-оранжевая страница с
Whoops, looks like something went wrong.). - Страница ошибки Django (жёлто-серая с большим количеством стека и словами
Django Version). - Страница ошибки Symfony (с логотипом Symfony, если включён режим отладки).
Конечно, на боевых проектах отладка обычно отключена, но разработчики иногда забывают.
Метод 6: Анализ JavaScript-бандлов и глобальных переменных
Откройте консоль браузера (F12 → Console) и введите:
window.Reactилиwindow.ReactDOM— если они определены, то сайт точно использует React.window.Vue— наличие указывает на Vue.js (часто глобальная переменная в старых версиях или при сборке без модулей).window.angularилиwindow.ng— для AngularJS (устаревший) или Angular (реже).window.jQuery— не фреймворк, но может говорить о том, что сайт старый (и часто использует Bootstrap 3/4).window.laravel— редко, но иногда Laravel передаёт CSRF-токен в глобальную переменную:Laravel.csrfToken.
Посмотрите исходный код бандлов: иногда в комментариях или не минифицированной части остаются строки с названием сборщика (webpack, vite, mix), которые жёстко привязаны к фреймворку. Например, mix-manifest.json — 100% Laravel Mix.
Нюансы и ложные срабатывания
Важно понимать: сайт может использовать несколько фреймворков. Например, бэкенд на Django, а фронтенд — на React. Или какая-то страница на WordPress, а корзина на Laravel (микросервисы). Также многие разработчики настраивают сервер так, чтобы скрыть следы фреймворка (убирают X-Powered-By, переименовывают классы, отключают отладку). В этом случае определить фреймворк очень сложно — потребуется анализ структуры базы данных (через SQL-инъекцию, что незаконно) или социальная инженерия.
Определение фреймворка на серверном уровне (бэкенд)
Если у вас есть доступ к серверу (вы администрируете проект или получили разрешение), то способы более точные:
- Посмотреть файл
composer.json(для PHP-фреймворков: Laravel, Symfony). - Посмотреть файл
package.json(для Node.js: Express, Nest, Next.js). - Запустить команду
php artisan --version(Laravel) илиpython manage.py --version(Django) в консоли сервера. - Проверить структуру каталогов:
/app,/routes,/config— типично для Laravel./apps,/lib— для Phoenix (Elixir).
Таблица: быстрая диагностика по косвенным признакам
| Признак | Вероятный фреймворк |
|---|---|
URL содержит index.php? без ЧПУ |
Чистый PHP или старый фреймворк (CodeIgniter 3). |
Cookie с именем laravel_session |
Laravel (почти гарантированно). |
| В админке URL /wp-admin или /wp-login.php | WordPress (хотя это CMS, но её часто ошибочно называют фреймворком). |
HTTP-заголовок Server: nginx/1.18.0 и структура ссылок /en/products/ без расширений |
Может быть Django, Laravel, Rails. Требуется дополнительный анализ. |
Практический пример: определяем фреймворк GitHub.com
Откроем инструменты разработчика на GitHub. Смотрим:
- В HTML нет явных
data-reactroot, но естьreactв названиях классов (после минификации). - В консоли
window.React— undefined, но__REACT_DEVTOOLS_GLOBAL_HOOK__присутствует — значит, React используется. - Cookie: нет явных признаков бэкенд-фреймворка (GitHub использует свой самописный стек на Ruby, но это не Rails классический).
- Расширение Wappalyzer показывает:
React,Ruby on Rails(частично),Vue.js(для некоторых виджетов).
Итог: GitHub — гибрид, но основной фронтенд-фреймворк — React.
Что делать, если фреймворк определить не удалось?
Если все методы не дали результата, возможно:
- Сайт написан на самописном движке (кастомный PHP, Python без фреймворков).
- Разработчик сознательно затер все следы (это делают для усложнения взлома или копирования).
- Сайт использует очень нишевый или устаревший фреймворк (например, Zend Framework 1, который сейчас встречается редко).
В таком случае можно написать автору сайта и вежливо спросить (если у вас есть причина). Или использовать сервис BuiltWith — платная версия иногда находит даже скрытые технологии.
Итог: комбинируйте методы для точного результата
Узнать фреймворк сайта — реальная задача, решаемая за 2-3 минуты. Лучшая практика: Wappalyzer + анализ HTML/JS-маркеров + проверка cookie. Никогда не полагайтесь на один признак. И помните: знание фреймворка нужно для легитимных целей (исследование, безопасность вашего проекта, аудит конкурентов). Не пытайтесь взломать сайт, даже если нашли его фреймворк и известную уязвимость — это незаконно.
