The NAT Protocol

The router device that connects two networks requires two IP addresses. Like Janus, the two-faced ancient Roman god of gates, it looks in two directions: externally and internally to the network. These addresses are referred to as public and private addresses, respectively. All workstations in the LAN allocate private IP addresses. The router represents all the private IP addresses of the LAN with its unique public IP address by implementing the Network Address Translation (NAT) protocol. NAT was developed to address the problem of the IPv4 address shortage. With a single public IP address for the router, multiple computers and Internet-enabled devices can connect to the Internet in a seamless manner.

NAT comes in two variations: static and dynamic. With static NAT, each host requires one public IP address for its private IP address to be reachable over the Internet.

With dynamic NAT, multiple hosts can translate their private IP address to the public IP address of the router. An extension of dynamic NAT is port forwarding, aka port mapping, which consists of a router service. With port forwarding, the router is configured to dispatch packets with a specific destination port number to a specific machine on the LAN. For instance, the router in Figure 3-1 is set to forward all packets with destination port 80 to the host with the private IP address 192.168.1.100.

Enabling Port Forwarding to Your Router

To relay HTTP requests aimed at the public IP address of your router with the HTTP port number, you have to apply port forwarding on your web server. When an HTTP request with port 80 (or any other port number that you choose) arrives at the router, it will be forwarded to the private IP address of your web server. Most routers today include port forwarding not only because it’s a feature of dedicated web servers but also of many home appliances that act as servers, for instance IP cameras.

Most router configuration options are accessed through the HTTP or Telnet protocol. To use the first approach, enter the private IP address of your router in the address bar of your browser and provide the username and the password to go to the web-based router setup page. Locate the Port Forwarding option in the main menu of your router. For the examples in this book, the private IP address of the router is 192.168.1.1. When using this address in the browser’s address bar, the web page for the router appears; Figure 3-2 shows the page for the Speedport Entry 2i VDSL router.

Click the Firewall link to go to the web page where the Port Forwarding option is available below the main navigation bar.

Click the Port Forwarding link to go to the web page displayed in Figure 3-3.

Click the Create New Item button to create a new entry for the Port Forwarding list. The form elements for the Port Forwarding settings appear, as shown in Figure 3-4.

Enter a name for the service you implemented with port forwarding in the Name field, e.g., Web Server . Enter the private IP address for this computer, e.g., 192.168.1.100 (in the field LAN Host IP Address), and enter the port numbers you will use for the web service, e.g., 8080 (in the fields WAN Port Range and LAN Host Port Range). For the Protocol option, select TCP from the drop-down list to implement the HTTP protocol. Click the Apply button to confirm the settings. The new entry appears in the Port Forwarding list.

This is a good chance to add all the port numbers used for the HTTP and HTTPS protocols for the examples in this book. You can assign the computer with the private IP address of 192.168.1.100 the responsibility of receiving the TCP/IP packets on your LAN for the port numbers 80, 8080, 8181, and 443.

Each router model uses a different GUI environment to provide the Port Forwarding settings. Figure 3-5 shows the configuration page of the FBR-1161 LevelOne ADSL router, which displays the settings under the NAT option of the Advanced Setup menu.

The previous configuration assigns ports 8080 and 8181 to be forwarded to the LAN computer with IP 192.168.1.101 for all protocols (both TCP and UDP).

As a general rule, you have to provide three main settings: the port number on which the port forwarding applies for the router’s public IP address, the private IP address of the LAN computer assigned with the task to dispatch client requests for this specific port, and TCP as the transport protocol used for the HTTP and HTTPS services. As each router implements a different user interface for the web-based settings, it is useful to locate your specific router model options for port forwarding at https://portforward.com/router.htm .

Implementing Port Forwarding with Apache Vhosts

The first directive, Listen 8080, instructs Apache to listen on TCP port 8080. The starting <VirtualHost *:8080> container is used with the end </VirtualHost> container to enclose the group of directives that apply to the new vhost. The wildcard asterisk (*) with the port number 8080 appended with a colon indicates that the enclosed directives apply to incoming requests destined to any one of the available IP addresses (*) of the web server over port 8080.

Testing the New Virtual Host

To implement the router’s port forwarding service, you have to access your site from an external LAN using the public IP address of your router. The common case is your ISP assigns your router a dynamic public IP address that changes, e.g., each time the router restarts. Alternatively, an ISP can offer static IP addresses, usually after the client’s request. In each case, to find the current public IP address of your router, use an online service like https://bearsmyip.com/ . The current public IP address of your router is displayed in your browser, as shown in Figure 3-6.

Your directory index is displayed in your browser, as shown in Figure 3-7.

To make the test definitive, you next have to request the web page from an external computer to your LAN. You can either use your mobile phone’s Internet connection and view the web page with the previous URL or have a remote computer make the connection for you. There are many online services for testing web pages from various positions around the world. Actually, in Chapter 5, you will follow the steps to create a similar Internet service all by yourself. Such an online service is www.webpagetest.org . Using the images sent to your browser by this site, you can view the web page the way it is downloaded to the site’s remote browser. You can even choose the country, city, and browser, and also view statistics such as the download time. Figure 3-8 shows the webpagetest.org home page .

Use the Test Location drop-down list to select a location (country and city) where the request to your server will originate from, and select the browser used from the Browser drop-down list. Click the Start Test button. After a few seconds, images of your web page are displayed along with info about the download time and the web page’s size. Figure 3-9 displays the result web page.

On the web page in your browser, you can view screenshots of the directory index, each one taken from different tests for your site. You can click those images to enlarge them. This test verifies that your web site is able to be viewed externally.

With your site available to users throughout the world, you can make use of the GeoIP Apache module to give your web server information about the visitor’s location based on their IP address. The PHP source code will use these geographical details and return geographical information in the web page sent back to the user.

Using the GeoIP Apache Module

With the online service proving that your web pages are available to the whole Internet, it is a good chance to use a geolocation service to retrieve information about the origin of the users visiting your site and at the same time try an Apache module. With a geolocation service, the IP addresses of your visitors are compared to a database and are matched to specific countries, cities, geographical coordinates (latitude or longitude), etc. Those values are assigned to the Apache server variables for each client’s request and become available from the PHP engine.

With the following steps, you will implement a geolocation service with MaxMind’s Apache module geoip_module .

The geoip_module shared object file (mod_geoip.so), which includes the compiled source code used by Apache, is installed in the directory /usr/lib/apache2/modules.

Figure 3-10 displays the list of modules currently loaded.

geoip_module is included now as a symbolic link to the directory /etc/apache2/mods-enabled.

geoip_module looks up the client’s IP address from MaxMind’s database. The following are the steps to download the GeoIP database.

Create a PHP file for testing the GeoIP database.

With the GeoIP module enabled, the web server looks up the IP address of the client in the database files and sets environment variables such as GEOIP_COUNTRY_NAME used next from the PHP global variable $_SERVER, for instance $_SERVER["GEOIP_COUNTRY_NAME"].

Select also the browser’s name in the Browser drop-down list.

Chrome

Alternatively, you can select the country from a map using the Select from Map button. The available geographical locations are pinned on the map, as displayed in Figure 3-12. Click a specific pin to use the corresponding remote computer for your test.

Click the Start Test button.

Figure 3-13 displays the web page, returned when the test runs, enlarged by clicking it. This is the web page that will appear in the web browser of the user in Ireland.

In the site in the following section, the geographical information for the user is taken from the PHP source code and processed to display web pages with text corresponding to the time in the official language of the country associated with the user’s IP address.

Responding to the Visitor’s Native Language

With this next project, you’ll create a web site that looks up the IP address of the visitor to the GeoIP database, retrieves the visitor’s two-letter country code (ISO 3166-1 alpha-2), and responds by saying “hello” in the official language of that country. This is a simplified example; however, similar techniques are used on the sites of international corporations to provide their content, e.g., device manuals, in different areas of the world.

The PHP code retrieves the GEOIP_COUNTRY_CODE environmental variable, whose value is a two-letter country code. A switch statement then checks this value against some predefined country codes, for instance, US, UK, and FR. You can add more switch statements for more country codes. For each country, a “hello” message in the corresponding language is printed on the screen. The default statement, which applies for all cases not covered in the previous switch statements, prints a Unicode smiley instead of a greeting. The specific smiley used in the example corresponds to Unicode hex code 1F600. To print the characters in a large red font, CSS style properties were used.

Visit the webpagetest.org home page to test your server and select a U.S. city from the Test Location list. In the example shown in Figure 3-14, a computer located in California was used.

The IP address 94.64.2.196 used in this example should be substituted with the public IP address of your router. Click the Start Test button. The web page in Figure 3-15 displays the content of the web page viewed from the remote computer in California.

Perform the test again, this time from a French location. On the home page of webpagetest.org, displayed in Figure 3-16, a computer from Strasburg is selected to download your specified web page.

Click the Start Test button to run the test. As displayed in Figure 3-17, the web page of your site greets the visitor with “bonjour.”

Do a final test using a South Korean site. In the example in Figure 3-18, a computer located in Seoul was selected. For simplicity, the PHP code of geo3.php supports only three countries, leaving all other country visitors to be welcomed with a smiley.

As displayed in Figure 3-19, for a non-US, UK, or France visitor, instead of a written message, the downloaded web page from your site displays a broad smile.

Another site for testing your page is www.geoscreenshot.com . It performs multiple tests from different locations and displays the results in a single web page. Figure 3-20 shows a test for the geo3.php web page.

In the following section, you’ll install another database, GeoIPCity , to look up the IP address of the visitor and retrieve the latitude and longitude associated with the IP address so that the visitor’s location on the map is returned to the user.

Using a Map to Display the Visitor’s Location

In this project, you’ll gather more information about the visitor, such as the city registered with the IP address used and also the geographical coordinates. The latitude and the longitude associated with the IP address of the client can be used to pinpoint the location of the client on a map. To use this information, another database file should also be downloaded and included in the files that the Apache server looks up.

The previous PHP source code injects the basic HTML tags with the echo command . By using a single quote (') instead of a double quote (") in echo, you can maintain the double quotes of the HTML source code without having to escape them with a backslash (") in order not to intervene with the PHP string delimiter double quotes.

The $_SERVER['GEOIP_LONGITUDE'] and $_SERVER['GEOIP_LATITUDE'] parts that correspond to the visitor’s longitude and latitude, respectively, are the PHP global variables. The Apache module sets them by looking up the client’s IP address in the GeoIPCity.dat database . The coordinates will be used in the URL value of the src attribute of the image element (img) to create the static map that will be displayed in the web page of the user. Static maps are image files, commonly in PNG or JPEG format, that do not require a mapping library. However, they lack interactivity with controls like the Zoom control or the Map Type control. According to the coordinates in the image URL, a specific area will be displayed that will reflect the origin of the client’s host computer.

The previous tag is inserted into the HTML source code and creates an image with a width of 600 pixels and a height of 300 pixels, with English language labels. It focuses on longitude 73.7638 and latitude 42.6564 with a zooming level set to 13. There is also alternative text (alt) in case a problem occurs and the map does not load. Figure 3-21 displays how the user visiting staticmapmaker.​com can interact with the Static Map Maker online tool. By using the provided form, the user can use specific geographical coordinates, zoom level, width, and height for the image created, and they can define the category of the map formed, e.g., satellite or traffic. So, you can include this map on a site, a URL with the required query string according to the user settings is also created automatically. The image tag that includes the previous URL as the value of the src attribute is also formed to be used readily in the HTML source code.

Figure 3-22 displays the requested web page geo4.php from a computer in the LAN where the web server is hosted for this example.

Two more PHP global variables are used in the previous source code: $_SERVER['GEOIP_CITY'], which holds the name of the city and $_SERVER['GEOIP_COUNTRY_NAME'], which corresponds to the name of the country as registered with the client’s IP address.

Using the URL of file geo5.php, the web page is displayed, as shown in Figure 3-23.

In the next section of this chapter, you’ll make changes to improve the appearance of the previous site.

A New Version of the Static Map Web Page

Test geo6.php in your browser, as shown in Figure 3-24.

The value pm2rdl corresponds to a placemark that belongs to group 2 of the Yandex placemarks (pm2), is red (rd), and also has a large (l) size.

The third difference is the background color selected for the web page, which is actually the same color used for the oceans on the map. To find the specific color (RGB color code #B9D6E5 in this example), use the following instructions.

The Shutter window opens, as displayed in Figure 3-25.

Open with your browser the previous version, geo5.php, to detect the ocean color. Click the arrows for the up-down control at the bottom of the Shutter window to set the seconds (e.g., 5) of the Delay field. This corresponds to the delay timer for the shot. Click next to the Window menu button and select Active Window. The delay timer starts counting, and within this interval you have to select with the mouse the browser window, displaying geo5.php, for the screenshot. Click the browser window to select it. The image is saved in the Pictures folder of your home directory.

Use an image editor like mtPaint to open the image file. With the Eyedropper tool, click the color of the ocean. As displayed in Figure 3-26, the Eyedropper tool for mtPaint is included as a button in the Palette Editor window, which you open by selecting the Palette menu and then Palette Editor.

The color used for the oceans in geo5.php is used in the source code of geo6.php as the background color, by setting the value of the background color in the CSS section to the RGB value #B9D6E5.

Summary