Garfish's sandbox isolation mechanism is primarily implemented through the following approaches:
1. Snapshot Sandbox
- Takes a snapshot of the current global environment (window object) before loading sub-applications
- Records all global variables and properties
- Allows modification of global variables during sub-application runtime
- Restores to the pre-load snapshot state when sub-applications are unloaded
2. Proxy Sandbox
- Uses ES6 Proxy to proxy the window object
- Intercepts read and write operations on global variables
- Maintains an independent sandbox environment where each sub-application has its own copy of global variables
- Isolates global states of different sub-applications through the proxy layer
3. Strict Sandbox
- Combines advantages of both snapshot and proxy approaches
- Provides stricter isolation mechanism
- Prevents global variable pollution between sub-applications
- Ensures complete cleanup of side effects after sub-application unloading
Isolation Scope
- Global Variable Isolation: Prevents variable conflicts between sub-applications
- Event Listener Isolation: Automatically cleans up event listeners added by sub-applications
- Timer Isolation: Manages setTimeout, setInterval, and other timers
- Style Isolation: Isolates styles through CSS scoping or Shadow DOM
Implementation Advantages
- Minimal performance overhead, doesn't affect application runtime efficiency
- Supports dynamic loading and unloading of sub-applications
- Compatible with mainstream browsers, no polyfill needed
- Provides fallback mechanisms to ensure operation in environments without Proxy support
The sandbox mechanism ensures independence and security of each sub-application in the micro-frontend architecture, making it one of the key technologies for implementing micro-frontends.