DNS and DDNS

The Domain Name System (DNS) service translates the domain name of a computer to the corresponding static IP address. Purchasing a static IP address from your ISP is usually more expensive than having a dynamic IP address that often changes, for instance every time your router reboots. Correlating a domain name to a dynamic IP address is still possible with DDNS. There are two ways to update the DDNS service provider data with your changed IP address. The method discussed in this chapter is to use a DDNS service in your router. Today most routers support DDNS services. The only drawback is that some router models support DDNS for only certain DDNS service providers. If your router does not support your DDNS provider, you can use a DDNS client program that runs in the background of your web server as a daemon process. This is the method implemented in Chapter 10, where you’ll use the program ddclient. The program ddclient checks in constant time intervals to see whether the public IP address of your router has changed. If it has, an update message is sent to your DDNS service provider.

Registering with a DDNS Service Provider

With this specific DDNS server provider, you can choose three hostnames and also implement web redirect for free.

Once there, click the Sign Up button to begin the registration process (Figure 4-1).

The next page, shown in Figure 4-2, allows you to select a hostname (e.g., christos) and the second-level domain name (for instance, zapto.org or ddns.net ) from a drop-down list. You need also to provide your password and your e-mail. Click the Terms of Service and Privacy Policy box and then click the Free Sign Up button.

The next page, shown in Figure 4-3, asks you to confirm your account by clicking the link of the e-mail sent to the account you provided. This allows the DDNS provider to verify that your e-mail account is a real one.

Figure 4-4 displays a snapshot of the e-mail received.

After clicking the Confirm Account button, the window shown in Figure 4-5 appears in a new tab of your browser with the message “Your account is now active!”

Click the “Get started with Dynamic DNS” link to continue. The window displayed in Figure 4-6 informs you to create a username and a security question to complete your account configuration. Click the Add Now button to proceed.

In the web page shown in Figure 4-7, you set your username, security question, and also some personal information.

Click the Save button to save the information entered and thus complete the account setup process. You can use the hostname obtained here to configure the router of your LAN to implement the DDNS service.

Configuring the Router’s DDNS

With a new domain name obtained in the previous section, you can now configure your router to relay its public IP address to the DDNS provider each time this IP address changes. Locate the DDNS section in the web-based configuration interface of your router. As shown in Figure 4-8, for the router used in the examples, you can view the DDNS configuration options by selecting Internet and then DDNS from the menu.

Select the DDNS provider from the Provider drop-down list, which has all the DDNS providers that the router supports. Enter the details required: your username, your password, and the hostname you chose at the DDNS registration process. Complete also the Provider URL field, and select the On DDNS radio button. Click the Apply button to confirm the new settings.

The web page geo5.php is displayed, as shown in Figure 4-9.

The web page geo5.php loads with the URL that includes the previously acquired domain name. In the following section, you will implement web redirect so that if you do not utilize the default HTTP port number, but another one such as 8080, this number is hidden from the URL.

Implementing Web Redirect

If your ISP blocks the default HTTP port for incoming connections to your LAN, you can still use URLs that do not append a colon and the port number after the domain name, although behind the scenes the specific port number is actually used. To include this feature, you need to configure the web redirect service offered by DDNS providers.

By setting a specific port number, such as port 8080 in the web redirect option, you are enabling clients to use a port-free URL. The DDNS provider redirects visitors to another domain name, where the port number is already appended with a colon. To test the web redirect feature, another domain name is required, so this is a good chance to utilize the second of the three domain names offered from the DDNS provider.

Log in on the DDNS provider home web page and click the Dynamic DNS link in the left panel. The first domain name, e.g., christos.ddns.net , appears as a link that leads to the configuration web page of this domain name, as displayed in Figure 4-10.

Click the Create Hostname button to create your second domain name, the one used for web redirect. Enter the third-level domain name in the Hostname textbox, as shown in Figure 4-11. For instance, in this example, webtoolsonline was used. To also change the second-level domain name, select a different one from ddns.​net in the Domain drop-down list. In this example, servehttp.​com was used. The FQDN therefore becomes as follows:

webtoolsonline.servehttp.com

For the Record Type radio buttons, select Web Redirect to implement this service for the new domain name. By selecting this option, a new textbox URL/IP address appears. Type the first domain name with port 8080 appended after a colon.

christos.ddns.net:8080

Each time the new hostname webtoolsonline.servehttp.com is used from a client, the DDNS service redirects the request to christos.ddns.net:8080 .

Click the Create Hostname button. As viewed in Figure 4-12, the new domain name is added in the Hostname list.

To try the new domain name, enter the following in the address bar of your browser:

http://webtoolsonline.servehttp.com

With the web redirect service enabled, the URL http://webtoolsonline.servehttp.com redirects to christos.ddns.net:8080 . The directory index of the Apache vhost listening to port number 8080 (used in Chapter 1) is displayed in the web browser, as shown in Figure 4-13.

To visibly retain the original URL, you have to implement the Mask URL feature by configuring the DDNS provider. Edit the hostname on the Hostnames web page of the DDNS provider’s site and select the Mask URL box. Click the Update Hostname button to apply the configuration.

With the URL mask enabled, the DDNS service injects JavaScript into the source code of the web page to create an HTML frame that covers the entire browser window and includes the same content but a different URL in the address bar of the browser. The result, as displayed in Figure 4-14, is a web page with the same content; however, instead of the expected URL shown here where the client redirects:

http://christos.ddns.net:8080

the following URL appears in the address bar:

http://webtoolsonline.servehttp.com

Hint!

To view the frame created with the Mask URL option, right-click the web page and select View Page Source for Chrome or the corresponding option for other browsers. In this case, the URL of the address bar is altered with JavaScript code.

You have so far created and used two hostnames for your registered DDNS account. You will use the third hostname, e.g., secureserver.ddns.net , in Chapter 8. In Chapter 9, you will find the steps to obtain and use your own second-level domain name, e.g., httpsserver.eu, required for running a secure site. In the following section, you will put the hostnames created so far to use to create your next project.

Implementing an Online Web Service

With such a catchy domain name like webtoolsonline.servehttp.com , it is tempting to implement an actual online web service. You can implement, for instance, the WHOIS service, which applies whois, a query and response protocol that is widely used for querying databases that store the assignees of Internet resources, such as domain names and IP addresses. You can run the whois command at the command line, but it is also offered as an online web service from various sites, e.g., whois.domaintools.com or ping.eu, which is shown in Figure 4-15.

Ping.eu, along with other similar sites, offers online web services, for instance DNS lookup, ping, traceroute, and port check. You will implement port checking in Chapter 10.

To create a site that offers WHOIS as an online service, you can use a web page with a form; the form will include a textbox to submit an IP address to the PHP program on the web server that interfaces with the Linux shell and returns information about the corresponding domain name.

The first step to implement the online service is to change the default web page that Apache sends in response to using port 8080. As explained in the previous sections of this chapter, the domain name webtoolsonline.servehttp.com resolves to christos.ddns.net:8080 and to the router’s public IP address through port 8080. The Apache vhost configuration file for serving port 8080 for any domain name was set up in Chapter 1 to example2.conf. The directory index used in this file for port 8080 is index3.html, which is actually the web page shown in the previous section with the URL http://webtoolsonline.servehttp.com . As a second step, edit example2.conf and replace index3.html with another HTML file, for instance onlineservice.html.

Create a new web page called onlineservice.html that includes a form similar to the one on the ping.eu page. This form will be used to submit the user’s data to the web server, and as viewed from ping.eu, two form elements are required at a minimum: the textbox that will receive the IP address or the hostname and a submit button. The form’s action attribute will refer to a PHP file that receives the user’s data, interfaces with the whois command-line program, and then passes the user’s data as arguments. Finally, the whois output is included on the web page generated by PHP and sent back to the user. With similar steps, you can implement any other online service such as the ones offered by ping.eu .

Editing the Apache Configuration File

In this section, you’ll edit the configuration file example2.conf used in Chapter 1 to implement two sites with two vhosts, one listening on port 8080 and one listening on port 8181. In this example, only the vhost listening to port 8080 is required; therefore, for this vhost the Apache DirectoryIndex directive is edited to set the file onlineservice.html as the new directory index of the site.

The next step is to create the directory index used from the vhost. This is called onlineservice.html and is the web page that contains the form for submitting an IP address.

Editing the Web Page for Submitting the User’s Data

The HTML file that includes the form used by the user to provide the data to the web server is onlineservice.html, which was set in the previous section in the vhost configuration file as the directory index for the site webtoolsonline.servehttp.com . Figure 4-16 displays the directory index.

The HTML source code includes a form that implements the method POST for submitting the data and sets the value of the action attribute to result.php. This is the program on the server side that will accept and process the data submitted.

There are two more attributes in the form element, both required for the form validation, which is implemented locally by JavaScript. The name attribute is used by the JavaScript function validate() , which validates the form, to refer to this form. The return value of validate() is set as the value of the fourth attribute of the form, the onsubmit event. Events are actions applied to the web page that JavaScript responds to. The onsubmit event defines the form submission as the exact instant in time that the source code bound to this event will run.

The name attribute of the form is used next to refer to the specific form in the HTML file and then return the value of the user_data textbox to variable f. For the variable f, which is an object of class string, the trim() method removes whitespace from both sides of the string. If the user accidentally enters spaces in the user_data textbox with the IP address, trim() is used so that validate() won’t reject the IP address.

The ipformat regular expression (regex) is used next to check whether the value of variable f matches the pattern of a valid IP address according to ipformat. The details of this regex are explained in the following section.

If a match is not met, the IP address is considered invalid, and validate() returns false. In that case, the form is not submitted, and the user is asked to enter a valid IP address with a pop-up window message, created by alert().

Working with Regular Expressions

A regex usually uses two slash characters, e.g., /abc/, to delimit the search pattern. The caret (^) and the dollar sign ($) anchors match the start and the end, respectively, of the string the regex pattern is applied to.

Testing the JavaScript Form Validation

Click the Go button, which submits the IP address to the web server. A web server program to receive the data is not defined yet, but you can still view the warning message the JavaScript creates for an invalid IP address.

A pop-up window with the message “Enter a valid IP address” appears, as displayed in Figure 4-17. In the message, the domain name of the server is included as christos.ddns.net:8080 , which is the domain name that webtoolsonline.servehttp.com actually redirects to.

Next you will create the action program for the form, result.php, which receives that IP address and uses it with the whois command-line program. But first you can try to run whois from the command line to find out how it outputs data and comments. The latter will be excluded from the output of the PHP program for the WHOIS service.

Running whois from the Command Line

The IP address entered by the user in the textbox of form f1 will be submitted to program result.php on the web server. The PHP engine that processes result.php will run the whois shell utility with this specific IP address as an argument. The output of whois will be entered in the web page the user receives from the echo PHP command.

Figure 4-18 displays the whois output at the Linux terminal.

Notice that some lines include comments starting with the percent (%) symbol. In the evaluated result.php, it is probably a good idea to remove those comments and make the output appear more professional.

Figure 4-19 displays the whois output for the second IP address.

Notice in this case that the hash symbol is also used to indicate the start of the comments. Now it’s time to create result.php, the program that receives the IP address entered by the user, processes it with the whois command, and returns to the user the output with the comments excluded.

Editing the File That Processes the User Data

You create next result.php in the document root (/var/www/html) of the vhost used.

In the result.php source code, the global PHP variable $_SERVER, set by the PHP engine, includes the element $_SERVER['REMOTE_ADDR'], which holds the visitor’s IP address. This information is not required by the WHOIS service but could be used as additional info for users who view your site.

The variable $exec_string is set to the string that represents the command that will be executed from the terminal at the web server. It is set to whois $user_data. This evaluates to whois <IP address>, where <IP address> is the specific value provided by the user, e.g., 87.202.116.192.

For this stream, the data wrapper specifies the stream type, and the text/plain target specifies the stream format.

The function trim() is used to remove the characters specified in its second argument. Since in this example no second argument exists, it returns a string stripped of any space, tab, or newline characters at the start and the end of the string. This is the corresponding PHP function to the JavaScript trim() method used previously in file onlineservice.html.

The two strpos() functions receive the returned string and check whether the character at position 0 (first position) is either the percent or the hash character. If this is the case, the command continue executes, and as a result, the while loop proceeds without executing the last two while commands in the current iteration. If the current line starts with the percent or hash character, this line is therefore ignored.

All not-commented lines are thus included in the output generated by the PHP engine and returned to the user from the web server.

Testing the WHOIS Online Service

You can test next your online WHOIS service at webtoolsonline.servehttp.com . Enter one of the IP addresses previously tested with the whois command from the terminal, e.g., 1.2.3.4, as viewed in Figure 4-20 .

Click the Go button to submit the IP address to the web server.

The result.php evaluated web page for the IP address 1.2.3.4 is displayed in Figure 4-21.

You will notice that the style of this web page resembles the Linux terminal. At the top of the web page, the message whois 1.2.3.4 appears in the center, and the public IP address of the client is displayed on the right. The output differs from the whois terminal command because it lacks comment lines.

In the next section, you can add a favicon image to the web site to make the site instantly recognizable.

Adding a Favorite Icon to the Site

A favorite icon, referred as a favicon in its filename, is the tiny icon you see on the left of your browser tab when a web page loads. It makes a site recognizable because you can easily locate it when lots of tabs are open in the browser. Even before the web page loads, the favicon icon appears in the address bar of the browser, next to the address, which is completed with the autofill feature. This ensures that the address you are about to enter is the correct one. Favicons appear also in the bookmark list, where the URLs of your favorite sites are saved.

The first step of including a favicon image is to design it. In the Linux locate an image editor program or download and install one if necessary. The example shown here uses the mtPaint editor, which is the default image editor on the Linux system I’m using. Open mtPaint, and from the File menu select New. Favicons require a size of 16×16 pixels; therefore, in the dialog that appears (Figure 4-22), set the dimensions of the new image to 16 pixels width by 16 pixels height.

mtPaint displays a black-colored canvas, sized 16×16 pixels, for the new image (Figure 4-23).

This is a tiny canvas to work with, so zoom in to enlarge it. To do this, in the zoom percentage drop-down, use a bigger zoom than 100%, for instance 1200% (Figure 4-24).

You can start by applying your ideas to the canvas. For instances, you can click the Flood Fill button (the paint bucket), select a white color (e.g., color 7 from the color list on the left), and click next any pixel of the canvas to turn the background of your image to white. Using the Paint button (the blue pencil), select a color from the list and click any pixel to color it. In Figure 4-25, the blue and red colors are being used. The image displayed includes two letters, OT, for “online tools.” The letter T strives to look like a hammer.

From the File menu, choose Save As to save the image to one of your directories, e.g., Pictures, and in the dialog that appears, provide the Pictures file path and favicon file name. Select also PNG as the image format in the File Format list and click the OK button .

Test your site next. As viewed in Figure 4-26, the favicon image appears on the left of the web page tab in your browser.

As shown in Figure 4-27, the home page of the site loads with the default favicon image.

Enter in the form textbox an IP address and click the Go button. The result.php web page is displayed in your browser. As shown in Figure 4-28, result.php includes the yellow favicon2.png icon on the left of its tab .

You can create a favicon icon in a few steps to provide an image that personalizes your site and even become the motivation for an inspired logo for the web content of the site .

Summary

In the next chapter, the source code of another web service is displayed, which creates a site that allows web server administrators and web designers find how their site looks from a remote location. But first you are introduced to another popular open source web server, the Lighttpd server.