How to Detect Web Frameworks: A Comprehensive Guide

Introduction

Detecting which web framework powers a website is a valuable skill for developers, security researchers, and competitive analysts. This guide covers the techniques and signatures for identifying all major web frameworks.

Why Framework Detection Matters

• Performance Optimization: Understanding framework capabilities helps optimize similar projects
• Security Research: Different frameworks have different vulnerability profiles
• Competitive Analysis: Know what technologies competitors use
• Developer Hiring: Identify companies using your preferred technologies

Client-Side Framework Detection

React Detection

React has several telltale signs:

DOM Attributes:

<div data-reactroot=""></div>
<div data-reactid=".0.1.2"></div>

Window Objects:

// Check in browser console
window.__REACT__;
window._reactRootContainer;

Script Tags:

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18"></script>

File Paths:

• react-dom.production.min.js
• react.production.min.js
• Files in /static/js/ with numbered names (Create React App pattern)

DevTools Detection: React DevTools adds a $0._reactProps property when inspecting elements.

Version Detection:

// Check React version in console
React.version;
// or
Object.keys(document).filter((k) => k.startsWith("__react"));

Vue.js Detection

Vue has distinct characteristics:

DOM Attributes:

<div data-v-7ba5bd90></div>
<!-- Scoped styling -->
<div vue-ref="header"></div>

Window Objects:

window.__VUE__;
window.Vue;

Script Tags:

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="/js/chunk-vendors.js"></script>

Template Syntax:

<div v-if="showElement">Content</div>
<div v-for="item in items">{{ item.name }}</div>

Version Indicators:

• Vue 2: Options API patterns, new Vue() constructor
• Vue 3: Composition API, createApp() function

Angular Detection

Angular (all versions) has clear markers:

DOM Attributes:

<app-root ng-version="17.2.0"></app-root>
<div ng-reflect-router-outlet=""></div>

Script Tags:

<script src="main.js"></script>
<script src="polyfills.js"></script>
<script src="runtime.js"></script>

File Patterns:

• Named chunks: main.js, polyfills.js, runtime.js
• Zone.js always present in Angular apps

Version by Attribute:

// Check ng-version attribute
document.querySelector("[ng-version]")?.getAttribute("ng-version");

AngularJS (v1.x) Detection:

<div ng-app="myApp"></div>
<div ng-controller="MainCtrl"></div>
<span ng-bind="expression"></span>

Svelte Detection

Svelte is harder to detect but has patterns:

Script Tags:

<script src="/bundle.js"></script>
<!-- Single bundle typical -->

CSS Classes:

• Svelte-generated class names: svelte-1xyzabc

No Framework Object: Unlike React/Vue, Svelte compiles away and doesn't expose a global object.

Meta Tag:

<meta name="sapper:temp-version" content="..." />
<!-- Sapper (Svelte framework) -->

Next.js Detection

Next.js (React framework) has specific patterns:

Script Tags:

<script id="__NEXT_DATA__" type="application/json">
  ...
</script>
<script src="/_next/static/chunks/main.js"></script>

URL Patterns:

• /_next/static/ for static assets
• /_next/data/ for data fetching

Indicators:

• __NEXT_DATA__ script with page props
• next.config.js referenced in source maps
• Specific hydration patterns

Nuxt.js Detection

Nuxt (Vue framework) markers:

Meta Tags:

<meta name="generator" content="Nuxt.js" /> <meta data-n-head="ssr" />

Window Objects:

window.__NUXT__;
window.__nuxt__;

Script Tags:

<script src="/_nuxt/runtime.js"></script>
<script src="/_nuxt/app.js"></script>

Server-Side Framework Detection

Express.js (Node.js)

HTTP Headers:

X-Powered-By: Express

Error Pages:

• Express default error page styling
• Stack traces in development mode

API Patterns:

• RESTful endpoints
• Common middleware patterns

Django (Python)

Cookie Names:

• csrftoken
• sessionid

URL Patterns:

• /admin/ for Django admin
• /static/ for static files

HTTP Headers:

Set-Cookie: csrftoken=...

HTML Comments:

<!-- Django template comments -->

Flask (Python)

Cookie Names:

• session

Error Pages:

• distinctive Werkzeug debugger in development

URL Patterns:

• /static/ for static files

Laravel (PHP)

Cookie Names:

• laravel_session
• XSRF-TOKEN

URL Patterns:

• /api/ for API routes
• Storage paths like /storage/

HTTP Headers:

Set-Cookie: laravel_session=...

Ruby on Rails

HTTP Headers:

X-Runtime: 0.1234
X-Powered-By: Phusion Passenger

Cookie Names:

• _session_id
• remember_user_token

Meta Tags:

<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="..." />

ASP.NET Core

HTTP Headers:

X-AspNet-Version: 4.0.30319
X-AspNetMvc-Version: 5.2
X-Powered-By: ASP.NET

Cookie Names:

• .AspNetCore.Session
• .AspNetCore.Antiforgery.*

URL Patterns:

• .aspx pages (older ASP.NET Web Forms)

CMS Detection

WordPress

File Paths:

• /wp-content/
• /wp-includes/
• /wp-admin/

Meta Tags:

<meta name="generator" content="WordPress 6.4" />

Script Tags:

<script src="/wp-includes/js/jquery/jquery.min.js"></script>

CSS Classes:

• wp- prefixed classes
• wp-block- for Gutenberg blocks

Drupal

Meta Tags:

<meta name="generator" content="Drupal 10" />

File Paths:

• /sites/default/files/
• /misc/
• /modules/

Cookie Names:

• SESS... session cookies

Joomla

Meta Tags:

<meta name="generator" content="Joomla!" />

URL Patterns:

• /components/
• /modules/
• /templates/

E-commerce Platform Detection

Shopify

Script Tags:

<script src="https://cdn.shopify.com/s/files/1/..."></script>

File Paths:

• cdn.shopify.com

JavaScript Objects:

window.Shopify;
window.Shopify.theme;

WooCommerce

Dependencies:

• WordPress with specific WooCommerce indicators

Script Tags:

<script src="/wp-content/plugins/woocommerce/..."></script>

Body Classes:

• woocommerce
• woocommerce-page

Magento

Cookie Names:

• PHPSESSID
• frontend
• customer

File Paths:

• /static/
• /pub/static/

Meta Tags:

<meta name="generator" content="Magento 2" />

Detection Tools

Manual Detection

1. View Page Source: Search for framework-specific strings
2. Browser Console: Check for global objects
3. Network Tab: Examine loaded scripts
4. DevTools Elements: Look for framework attributes

Automated Detection

Use specialized tools:

• WebScope: Comprehensive framework detection with version identification
• Wappalyzer: Browser extension for real-time detection
• BuiltWith: Technology lookup service

API Detection

For programmatic detection:

// Example detection function
function detectFramework() {
  // React
  if (window.React || document.querySelector("[data-reactroot]")) {
    return "React";
  }
  // Vue
  if (window.Vue || window.__VUE__) {
    return "Vue";
  }
  // Angular
  if (document.querySelector("[ng-version]")) {
    return "Angular";
  }
  return "Unknown";
}

Framework Version Detection

React Version

// React 18+
React.version; // Returns "18.2.0"

// Or from the CDN URL
// react@18 -> React 18
// react-dom@17 -> React DOM 17

Vue Version

// Vue 2
Vue.version; // Returns "2.7.14"

// Vue 3
Vue.version; // Returns "3.3.4"

// Check by API
if (Vue.createApp) {
  // Vue 3
} else if (new Vue()) {
  // Vue 2
}

Angular Version

// From ng-version attribute
const version = document
  .querySelector("[ng-version]")
  ?.getAttribute("ng-version");
// Returns "17.2.0"

Detection Challenges

Minified Code

Framework code is often minified, making detection harder. Look for:

• Variable name patterns
• Characteristic function names
• Bundle structure

Tree Shaking

Modern builds may remove unused framework code. Detection strategies:

• Look for remaining artifacts
• Check for framework-specific attributes
• Examine bundle structure

Server-Side Rendering

SSR apps may not expose framework markers until hydration. Tips:

• Check for framework attributes after page load
• Look for hydration scripts
• Examine network activity

Best Practices

1. Use Multiple Methods: Combine techniques for accuracy
2. Verify Findings: Cross-check with multiple indicators
3. Handle False Positives: Some patterns are framework-agnostic
4. Stay Updated: Frameworks evolve, detection methods need updates
5. Respect Privacy: Don't abuse detection capabilities

Conclusion

Framework detection is a valuable skill that combines technical knowledge with investigative techniques. While automated tools like WebScope make this easy, understanding the underlying signs helps you verify results and handle edge cases.

For comprehensive framework detection with version identification and security insights, try WebScope's free scanner.