Modern web applications are composed of dozens of interconnected layers: client-side UI frameworks, SSR meta-frameworks, content management systems, utility CSS engines, third-party analytics trackers, and edge CDN reverse proxies. Understanding what software powers a competitor's site, auditing legacy codebases, or conducting security reconnaissance requires understanding web technology stack detection and software fingerprinting.
This guide covers the core techniques used to detect frameworks, CMS platforms, CDNs, and backend runtimes directly from HTML source code, DOM attributes, script manifests, and HTTP response headers.
1. The 5 Vectors of Web Technology Fingerprinting
+-------------------------------------------------------------------------+
| Web Technology Inspection Vectors |
+-------------------------------------------------------------------------+
| 1. HTTP Response Headers -> Server, X-Powered-By, CF-Ray, x-vercel-id |
| 2. Meta Generator Tags -> <meta name="generator" content="..."> |
| 3. Script & Link Paths -> /_next/static/, /wp-content/plugins/ |
| 4. Hydration DOM Markers -> id="__next", data-v-, data-sveltekit- |
| 5. Global JavaScript APIs -> window.Shopify, window.dataLayer |
+-------------------------------------------------------------------------+
Inspect these vectors automatically on any live URL or HTML snippet using the Tech Stack Detector.
2. Detecting Frontend Frameworks & SSR Engines
Modern frontend frameworks leave distinct footprints during Server-Side Rendering (SSR) and client hydration.
Next.js (App Router & Pages Router)
Next.js injects standardized static chunk paths and state payloads:
- Pages Router: Look for
<script id="__NEXT_DATA__" type="application/json">andid="__next"in the root container. - App Router: Look for script bundles loaded from
/_next/static/chunks/main-app-*.jsor/_next/static/css/*.css. - Headers: Check for
x-nextjs-cache: HIT/MISSorx-powered-by: Next.js.
Nuxt (Vue.js)
Nuxt applications inject state hydration scripts:
- HTML Container: Look for
id="__nuxt"or<div data-v-app>. - State Manifest: Look for
<script>window.__NUXT__=(function(...))</script>. - Bundle URLs: Scripts loaded from
/_nuxt/*.jsor/_nuxt/entry.*.js.
SvelteKit
- HTML Attributes: Look for
data-sveltekit-hydrateordata-sveltekit-preload-data. - Script Manifests: Asset imports originating from
/_app/immutable/chunks/or/_app/immutable/entry/.
Astro
Astro's island architecture renders static HTML with selective interactive islands:
- DOM Tags: Look for custom elements like
<astro-island component-url="..." props="...">. - Meta Tags:
<meta name="generator" content="Astro v4.x">.
3. Detecting CMS Platforms, Themes & Installed Plugins
Content management systems follow structured asset URL conventions:
WordPress Deep Inspection
WordPress structures themes and plugins inside predictable directories:
- Themes: Linked stylesheets at
/wp-content/themes/{theme-slug}/style.css. - Plugins: Resource scripts at
/wp-content/plugins/{plugin-slug}/. - Core Scripts: Standard jQuery and block scripts at
/wp-includes/js/.
<!-- Example WordPress Asset Signature -->
<link rel="stylesheet" href="/wp-content/themes/astra/assets/css/minified/style.min.css"/>
<link rel="stylesheet" href="/wp-content/plugins/woocommerce/assets/css/woocommerce.css"/>
<script src="/wp-content/plugins/elementor/assets/js/frontend.min.js"></script>
Shopify Storefronts
Shopify renders metadata directly in the <head>:
- Global Objects:
window.Shopify = { shop: "brand.myshopify.com", theme: { id: 1234, name: "Dawn" } }. - Asset CDNs: External scripts loaded from
//cdn.shopify.com/s/files/.... - Shopify Apps: Script injections loaded from
/apps/{app-slug}/.
4. Fingerprinting CDN Layers, Reverse Proxies & Edge Hosts
Reverse proxies insert diagnostic headers that reveal the hosting environment:
| Provider | Signature HTTP Response Headers |
|---|---|
| Cloudflare | CF-Ray: [hash]-[datacenter], cf-cache-status: HIT, server: cloudflare |
| Vercel | x-vercel-id: [region]::[hash], x-vercel-cache: HIT, server: Vercel |
| Netlify | x-nf-request-id: [uuid], server: Netlify |
| AWS CloudFront | x-amz-cf-id: [id], via: 1.1 [id].cloudfront.net (CloudFront) |
| Fastly | x-served-by: cache-[region], x-cache: HIT |
| Akamai | x-akamai-transformed: [rule], x-check-cacheable: YES |
Audit your server headers and inspect CDN status using the HTTP Headers Analyzer.
5. Summary Detection Matrix
| Category | Primary Marker | Reliability |
|---|---|---|
| React | data-reactroot or /_next/ or react.production.min.js |
95%+ |
| Vue.js | data-v-[hash] or __NUXT__ or vue.global.prod.js |
95%+ |
| Tailwind CSS | Density of atomic utility classes (flex, grid, bg-, p-) |
85%+ |
| WordPress | /wp-content/ directory paths and generator meta tag |
98%+ |
| Shopify | cdn.shopify.com and Shopify.theme global object |
99%+ |
| Cloudflare | CF-Ray and cf-cache-status headers |
99%+ |
Frequently Asked Questions
Can tech stack detection be blocked by minification or obfuscation?
Minification changes variable names, but script paths (/_next/static/), DOM attributes (data-v-, ng-version), and hydration data payloads (__NEXT_DATA__) remain intact for the browser to function. Complete obfuscation requires custom server proxies and rewrite rules.
How does WTool Tech Stack Detector ensure privacy?
When you paste HTML into the Tech Stack Detector, all parsing and regex matching runs client-side in your browser. No HTML code or proprietary markup is transmitted to external servers.