Modify HTML pages on the fly using NGINX

Modify page content using NGINX on the fly

It may occur to you that you want to change the content of a web page on the fly. For example, when you proxy a web page, maybe you want to edit some HTML tags, add some scripts, and etc.

Let’s find out how we can do it using NGINX.

Example 1: Replace a string with another

Consider the following NGINX configuration:

server {
        server_name example.com www.example.com
        location / {
             proxy_pass http://localhost:3000;
        }
}

In this page that was served from 127.0.0.1:3000 we have some links and IMG tags that their hostname is 127.0.0.1:3002 , and we want to replace them with example.com .

The ngx_http_sub_module is a filter that modifies a response by replacing one specified string by another. This module is not built by default, it should be enabled with the --with-http_sub_module configuration parameter.

The sub_filter sets a string to replace and a replacement string.

server {
        server_name example.com www.example.com
        location / {
             proxy_pass http://localhost:3000;
             sub_filter '<a href="http://127.0.0.1:3002/'  '<a href="https://example.com/';
             sub_filter '<img src="http://127.0.0.1:3002/' '<img src="https://example.com/';
             sub_filter_once on;     
   }
}

In the above example we replaced <a href=”http://127.0.0.1:3002/ with <a href=”https://example.com/

Note that because we only want to replace <a> and <img> tags, we use tags in our replacement. If we want to replace all strings from 127.0.0.1:3002 into example.com, we will use the following configuration:

server {
     server_name example.com www.example.com
     location / {
        proxy_pass http://localhost:3000;
        sub_filter 'http://127.0.0.1:3002/' 'https://example.com/';
        sub_filter_once on;     
   }
}

After you are done with your configuration, just reload the NGINX and enjoy :)

$ service nginx reload

Example 2: Add a script to a web page

In this example we will add a script before the</head> tag without any changes in our source code.

server {
     server_name example.com www.example.com
     location / {
       proxy_pass http://localhost:3000;
       sub_filter '</head>' '<script>alert("Hi👋")</script></head>';        
       sub_filter_once on;     
   }
}

In order to add the script before the </head>, we first choose this string to replace, and then replace it with another string (we put our script before </head> tag in our new string).

And after you are done with your configuration, don’t forget to reload NGINX.

$ service nginx reload

Example 3: Remove a string from a web page

In order to remove a string from a web page, we must replace that string with an empty string (space) like below.

server {
     server_name example.com www.example.com
     location / {
       proxy_pass http://localhost:3000;
       sub_filter '<p>Remove me</p>' ' ';        
       sub_filter_once on;     
   }
}

As you see, It was As Easy As ABC :) so you can go further and do exciting things using NGINX. If you want to read more about this module, you can read it’s documentation on NGINX website.

Feel free to leave your comments below if you have any question or idea about this topic.