Содержание
Узнать, установлен ли framework на сервере или в проекте, можно разными способами в зависимости от типа фреймворка: для бэкенд-фреймворков (Django, Laravel) достаточно выполнить команду проверки версии в терминале, для фронтенд-фреймворков (React, Vue) — проверить файл package.json или наличие соответствующих скриптов в проекте. Также существуют автоматизированные инструменты (Wappalyzer, BuiltWith), которые определяют используемые технологии на любом сайте прямо из браузера. В этой статье мы разберём все методы — от командной строки до визуального анализа кода страницы.
Проверка бэкенд-фреймворков (серверная часть)
Бэкенд-фреймворки — это код, который выполняется на сервере. Клиент (браузер) не видит его напрямую, но косвенные признаки существуют.
Самый надёжный способ — терминал сервера
Если у вас есть доступ к серверу по SSH или вы работаете с проектом локально, проверьте наличие фреймворка через пакетный менеджер языка.
- Django (Python): выполните в терминале
python -m django --version. Если Django установлен, вы увидите номер версии. Или проверьте файлrequirements.txtна наличие строкиDjango==X.X. - Laravel (PHP): в корне проекта выполните
php artisan --version(если установлен Artisan). Либо проверьте файлcomposer.jsonна наличие"laravel/framework"в секции require. - Express.js (Node.js): проверьте
package.jsonв секции dependencies:"express": "^4.18.2". Альтернативно — выполнитеnpm list expressв папке проекта.
Если доступа к серверу нет (чужой сайт)
Для анализа публичных сайтов используйте расширения браузера или просмотр HTTP-заголовков:
- Wappalyzer — расширение для Chrome/Firefox, которое определяет CMS, фреймворки, библиотеки и даже серверное ПО. Кликните на иконку — увидите список технологий.
- BuiltWith — аналогичный инструмент, доступный как расширение или как онлайн-сервис.
- Прямые признаки в коде страницы: откройте исходный код (Ctrl+U) и поищите комментарии или мета-теги, характерные для фреймворка. Например, WordPress оставляет
. Laravel может оставить куку с именемlaravel_session. Django иногда добавляет заголовокX-Powered-By: Django. - Заголовки ответа HTTP: в инструментах разработчика (вкладка Network) найдите ответ сервера и посмотрите заголовки
X-Powered-By,Server,X-Framework. Не все фреймворки их отдают, но многие (например, ASP.NET) показывают версию.
Проверка фронтенд-фреймворков (React, Vue, Angular)
Фронтенд-фреймворки работают в браузере, и их наличие определить проще. Однако современные сборки (Webpack, Vite) минифицируют и обфусцируют код, что может скрыть прямое название.
Локальный проект (у вас есть исходники)
- package.json — главный файл любого Node.js-проекта. Откройте его и найдите раздел
dependenciesилиdevDependencies. Наличие"react": "^18.2.0"говорит об использовании React,"vue": "^3.2.0"— Vue,"@angular/core"— Angular. - Файлы конфигурации сборки —
webpack.config.js,vite.config.js,vue.config.jsуказывают на окружение, но не всегда привязаны к конкретному фреймворку. - Точка входа (index.js / main.js) — посмотрите, откуда импортируются модули. Если в
index.jsнаписаноimport React from 'react'— понятно, что используется React.
Публичный сайт (без доступа к исходникам)
Здесь техники более хитрые, но работающие.
- Расширения Wappalyzer/BuiltWith — они и для фронтенда работают отлично.
- React DevTools / Vue DevTools / Angular DevTools — если вы установили официальное расширение для разработчика (React DevTools), то при заходе на сайт, написанный на React, иконка расширения загорится активным цветом. Это стопроцентный признак.
- Прямые признаки в DOM: откройте инспектор (F12) и найдите корневой элемент. React часто монтируется в
, Vue — в, Angular оставляет комментарии вродеdata-reactroot,data-reactid(в старых версиях). Vue оставляет комментарииили. - Анализ JavaScript-бандлов: посмотрите на исходный код загруженных JS-файлов (вкладка Sources DevTools). Если вы видите строки типа
__REACT_DEVTOOLS_GLOBAL_HOOK__илиVueв глобальном объектеwindow(наберитеwindow.Vueв консоли), значит фреймворк точно используется.
Проверка установки через пакетные менеджеры
Этот метод подходит, когда вы работаете с проектом и хотите узнать, какие глобальные фреймворки установлены в системе (например, на сервере или вашей локальной машине).
| Пакетный менеджер | Команда для поиска конкретного фреймворка | Команда для просмотра всех установленных пакетов |
|---|---|---|
| npm (Node.js) | npm list -g [имя_пакета] (глобально)npm list [имя_пакета] (локально) |
npm list -g --depth=0 (глобально)npm list --depth=0 (локально) |
| pip (Python) | pip show [имя_пакета] |
pip list |
| composer (PHP) | composer show [имя_пакета] |
composer show --installed |
Частые ошибки и нюансы
- Фреймворк может быть частью другого фреймворка. Например, CMS Joomla использует отдельные компоненты Symfony, но не является Symfony-приложением. Wappalyzer может показать и Joomla, и Symfony, что сбивает с толку.
- Современные сборки скрывают следы. React можно собрать в один минифицированный файл без атрибутов
data-reactroot. В таком случае расширения разработчика — ваш единственный друг. - Фреймворк может использоваться только на части страниц. Например, сайт на чистом PHP, но форма обратной связи написана на Vue. Поэтому проверяйте не только главную страницу, но и внутренние разделы (корзину, личный кабинет).
Мой экспертный совет
Для быстрой проверки технологического стека любого сайта (даже если вы не его владелец) используйте связку Wappalyzer + React DevTools. Первое расширение покажет бэкенд-фреймворки, CMS, сервер, а второе — подтвердит фронтенд-фреймворк. Если вы разработчик и вам нужно выяснить, что используется в чужом проекте на вашем сервере — начните с поиска файлов package.json и composer.json. И помните: отсутствие явных признаков не означает, что фреймворка нет; он мог быть собран с обфускацией, либо это самописное решение без фреймворка.
