Modify HTML pages on the fly using NGINX
Tags: nginx, webserver, html
Published: 2021-08-20 07:21:16

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](http://nginx.org/en/docs/http/ngx_http_sub_module.html).
Feel free to leave your comments below if you have any question or idea about this topic.