Frontend Reverse Engineering: A Comprehensive Guide from Webpack/Vite Bundling to Slider Verification and Public-Private Key Encryption

Detailed Comparison of Webpack and Vite

Webpack and Vite are two mainstream build tools in modern frontend development, with significant differences in their bundling principles, architectural design, performance, and applicable scenarios. The following provides a detailed analysis of their underlying bundling principles, architecture, technical differences, Vite's different handling in development and production environments, and their historical development backgrounds.

I. Underlying Bundling Principles and Architecture of Webpack and Vite

1. Webpack's Bundling Principles and Architecture

Bundling Principles: Webpack is a static module bundler whose core concept is to treat various resources in a project (such as JavaScript, CSS, images, etc.) as modules, analyze their dependencies, and bundle them into one or more static resource files (typically bundle.js). Webpack's bundling process can be summarized in the following steps:

1. Entry File Identification: Starting from the configured entry file, Webpack analyzes the project's entry points.
2. Dependency Graph Construction: By parsing import and require statements in the code, it recursively identifies all module dependencies, forming a dependency graph.
3. Module Processing: Using Loaders to convert non-JavaScript files (such as CSS, images, TypeScript) into JavaScript modules, and extending functionality through Plugins (such as code compression, CSS extraction).
4. Code Transformation and Compilation: Converting modules (e.g., using Babel to transform ES6+ code), optimizing (such as Tree Shaking, code splitting).
5. Bundle Output: Merging processed modules into one or more bundle files, outputting to the specified directory.

Architectural Features:

• Full Bundling: Webpack bundles the entire project in both development and production environments, generating complete bundle files. In development, it provides Hot Module Replacement (HMR) through Webpack Dev Server, but still needs to recompile affected module chains.
• Modular Support: Supports multiple modular specifications including CommonJS, AMD, and ES Modules, with strong compatibility.
• Loaders and Plugins: Webpack's core advantage lies in its powerful ecosystem. Loaders handle non-JavaScript files, while Plugins extend bundling functionality (such as code optimization, file injection).
• Node.js Driven: Webpack runs on Node.js, implemented in JavaScript, with performance limited by JavaScript execution efficiency.

Technology Stack:

• Core: Node.js (JavaScript runtime)
• Module Resolution: Through enhanced-resolve for module dependency resolution
• Code Transformation: Relies on Loaders (such as babel-loader, css-loader) and Plugins (such as terser-webpack-plugin)
• Development Server: Webpack Dev Server provides hot updates and static file serving

Disadvantages:

• Slow Startup: Large projects require analyzing the entire dependency graph and bundling, making development server startup time-consuming
• HMR Delay: After code modifications, Webpack needs to recompile affected module chains, with HMR speed slowing down in large projects
• Complex Configuration: Requires writing detailed webpack.config.js files, with a steep learning curve

2. Vite's Bundling Principles and Architecture

Bundling Principles: Vite is a modern frontend build tool developed by Evan You (creator of Vue.js), designed to provide faster development experience and simpler configuration. Vite's core design philosophy is to leverage browser-native ES Modules (ESM) support, dividing modules into dependencies and source code, optimizing the build process for both development and production environments.

Development Environment:

• No Bundling Startup: Unlike Webpack, Vite doesn't bundle the entire project at startup, but directly starts a development server, leveraging browser-native ESM for on-demand module loading.
• On-demand Compilation: When the browser requests a module, Vite compiles that module and its dependencies in real-time (e.g., converting Vue single-file components or TypeScript to JavaScript). This greatly reduces startup time.
• Dependency Pre-bundling: Vite uses esbuild (a super-fast build tool based on Go) to pre-bundle third-party dependencies (such as libraries in node_modules), converting them to ESM format and caching them in node_modules/.vite, reducing the number of module requests from the browser.
• Hot Module Replacement (HMR): Vite's HMR is based on ESM, only updating modified modules and their direct dependencies, with extremely fast update speeds.

Production Environment:

• Rollup Bundling: Vite uses Rollup for bundling in production. Rollup focuses on ESM, excels at Tree Shaking and code optimization, generating smaller bundle files.
• On-demand Loading: Vite leverages ESM's dynamic imports (import()) and code splitting to optimize production environment loading performance.

Architectural Features:

• Dual Engine Design:
  • Development Environment: Based on esbuild and browser-native ESM, providing fast cold start and HMR
  • Production Environment: Based on Rollup, providing efficient Tree Shaking and code compression
• Native ESM: Vite fully utilizes modern browser ESM support, delegating module loading to the browser, reducing build tool workload
• Simple Configuration: Vite's configuration file vite.config.js is simple and intuitive, providing modern development environment configuration out of the box
• Plugin System: Vite is compatible with Rollup's plugin API while supporting Vite-specific plugins, though the ecosystem is smaller than Webpack's

Technology Stack:

• Core: esbuild (Go language, pre-bundling dependencies), Rollup (production bundling)
• Module Resolution: Leverages browser-native ESM, combined with esbuild's efficient parsing
• Development Server: Based on Koa (Node.js framework), providing fast static file serving and HMR
• File Transformation: Supports single-file components for Vue, React, Svelte, etc., with built-in CSS and TypeScript processing

Disadvantages:

• Immature Ecosystem: Compared to Webpack, Vite's plugin and Loader ecosystem is smaller, some complex scenarios may require manual configuration
• Browser Compatibility: Relies on ESM, requiring target browsers to support native ES Modules (e.g., Chrome 61+, Firefox 60+), with additional configuration needed for older browsers (e.g., @vitejs/plugin-legacy)
• CommonJS Limitations: Vite doesn't directly support CommonJS modules, requiring conversion to ESM through esbuild

II. Technical and Design Differences Between Webpack and Vite

The following compares Webpack and Vite across multiple dimensions:

Technical Differences:

• Underlying Language:
  • Webpack uses JavaScript (Node.js), with performance limited by JavaScript execution efficiency
  • Vite's dependency pre-bundling uses esbuild (Go language, 10-100x faster than JavaScript), production environment uses Rollup (JavaScript, but focused on ESM optimization)
• Module Loading:
  • Webpack generates bundle through bundling, browser loads entire bundle file
  • Vite leverages browser-native ESM, dynamically loads modules, reducing bundling overhead
• HMR Implementation:
  • Webpack's HMR needs to recompile affected module chains, lower efficiency
  • Vite's HMR is based on ESM, only updates modified modules, extremely efficient
• Caching Mechanism:
  • Webpack relies on filesystem caching (e.g., cache configuration), but still needs full bundling
  • Vite uses HTTP caching (304 Not Modified negotiation cache, Cache-Control: max-age=31536000,immutable strong cache) to optimize dependency loading

III. Vite's Bundling Differences in Development and Production Environments

Vite's bundling strategy differs completely between development and production environments, which is one of its core design advantages.

1. Development Environment

• No Bundling: Vite doesn't perform full bundling, but starts a Koa-based development server, directly serving source code
• On-demand Compilation: Leverages browser-native ESM, when browser requests a module (e.g., .vue, .tsx), Vite compiles that module and its dependencies in real-time
• Dependency Pre-bundling: Third-party dependencies (e.g., React, Vue) are pre-bundled by esbuild into ESM format, cached in node_modules/.vite, avoiding repeated parsing
• HMR: ESM-based HMR only updates modified modules, extremely fast, typically in milliseconds
• Advantages: Fast startup, efficient HMR, smooth development experience, especially suitable for large projects

2. Production Environment

• Rollup Bundling: Vite uses Rollup for bundling, generating optimized bundle files
• Tree Shaking: Rollup's static analysis capability is better than Webpack's, more efficient at removing unused code
• Code Splitting: Vite automatically supports dynamic imports (import()) and CSS code splitting, optimizing loading performance
• Compression Optimization: Rollup works with terser or esbuild for code compression, generating smaller bundles
• Advantages: Small file size, fast loading speed, suitable for production deployment

Difference Summary:

• Development Environment: No bundling, on-demand compilation, relies on esbuild and browser ESM, focuses on speed and development experience
• Production Environment: Full bundling, relies on Rollup, focuses on code optimization and performance
• Consistency: Vite ensures consistency between development and production through pre-bundled dependencies and unified plugin API (based on Rollup), but bundling process is completely different

IV. Historical Development of Webpack and Vite

1. Webpack's History

• 2012: Webpack created by Tobias Koppers, initially to solve Browserify's limitations (e.g., lack of support for non-JS resources like CSS, images)
• 2014: Webpack 1.0 released, introducing module bundling, Loaders and Plugin mechanisms, becoming an alternative to Grunt and Gulp. At that time, JavaScript ecosystem was primarily CommonJS, Webpack provided powerful modular support
• 2016-2017: Webpack 2 introduced Tree Shaking and dynamic imports, supporting ES Modules, adapting to rapid development of frontend frameworks (e.g., React, Vue)
• 2018: Webpack 4 optimized performance, introduced mode (development/production), default support for zero configuration
• 2020: Webpack 5 released, improved persistent caching, Module Federation, and optimized long-standing performance issues
• Current Status: Webpack has a mature ecosystem, widely used in large projects, but its complex configuration and high performance overhead drove the emergence of lighter tools

2. Vite's History

• 2020: Vite launched by Evan You during Vue 3.0 development, initially to provide faster build tools for Vue projects. At that time, Webpack's startup and HMR speed became bottlenecks in large projects
• 2021: Vite 2.0 released, supporting multiple frameworks (Vue, React, Svelte, etc.), introducing esbuild pre-bundling, establishing the "no bundling in development, Rollup in production" model. Vue 3's default scaffolding switched from vue-cli (Webpack-based) to create-vite
• 2022-2023: Vite ecosystem developed rapidly, plugin count increased, supporting more frameworks and scenarios. At ViteConf 2023, Evan You announced Rolldown (Rust-based Rollup alternative) plan, aiming to further improve build performance
• Current Status: Vite has become the preferred tool for modern frontend development, especially popular in Vue and React communities. Ecosystem is not as mature as Webpack's but growing rapidly

Historical Comparison:

• Webpack: Early start (2012), experienced frontend modularization evolution from CommonJS to ESM, mature but complex ecosystem
• Vite: Late start (2020), designed for modern browsers and ESM, emphasizing speed and simplicity, representing the next generation of build tools

V. Detailed Analysis and Selection Recommendations

1. Performance Analysis

• Startup Speed: Vite's no-bundling startup and esbuild pre-bundling make its development environment startup speed far exceed Webpack's (milliseconds vs seconds)
• HMR Speed: Vite's incremental update mechanism makes its HMR speed almost unaffected by project size, while Webpack's full update slows down significantly in large projects
• Production Bundling: Vite's Rollup bundling generates smaller bundles, with more efficient Tree Shaking; Webpack's bundling is more comprehensive but may result in larger bundle size

2. Ecosystem and Extensibility

• Webpack: Has vast Loader and Plugin ecosystem, supporting almost all scenarios, but requires complex configuration and maintenance
• Vite: Plugin ecosystem based on Rollup, smaller in number but sufficient for common needs, simple configuration, suitable for rapid development

3. Applicable Scenarios

• Webpack:
  • Suitable for large, complex projects requiring high customization (e.g., micro-frontends, Module Federation)
  • Suitable for projects needing to support older browsers (through polyfills and Loaders)
  • Suitable for legacy projects with existing Webpack configuration
• Vite:
  • Suitable for small to medium projects, rapid prototyping, or modern frameworks (e.g., Vue 3, React)
  • Suitable for teams pursuing development experience and performance
  • Not suitable for projects requiring complex custom build logic or supporting older browsers (unless using plugins)

4. Future Trends

• Webpack: Still optimizing performance (e.g., caching, Module Federation), but limited by Node.js and full bundling mode, difficult to reach Vite's speed
• Vite: With Rolldown development (Rust implementation of Rollup), Vite's performance and ecosystem will further improve, likely to replace Webpack in more scenarios

VI. Summary

Webpack is a powerful, mature module bundler suitable for complex large projects, but its startup and HMR speed are slow, with complex configuration. Vite leverages browser-native ESM and esbuild to provide extremely fast development experience and simple configuration, optimizing output through Rollup in production, suitable for modern frontend development. The core difference between them lies in design philosophy: Webpack emphasizes comprehensiveness and compatibility, while Vite pursues speed and modernization.

Selection Recommendations:

• If your project requires high customization, supports complex scenarios, or needs to be compatible with older browsers, choose Webpack
• If you pursue development efficiency, rapid iteration, or use modern frameworks (e.g., Vue 3, React), Vite is a better choice
• For new projects, recommend trying Vite first, especially in small to medium projects; for legacy projects, gradual migration to Vite requires evaluating ecosystem compatibility

Historical Trends: Webpack represents the previous generation of frontend build tools, solving modularization problems but performance gradually becoming a bottleneck; Vite represents the next generation of tools, leveraging modern browser features and efficient languages (e.g., Go, Rust) to drive a revolution in build speed. With increasing browser support for ESM and Vite's ecosystem maturing, Vite is expected to occupy a larger market share in the future.

References:

• Vite Official Documentation: https://vitejs.dev
• Webpack Official Documentation: https://webpack.js.org
• Rollup Official Documentation: https://rollupjs.org
• esbuild Official Documentation: https://esbuild.github.io

1. Overview of Frontend Reverse Engineering

Frontend reverse engineering refers to analyzing JavaScript code running in browsers, extracting key logic (such as encryption algorithms and CAPTCHA verification), and reusing it in other environments (like Node.js). With the widespread use of modern bundling tools like Webpack and Vite, frontend code is typically compressed and obfuscated, increasing the difficulty of reverse engineering. This article demonstrates a complete reverse engineering process using a case study of Tonghuashun's login slider verification, combined with Webpack code extraction techniques.

1.1 Reverse Engineering Goals

• Tonghuashun Login Slider Reverse Engineering: Extract encryption parameters (such as uname, passwdSalt) and slider CAPTCHA verification logic from the login process to achieve automated login.
• Webpack Code Extraction: Port Webpack-bundled browser code to Node.js environment to call key functions (such as MD5, RSA encryption).
• Public-Private Key Encryption: Analyze RSA encryption implementation and discuss the security implications of fixed public key exponents.
• Slider CAPTCHA: Understand why CAPTCHA can be represented by data and implement automated recognition.

1.2 Tool Preparation

• Browser Developer Tools:

  • Chrome/Firefox DevTools for analyzing network requests and JavaScript code
  • Use Network panel to monitor API requests
  • Use Sources panel for code debugging
  • Use Console panel to execute test code

• Deobfuscation Tools:

  • de4js: Beautify compressed code
  • JS Beautifier: Format JavaScript
  • AST Explorer: Analyze code structure

• Source Map Tools:

  • unwebpack-sourcemap: Restore Webpack Source Map
  • source-map-explorer: Analyze bundle structure
  • webpack-bundle-analyzer: Visualize dependencies

• Packet Capture Tools:

  • Fiddler: Windows platform packet capture
  • Burp Suite: Cross-platform packet capture with HTTPS support
  • Charles: Mac platform packet capture

• Image Processing:

  • Python's ddddocr: OCR recognition
  • Pillow: Image processing
  • OpenCV: Computer vision

• Node.js Environment:

  • Run reverse-engineered code
  • Reuse Webpack modules
  • Simulate browser environment

2. Reverse Engineering Webpack and Vite Bundled Code

2.1 Webpack Bundling Characteristics

Webpack is a commonly used frontend module bundler that packages JavaScript, CSS, and other resources into bundle files (like main.js). Its characteristics include:

• Modularity:

  • Uses __webpack_require__ to load modules
  • Modules organized by numeric IDs (like 1337)
  • Stored in window.webpackChunk or __webpack_modules__

• Compression and Obfuscation:

  • Uses Terser for code compression in production mode
  • Shortens variable names
  • Renames functions
  • Removes comments and whitespace

• Source Map:

  • Generates .map files in development mode
  • Contains original code mapping
  • Supports debugging and error tracking

• Dynamic Import:

  • Supports code splitting
  • Generates chunk files (like chunk-xxx.js)
  • Optimizes performance through on-demand loading

2.2 Vite Bundling Characteristics

Vite is based on ES modules (ESM) and Rollup, with the following characteristics:

• ESM-Driven:

  • Uses browser native modules directly in development
  • Uses Rollup for production bundling
  • Faster development server startup

• Clean Bundle:

  • Clearer code structure compared to Webpack
  • Lower obfuscation level
  • Better readability

• Dependency Pre-bundling:

  • Bundles node_modules dependencies into dist/assets
  • Uses esbuild for pre-building
  • Improves development environment performance

2.3 Reverse Engineering Steps

2.3.1 Obtaining Frontend Resources

• Open DevTools:

  // Disable F12 detection
  document.addEventListener('keydown', function(e) {
    if (e.key === 'F12') {
      e.preventDefault();
    }
  });
  

• Extract Source Map:

  # Install tools
  npm install -g unwebpack-sourcemap
  
  # Restore code
  unwebpack-sourcemap main.js.map
  
  # Analyze bundle
  npx source-map-explorer main.js.map
  

2.3.2 Deobfuscate Code

• Use de4js:

  // Compressed code
  function a(b,c){return b+c}
  
  // Beautified
  function add(num1, num2) {
    return num1 + num2;
  }
  

2.3.3 Locate Key Logic

• Search Keywords:

  // Search in Tonghuashun case
  thsencrypt
  passwdsalt
  

• Breakpoint Debugging:

  // Set conditional breakpoint in DevTools
  if (plaintext === 'user@example.com') {
    debugger;
  }
  

• Module Structure:

  // Webpack module registration
  (window.webpackChunk = window.webpackChunk || []).push([[245], {
    245: (module, exports, __webpack_require__) => {
      module.exports = { 
        encode: function(plaintext) {
          // Encryption logic
        } 
      };
    }
  }]);
  

2.3.4 Extract Webpack Runtime

• Locate webpack_require:

  function __webpack_require__(moduleId) {
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) {
      return cachedModule.exports;
    }
    var module = __webpack_module_cache__[moduleId] = { exports: {} };
    __webpack_modules__[moduleId].call(
      module.exports, 
      module, 
      module.exports, 
      __webpack_require__
    );
    return module.exports;
  }
  

• Global Export:

  // Add global access
  globalThis.__exposedWebpackRequire = __webpack_require__;
  

2.3.5 Collect Dependency Modules

• Set Log Breakpoints:

  // Add logging to __webpack_require__
  window.module_array += moduleId + ':' + __webpack_modules__[moduleId] + ',\n';
  
  // Clear cache to force loading
  __webpack_module_cache__ = {};
  

2.3.6 Environment Patching

• Simulate Browser Environment:

  // Node.js environment patches
  global.self = global;
  global.window = global;
  global.navigator = { 
    userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36' 
  };
  global.document = {
    createEvent: () => ({ 
      timeStamp: Number(process.hrtime.bigint() / 1_000_000n) 
    })
  };
  

2.3.7 Run in Node.js

• Write Run Script:

  // run_encrypt.js
  global.self = global;
  require('./main.bundle.js');
  require('./chunk-xxx.js');
  
  let __webpack_require__ = globalThis.__exposedWebpackRequire;
  let module_xxx = __webpack_require__('xxx');
  console.log(module_xxx.encode('user@example.com'));
  

3. Tonghuashun Login Slider Reverse Engineering

3.1 Background

Tonghuashun login involves account password encryption and slider CAPTCHA verification. The core goals are: Encrypt uname and passwdSalt parameters and send them to getGS and dologinreturnjson2 interfaces. Automatically recognize slider CAPTCHA and generate verification parameters (such as phrase and signature).

3.2 Encryption Logic

3.2.1 RSA Encryption

Frontend Implementation: Uses thsencrypt.encode function, based on RSA algorithm to encrypt account and password:

var thsencrypt = {
  encode: function(plaintext, modulus_hex, exponent_hex) {
    var rsa = new JSEncrypt();
    rsa.setPublicKey(modulus_hex, exponent_hex);
    return rsa.encrypt(plaintext);
  }
};
var uname = thsencrypt.encode('user@example.com', 'YOUR_MODULUS', '10001');

Python Implementation:

from Crypto.PublicKey import RSA
from Crypto.Cipher import PKCS1_v1_5
from base64 import b64encode

def encrypt_encode(plaintext: str) -> str:
    modulus_hex = "YOUR_MODULUS_HERE"  # Get from getGS
    exponent_hex = "10001"
    modulus = int(modulus_hex, 16)
    exponent = int(exponent_hex, 16)
    key = RSA.construct((modulus, exponent))
    cipher = PKCS1_v1_5.new(key)
    plaintext_bytes = plaintext.encode('utf-8')
    encrypted_bytes = cipher.encrypt(plaintext_bytes)
    return b64encode(encrypted_bytes).decode('utf-8')

Password Encryption: Password is first encrypted with MD5:

import hashlib
def hex_md5(text: str) -> str:
    return hashlib.md5(text.encode('utf-8')).hexdigest().lower()
passwd_md5 = hex_md5('mypassword')
passwd_encrypted = encrypt_encode(passwd_md5)

3.2.2 passwdSalt Generation

Logic: Involves MD5, HmacSHA256, and XOR operations:

import hmac
import hashlib
from base64 import b64decode, b64encode

def get_str_xor(e: str, t: str) -> str:
    s = len(e)
    r = len(t)
    o = []
    for d in range(s):
        n = d % r
        xor_char = chr(ord(e[d]) ^ ord(t[n]))
        o.append(xor_char)
    return ''.join(o)

def encode_data_salt_once(passwd: str, uname: str, crnd: str, dsk: str, ssv: str, dsv: str) -> str:
    n = hashlib.sha256((crnd + dsk).encode('utf-8')).hexdigest()
    ssv_decoded = b64decode(ssv).decode('utf-8')
    n = get_str_xor(n, ssv_decoded)
    passwd_md5 = hex_md5(passwd)
    n = hmac.new(n.encode('utf-8'), passwd_md5.encode('utf-8'), hashlib.sha256).hexdigest()
    dsv_sha256 = hashlib.sha256(dsv.encode('utf-8')).hexdigest()
    n = get_str_xor(n, dsv_sha256)
    n = b64encode(n.encode('utf-8')).decode('utf-8')
    return encrypt_encode(n)

3.3 Slider CAPTCHA Implementation

3.3.1 CAPTCHA Analysis

The core of slider CAPTCHA is verifying whether the user's sliding trajectory is legitimate. Main verification points include:

1. Trajectory Data:

   • Sliding distance
   • Sliding time
   • Acceleration changes
   • Trajectory point distribution

2. Feature Extraction:

   def extract_track_features(track_points):
       features = {
           'distance': calculate_distance(track_points),
           'duration': track_points[-1]['timestamp'] - track_points[0]['timestamp'],
           'acceleration': calculate_acceleration(track_points),
           'point_count': len(track_points)
       }
       return features
   

3. Trajectory Generation:

   def generate_human_like_track(distance: int) -> List[Dict]:
       track = []
       current_x = 0
       current_time = int(time.time() * 1000)
       
       # Initial acceleration
       for i in range(5):
           current_x += random.randint(2, 4)
           current_time += random.randint(10, 20)
           track.append({'x': current_x, 'y': 0, 'timestamp': current_time})
           
       # Constant speed sliding
       while current_x < distance - 10:
           current_x += random.randint(1, 3)
           current_time += random.randint(15, 25)
           track.append({'x': current_x, 'y': 0, 'timestamp': current_time})
           
       # Deceleration
       while current_x < distance:
           current_x += random.randint(0, 2)
           current_time += random.randint(20, 30)
           track.append({'x': current_x, 'y': 0, 'timestamp': current_time})
           
       return track
   

3.3.2 CAPTCHA Bypass

1. Image Recognition:

   import ddddocr
   
   def get_slider_distance(bg_image: bytes, slider_image: bytes) -> int:
       ocr = ddddocr.DdddOcr(det=False, ocr=False, show_ad=False)
       res = ocr.slide_match(bg_image, slider_image, simple_target=True)
       return res['target'][0]
   

2. Trajectory Optimization:

   def optimize_track(track: List[Dict], target_distance: int) -> List[Dict]:
       # Adjust trajectory point distribution
       optimized = []
       for point in track:
           # Add random offset
           point['y'] = random.randint(-2, 2)
           # Adjust time intervals
           point['timestamp'] += random.randint(-5, 5)
           optimized.append(point)
       return optimized
   

3. Request Construction:

   def construct_verify_request(track: List[Dict], distance: int) -> Dict:
       return {
           'phrase': base64.b64encode(json.dumps(track).encode()).decode(),
           'signature': calculate_signature(track, distance),
           'distance': distance
       }
   

3.4 Complete Login Process

async def login(username: str, password: str) -> Dict:
    # 1. Get encryption parameters
    gs_response = await get_gs()
    modulus = gs_response['modulus']
    crnd = gs_response['crnd']
    
    # 2. Encrypt username and password
    encrypted_username = encrypt_encode(username, modulus)
    encrypted_password = encrypt_encode(hex_md5(password), modulus)
    
    # 3. Generate passwdSalt
    passwd_salt = encode_data_salt_once(
        password, username, crnd,
        gs_response['dsk'],
        gs_response['ssv'],
        gs_response['dsv']
    )
    
    # 4. Handle slider CAPTCHA
    slider_data = await get_slider()
    distance = get_slider_distance(slider_data['bg'], slider_data['slider'])
    track = generate_human_like_track(distance)
    verify_data = construct_verify_request(track, distance)
    
    # 5. Send login request
    login_data = {
        'uname': encrypted_username,
        'passwd': encrypted_password,
        'passwdSalt': passwd_salt,
        **verify_data
    }
    
    return await send_login_request(login_data)

4. Security Recommendations

4.1 Frontend Encryption

1. Avoid Fixed Public Keys:

   • Regularly rotate RSA key pairs
   • Use dynamically generated keys
   • Consider alternative asymmetric encryption schemes

2. Increase Verification Complexity:

   • Add timestamp verification
   • Use dynamic salt values
   • Implement request signature mechanism

3. Obfuscation Protection:

   • Use JavaScript obfuscation tools
   • Implement self-modifying code
   • Add anti-debugging mechanisms

4.2 CAPTCHA Optimization

1. Trajectory Verification:

   • Increase trajectory point verification
   • Add acceleration detection
   • Implement trajectory feature analysis

2. Image Processing:

   • Add image interference
   • Use dynamic backgrounds
   • Implement multi-image verification

3. Behavior Analysis:

   • Record user behavior characteristics
   • Implement risk scoring
   • Add secondary verification

5. Summary

Frontend reverse engineering is a complex and fascinating technical field that requires deep understanding of frontend frameworks, encryption algorithms, and CAPTCHA mechanisms. Through this case study, we have demonstrated:

1. Methods for reverse engineering Webpack/Vite bundled code
2. Implementation and security analysis of RSA encryption algorithm
3. Automated solutions for slider CAPTCHA
4. Implementation of complete login process

In practical applications, we need to find a balance between security and user experience, protecting system security while ensuring good user experience. At the same time, we must also be mindful of the legal and ethical boundaries of reverse engineering to ensure appropriate use of technology.

Note: This article is for technical research and learning purposes only. Please do not use it for illegal purposes. In actual projects, it is recommended to adopt more secure encryption schemes and verification mechanisms.