Sunday, April 18, 2021

Redirect users of Internet Explorer with Nginx

The project I'm on recently decided to stop Internet Explorer support.  Below is how to redirect users of Internet Explorer to a different webpage using the Nginx web server.  It allowed removing IE support configured via the React package.json browserlist attribute and removing any IE-specific polyfill code that was used.

CentOS Linux release 7.3.1611 (Core) 
React 17.1
nginx version: nginx/1.16.1

Use this outside of a server or location configuration.  Trident is to detect modern IE in compatibility mode.  The Nginx map module creates the variable $outdated based on values from the $http_user_agent variable.

map $http_user_agent $outdated {
    default              0;
    "~MSIE [1-11]\."     1;
    "~Trident/[1-7]\."    1;

To test it, can add a custom header inside the server or location configuration.

add_header X-debug-http_user_agent "http_user_agent $http_user_agent" always;
add_header X-debug-outdated "outdated $outdated" always;

After testing that the http_user_agent and outdated have the values you expect, then add in the redirect inside a server or location configuration.  I chose HTTP Status 307 because it's a temporary redirect and because it guarantees that the method and the body will not be changed when the redirected request is made.

if ($outdated = 1) {
    return 307;

The package.json browserslist was updated to remove support for any version of IE.  You can test that by running "npx browserslist".

"not ie > 0"

Again, I recommend you NOT put in the redirect code until you are certain the http_user_agent and outdated variables are working as expected.  If you do, while testing during development, you will need to clear browsing data, cache, etc, as redirect headers can be cached and you may think you are getting the latest Nginx change (but you may not be).  For Internet Explorer, to turn off temporary redirect HTTP 307 while experimenting, make sure to:

Select Tools (via the Gear Icon) > Safety > Delete browsing history.... ->Make sure to uncheck Preserve Favorites website data and check both Temporary Internet Files and Cookies.

Helpful articles:

No comments:

Post a Comment

I appreciate your time in leaving a comment!