- Published on
Frontend Reverse Engineering: A Comprehensive Guide from Webpack/Vite Bundling to Slider Verification and Public-Private Key Encryption
- Authors
- Name
- MASON Joey
- https://x.com/JoeyJoeMA
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:
- Entry File Identification: Starting from the configured entry file, Webpack analyzes the project's entry points.
- Dependency Graph Construction: By parsing import and require statements in the code, it recursively identifies all module dependencies, forming a dependency graph.
- 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).
- Code Transformation and Compilation: Converting modules (e.g., using Babel to transform ES6+ code), optimizing (such as Tree Shaking, code splitting).
- 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:
Dimension | Webpack | Vite |
---|---|---|
Development Mode | Full bundling, requires analyzing dependency graph and generating bundle before starting dev server | No bundling, uses browser ESM, on-demand module compilation, near-instant startup |
Bundling Speed | Slow, needs to process entire project dependency graph, Node.js driven | Very fast in development (esbuild pre-bundling), Rollup optimization in production |
Hot Update (HMR) | Full update, needs to recompile affected module chains, speed slows with project size | Incremental update, only updates modified modules, fast and stable |
Plugin Ecosystem | Mature and rich, Loaders and Plugins support almost all scenarios | Based on Rollup plugins, smaller ecosystem but growing rapidly |
Configuration Complexity | Complex configuration, requires detailed webpack.config.js setup | Simple configuration, vite.config.js works out of the box, suitable for rapid development |
Modular Support | Supports multiple formats including CommonJS, AMD, ESM, strong compatibility | Focuses on ESM, needs to convert CommonJS, suitable for modern browsers |
Production Environment | Uses Webpack throughout for bundling, generates bundle, supports complex optimization | Uses Rollup for bundling, focuses on Tree Shaking and code splitting, generates smaller bundle |
Applicable Scenarios | Large, complex projects requiring high customization | Small to medium projects, rapid prototyping, modern frameworks |
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 Mapsource-map-explorer
: Analyze bundle structurewebpack-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 processingOpenCV
: Computer vision
- Python's
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__
- Uses
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
- Generates
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 intodist/assets
- Uses esbuild for pre-building
- Improves development environment performance
- Bundles
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:
Trajectory Data:
- Sliding distance
- Sliding time
- Acceleration changes
- Trajectory point distribution
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
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
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]
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
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
Avoid Fixed Public Keys:
- Regularly rotate RSA key pairs
- Use dynamically generated keys
- Consider alternative asymmetric encryption schemes
Increase Verification Complexity:
- Add timestamp verification
- Use dynamic salt values
- Implement request signature mechanism
Obfuscation Protection:
- Use JavaScript obfuscation tools
- Implement self-modifying code
- Add anti-debugging mechanisms
4.2 CAPTCHA Optimization
Trajectory Verification:
- Increase trajectory point verification
- Add acceleration detection
- Implement trajectory feature analysis
Image Processing:
- Add image interference
- Use dynamic backgrounds
- Implement multi-image verification
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:
- Methods for reverse engineering Webpack/Vite bundled code
- Implementation and security analysis of RSA encryption algorithm
- Automated solutions for slider CAPTCHA
- 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.
- Table of Contents
- Frontend Reverse Engineering: A Comprehensive Guide from Webpack/Vite Bundling to Slider Verification and Public-Private Key Encryption
- Detailed Comparison of Webpack and Vite
- I. Underlying Bundling Principles and Architecture of Webpack and Vite
- 1. Webpack's Bundling Principles and Architecture
- 2. Vite's Bundling Principles and Architecture
- II. Technical and Design Differences Between Webpack and Vite
- III. Vite's Bundling Differences in Development and Production Environments
- 1. Development Environment
- 2. Production Environment
- IV. Historical Development of Webpack and Vite
- 1. Webpack's History
- 2. Vite's History
- V. Detailed Analysis and Selection Recommendations
- 1. Performance Analysis
- 2. Ecosystem and Extensibility
- 3. Applicable Scenarios
- 4. Future Trends
- VI. Summary
- 1. Overview of Frontend Reverse Engineering
- 1.1 Reverse Engineering Goals
- 1.2 Tool Preparation
- 2. Reverse Engineering Webpack and Vite Bundled Code
- 2.1 Webpack Bundling Characteristics
- 2.2 Vite Bundling Characteristics
- 2.3 Reverse Engineering Steps
- 2.3.1 Obtaining Frontend Resources
- 2.3.2 Deobfuscate Code
- 2.3.3 Locate Key Logic
- 2.3.4 Extract Webpack Runtime
- 2.3.5 Collect Dependency Modules
- 2.3.6 Environment Patching
- 2.3.7 Run in Node.js
- 3. Tonghuashun Login Slider Reverse Engineering
- 3.1 Background
- 3.2 Encryption Logic
- 3.2.1 RSA Encryption
- 3.2.2 passwdSalt Generation
- 3.3 Slider CAPTCHA Implementation
- 3.3.1 CAPTCHA Analysis
- 3.3.2 CAPTCHA Bypass
- 3.4 Complete Login Process
- 4. Security Recommendations
- 4.1 Frontend Encryption
- 4.2 CAPTCHA Optimization
- 5. Summary