NGinx Browser Redirection: How to Block Outdated Browsers Using Map Module


5 views

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:

  1. Maps are loaded during configuration parsing (compile-time)
  2. No additional modules required
  3. Minimal runtime overhead compared to if-else blocks
  4. 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