Modern web development often requires dropping support for legacy browsers to reduce technical debt and maintenance overhead. When running an NginX reverse proxy, we can implement this at the web server level rather than burdening application code with User-Agent parsing logic.
The ngx_http_map_module
creates variables whose values depend on other variables - perfect for browser detection patterns. Here's the complete implementation:
# In your http context (nginx.conf)
map $http_user_agent $outdated_browser {
default 0;
# Internet Explorer
"~MSIE [1-9]\." 1;
"~Trident/7\.0.*rv:11\.0" 0; # IE11
"~Trident/[0-6]\." 1;
# Old Chrome versions
"~Chrome/[0-5][0-9]\." 1;
# Legacy Firefox
"~Firefox/[0-4][0-9]?" 1;
"~Firefox/5\.[0-8]" 1;
# Safari before 2018
"~Version/[0-9]\..*Safari" 1;
}
server {
listen 80;
server_name example.com;
if ($outdated_browser) {
return 301 /outdated;
}
location /outdated {
# Your static outdated browser page
root /var/www/html;
try_files /outdated.html =404;
}
# Normal proxy pass for modern browsers
location / {
proxy_pass http://backend;
}
}
The map block uses PCRE regex patterns to match against the User-Agent header:
~
indicates case-sensitive regex matching- Character classes like
[0-9]
match version numbers - Escape dots (
\.
) for literal dots in versions - Set default 0 (modern) and override with 1 (outdated)
This approach is highly efficient because:
- Maps are loaded during configuration parsing (compile-time)
- No additional modules required
- Minimal runtime overhead compared to if-else blocks
- Doesn't require backend processing
Verify with curl using different User-Agent strings:
# Should redirect
curl -A "Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0)" http://example.com
# Should pass through
curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36" http://example.com
Many web applications face the challenge of supporting legacy browsers while maintaining modern functionality. When development resources are limited, server-side solutions like NGinx can efficiently handle browser compatibility issues without burdening your backend.
The NGinx map module provides an elegant solution for browser redirection based on User-Agent strings. It's:
- Lightweight - processes requests at the proxy level
- Maintainable - keeps rules in configuration files
- Performant - evaluates rules during request processing
Here's how to implement browser redirection in your NGinx configuration:
http {
map $http_user_agent $outdated_browser {
default 0;
# Internet Explorer
"~*MSIE [1-9]\." 1;
"~*Trident/[0-6]\." 1;
# Old Firefox versions
"~*Firefox/[0-9]\." 1;
"~*Firefox/[1-2][0-9]\." 1;
# Old Chrome versions
"~*Chrome/[0-9]\." 1;
"~*Chrome/[1-3][0-9]\." 1;
}
server {
listen 80;
server_name example.com;
if ($outdated_browser) {
return 301 /outdated;
}
location /outdated {
# Your outdated browser page configuration
root /var/www/html;
index outdated.html;
}
# Rest of your server configuration
}
}
For better performance and maintainability:
# Create a separate map file
map $http_user_agent $outdated_browser {
include /etc/nginx/browser-rules.map;
}
# Then in your server block:
if ($outdated_browser) {
rewrite ^(.*)$ /outdated last;
}
After implementing, test with:
nginx -t
systemctl reload nginx
Use browser developer tools or curl to verify:
curl -A "Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko" http://example.com
For enterprise deployments:
- Consider using regex patterns for more precise matching
- Implement logging for tracking outdated browser access
- Add cache-control headers for the /outdated page