JavaScript Library Detection: Know What Sites Are Built With

Published: January 2024
Reading time: 7 minutes

Every website uses JavaScript libraries. jQuery, React, Vue, countless others. Knowing which libraries a site uses reveals architecture decisions, potential vulnerabilities, and development patterns. Here's how to detect them.

Why Library Detection Matters

For Developers

• Debug faster: Know what you're dealing with
• Learn patterns: See how others implement
• Estimate complexity: Gauge project scope
• Find vulnerabilities: Outdated versions

For Security

• Version checking: Old jQuery = security risk
• Known vulnerabilities: CVE database matches
• Attack surface: What can be exploited
• Dependency chains: Hidden libraries

For Business

• Tech stack insights: Competitor analysis
• Hiring needs: What skills they need
• Migration opportunities: Outdated tech
• Cost estimation: Enterprise vs. open source

How Library Detection Works

1. Global Variables

// Common global variables
window.jQuery          // jQuery
window.React          // React
window.Vue            // Vue.js
window.angular        // Angular
window._              // Lodash/Underscore
window.moment         // Moment.js
window.axios          // Axios

Detection code:

function detectGlobals() {
  const libraries = [];
  
  if (window.jQuery) {
    libraries.push({
      name: 'jQuery',
      version: window.jQuery.fn.jquery
    });
  }
  
  if (window.React) {
    libraries.push({
      name: 'React',
      version: window.React.version
    });
  }
  
  if (window.Vue) {
    libraries.push({
      name: 'Vue.js',
      version: window.Vue.version
    });
  }
  
  return libraries;
}

2. DOM Signatures

// React adds data attributes
<div data-reactroot="">

// Vue adds directives
<div v-for="item in items">

// Angular adds ng- attributes
<div ng-repeat="item in items">

// Alpine.js uses x- attributes
<div x-data="{ open: false }">

3. Script Sources

// Check loaded scripts
Array.from(document.scripts).forEach(script => {
  const src = script.src;
  
  // CDN patterns
  if (src.includes('jquery')) console.log('jQuery detected');
  if (src.includes('react')) console.log('React detected');
  if (src.includes('vue')) console.log('Vue detected');
  
  // Version from CDN URL
  const version = src.match(/(\d+\.\d+\.\d+)/);
  if (version) console.log('Version:', version[1]);
});

4. Network Requests

// Monitor for library-specific API calls
performance.getEntriesByType('resource').forEach(resource => {
  // GraphQL = likely Apollo/Relay
  if (resource.name.includes('/graphql')) {
    console.log('GraphQL client detected');
  }
  
  // Socket.io
  if (resource.name.includes('socket.io')) {
    console.log('Socket.io detected');
  }
});

Common Library Patterns

jQuery (Still Everywhere)

// Detection
if (window.jQuery || window.$) {
  const version = $.fn.jquery;
  console.log(`jQuery ${version}`);
  
  // Check for jQuery UI
  if ($.ui) {
    console.log(`jQuery UI ${$.ui.version}`);
  }
  
  // Check for plugins
  if ($.fn.validate) console.log('jQuery Validate');
  if ($.fn.select2) console.log('Select2');
}

Security note: jQuery < 3.5.0 has XSS vulnerabilities

React Ecosystem

// React detection
if (window.React) {
  console.log(`React ${React.version}`);
  
  // Check for common companions
  if (window.ReactDOM) console.log('ReactDOM detected');
  if (window.Redux) console.log('Redux detected');
  if (window.ReactRouter) console.log('React Router detected');
}

// Alternative: Check DOM
if (document.querySelector('[data-reactroot]')) {
  console.log('React app detected (no global)');
}

Vue.js Detection

// Vue 2/3 detection
if (window.Vue) {
  console.log(`Vue ${Vue.version}`);
} else {
  // Check for Vue 3 apps
  const vueApps = document.querySelectorAll('[data-v-]');
  if (vueApps.length) {
    console.log('Vue.js detected (compiled)');
  }
}

// Vuex store
if (window.Vuex) {
  console.log('Vuex state management');
}

Modern Frameworks

// Next.js
if (window.__NEXT_DATA__) {
  console.log('Next.js detected');
  console.log('Build ID:', window.__NEXT_DATA__.buildId);
}

// Nuxt.js
if (window.__NUXT__) {
  console.log('Nuxt.js detected');
}

// Gatsby
if (window.___gatsby) {
  console.log('Gatsby detected');
}

Library Version Analysis

Security Implications

const securityAlerts = {
  'jQuery': {
    '< 3.5.0': 'XSS vulnerability (CVE-2020-11022)',
    '< 3.4.0': 'Prototype pollution (CVE-2019-11358)',
    '< 3.0.0': 'Various XSS vulnerabilities'
  },
  'Bootstrap': {
    '< 4.3.1': 'XSS in tooltip/popover (CVE-2019-8331)',
    '< 3.4.1': 'XSS in data-target (CVE-2018-14041)'
  },
  'Angular': {
    '< 1.6.0': 'Various security issues',
    '1.x': 'End of life, upgrade recommended'
  }
};

function checkSecurity(library, version) {
  const alerts = securityAlerts[library];
  if (!alerts) return null;
  
  for (const [condition, message] of Object.entries(alerts)) {
    if (evaluateVersion(version, condition)) {
      return { severity: 'high', message };
    }
  }
  return null;
}

Compatibility Detection

// Check for conflicting libraries
function detectConflicts() {
  const problems = [];
  
  // Multiple jQuery versions
  if (window.jQuery && window.$ && window.jQuery !== window.$) {
    problems.push('Multiple jQuery versions detected');
  }
  
  // MooTools + Prototype conflict
  if (window.MooTools && window.Prototype) {
    problems.push('MooTools and Prototype conflict');
  }
  
  // Old + New framework mix
  if (window.angular && (window.React || window.Vue)) {
    problems.push('Mixing Angular 1.x with modern frameworks');
  }
  
  return problems;
}

Real-World Examples

Example 1: E-commerce Site

// Detected libraries:
{
  "jQuery": "3.6.0",          // Base library
  "jQuery UI": "1.13.0",      // UI components
  "Select2": "4.0.13",        // Dropdowns
  "Swiper": "8.0.0",          // Carousel
  "Stripe": "3",              // Payments
  "Google Analytics": "4",     // Analytics
  "Facebook Pixel": true       // Marketing
}

// Analysis:
// - Traditional jQuery stack
// - Not using modern frameworks
// - Payment integration present
// - Heavy on marketing tools

Example 2: SaaS Dashboard

// Detected libraries:
{
  "React": "18.2.0",          // UI framework
  "Redux": "4.2.0",           // State management
  "React Router": "6.4.0",    // Routing
  "Axios": "1.2.0",           // HTTP client
  "Chart.js": "4.0.0",        // Charts
  "date-fns": "2.29.0",       // Date utilities
  "Socket.io": "4.5.0"        // Real-time
}

// Analysis:
// - Modern React stack
// - Real-time features
// - Data visualization focus
// - Well-maintained versions

Example 3: Corporate Website

// Detected libraries:
{
  "jQuery": "1.12.4",         // OUTDATED!
  "Bootstrap": "3.3.7",       // OUTDATED!
  "Modernizr": "2.8.3",       // Legacy
  "Respond.js": true,         // IE8 support
  "HTML5Shiv": true           // IE8 support
}

// Analysis:
// - Severely outdated stack
// - Security vulnerabilities
// - Still supporting IE8
// - Migration opportunity

Advanced Detection Techniques

1. Webpack Chunk Analysis

// Find webpack chunks
const webpackChunks = window.webpackJsonp || window.webpackChunk;
if (webpackChunks) {
  console.log('Webpack detected');
  
  // Analyze chunks for libraries
  // Complex but reveals bundled libraries
}

2. Source Map Detection

// Check for source maps
Array.from(document.scripts).forEach(script => {
  if (script.src && script.src.includes('.map')) {
    console.log('Source maps available:', script.src);
    // Could fetch and analyze for more info
  }
});

3. Module Pattern Detection

// AMD modules (RequireJS)
if (window.define && window.define.amd) {
  console.log('AMD/RequireJS detected');
}

// CommonJS
if (typeof module !== 'undefined' && module.exports) {
  console.log('CommonJS detected');
}

// ES Modules
if (document.querySelector('script[type="module"]')) {
  console.log('ES Modules in use');
}

Quick Detection Script

// Paste this in console for quick analysis
(function detectLibraries() {
  const libs = [];
  
  // Major frameworks
  if (window.jQuery) libs.push(`jQuery ${jQuery.fn.jquery}`);
  if (window.React) libs.push(`React ${React.version}`);
  if (window.Vue) libs.push(`Vue ${Vue.version}`);
  if (window.angular) libs.push(`Angular 1.x`);
  
  // UI libraries
  if (window.Bootstrap) libs.push('Bootstrap JS');
  if (window.Popper) libs.push('Popper.js');
  
  // Utilities
  if (window._) libs.push('Lodash/Underscore');
  if (window.moment) libs.push('Moment.js');
  if (window.axios) libs.push('Axios');
  
  // Analytics
  if (window.ga || window.gtag) libs.push('Google Analytics');
  if (window.fbq) libs.push('Facebook Pixel');
  
  // E-commerce
  if (window.Shopify) libs.push('Shopify');
  if (window.WooCommerce) libs.push('WooCommerce');
  
  console.log('Detected Libraries:');
  libs.forEach(lib => console.log(`  - ${lib}`));
  
  // Check for outdated
  if (window.jQuery && jQuery.fn.jquery < '3.5.0') {
    console.warn('⚠️  jQuery version has known vulnerabilities!');
  }
})();

What This Tells You

About Architecture

• Modern vs. Legacy: React/Vue vs. jQuery
• Complexity: Number of libraries
• Performance focus: Bundling strategy
• Mobile readiness: Responsive libraries

About Security

• Update frequency: Version numbers
• Risk level: Known vulnerabilities
• Attack surface: Exposed globals
• Maintenance: EOL libraries

About Team

• Skill level: Framework choices
• Team size: Architecture complexity
• Budget: Enterprise vs. open source
• Culture: Bleeding edge vs. stable

The Bottom Line

Library detection reveals the DNA of a website:

• Architecture decisions
• Security posture
• Performance priorities
• Development culture

Every library tells a story. Learn to read them.

---

Detect JavaScript libraries instantly: Fusebox identifies all libraries, versions, and security issues while you browse. Know what any site uses. $29 one-time purchase.