CS 100 (Learn) — CS 100 (Web) — Module 09

Dynamic Web - Client+Server Applications

The full power of modern dynamic web pages is accomplished when clients and servers work together.

In this section, we describe some of the ways that they can cooperate.

Cookies

If you have never heard of a Cookie (or a "web cookie" or a "browser cookie"), they are the primary mechanism that web sites use to track your behaviour.

Whenever an HTTP request is made, the web server can send back a message to the client in addition to the web page. These messages are known as "cookies", which are named after "fortune cookies" because the messages are hidden inside of something else. The client does not do anything special with the message, it just stores the message on the local computer. However, the next time that the client makes an HTTP request to the same web server, it passes the cookie back to the web server along with the request.

Consider this approximation of what happens:

client: (visiting example.com for the first time) I have an HTTP request for example.com/hello.html and I have no cookies for example.com

server: Hey client, here is the file you have requested, and here are some cookies for you: VISITOR_ID=12345678, NUM_VISITS=1

client: (visiting example.com for the second time) I have an HTTP request for example.com/hello.html and my cookies for example.com are: VISITOR_ID=12345678, NUM_VISITS=1

server: Hey client, here is the file you have requested, and here are some updated cookies for you: VISITOR_ID=12345678, NUM_VISITS=2

Cookies significantly increase the convenience of the web by remembering who you are and your credentials so that you do not have to constantly log in to websites that you visit frequently. They can also be used to remember your settings and preferences as well as what items are in your "shopping cart".

However, just like any technology, they can be used for more nefarious purposes. Consider the following scenario:

• You visit the website x.com, researching a private matter that you may be embarrassed about
• On that website there is an advertisement
• However, the advertisement is not hosted at x.com
• The advertisement is located at evil-ads.com
• When your browser requests the ad, the web server at evil-ads.com sends your browser a cookie that contains a unique number that can be used to identify you
• Later, when someone is looking over your shoulder, you happen to visit the harmless website y.com
• However, on that website there are also advertisements hosted by evil-ads.com
• When retrieving those ads, your browser sends back the cookie
• The evil-ads.com web server, knowing that you are the same person that visited x.com, sends back an ad related to that embarrassing matter

To avoid this kind of tracking, you should learn how to put your browser into incognito or private mode, which prevents your browser from permanently storing cookies and your browser history. This may be especially important when you are browsing dubious or potentially embarrassing websites.

Query Strings

You have probably seen query strings without knowing their name. In the following URL:

http://x.com/content?session=878d294f0d35&referral=alice&sound=off&course=cs100&page=3&auth=175b929384e06e4742930fd69133cf6c

everything that appears after the ? is known as the query string. By convention, a query string is made up of pairs of values, with each pair separated by an ampersand (&) and then the two values within the pair separated by an equal sign (=).

Both clients and servers can access the information in the query string. There are numerous different ways that clients and servers use query strings to communicate. The sample query string above illustrates a few ways they are used.

Websites can use a "session number" to keep track of the pages you visit within the website. When you first visit a website, the server can generate a unique session number such as session=878d294f0d35. Every link will also include the session number (for example, <a href="diffpage.html?session=878d294f0d35">). As you visit pages on the website, the server can keep track of each page you visit, the sequence you visit them in, and how much time you spend on each page. This approach is very similar to the way cookies are used, but there are subtle differences. For example, if you have two different web browsers (or two tabs within the same browser) visiting the same web site, they can be tracked separately.

Query strings are also used to indicate how the person arrived at the page. For example, if Alice has a website that reviews widgets and has a link to a website that sells widgets, if the URL contains the query string referral=alice, the widget seller's web server knows that the potential customer arrived there via Alice's web site and may give Alice a percentage of the sale if the customer buys a widget.

Websites can have parameters that adjust how a page is displayed. For example, if the text sound=off appears in the query string, then the client can disable the sound for the page. This technique is a popular method for reusing a single flexible web page instead of generating many different pages with similar content.

Using the same idea, a single web page can be used to display a wide variety of content. For example, a website could contain course notes for many different courses and have a single web page that is used to display the information. By using a query string such as course=cs100&page=3, it instructs the server to display the third page from the CS 100 course notes.

As a final example, you may see an authentication code embedded in some query strings. This code can be used to identify who you are and allow you to do something that only you are allowed to do. It may seem insecure to use an authentication code such as:

  auth=175b929384e06e4742930fd69133cf6c

but once you realize that using such a code is actually harder to guess than something like:

  username=bobsmith&password=ilovecats

then it becomes slightly less scary.

Background Communication

The final method of client/server communication we will discuss is known as background communication.

Consider the following URL:

http://weather.uwaterloo.ca/waterloo_weather_station_data.xml

This example uses XML, which is very similar to HTML. XML is more flexible than HTML and more useful for representing data, not just documents.

If you look at the page, you can see the tag <temperature_current_C>, which actually displays the current temperature at the University of Waterloo weather station. If you're suspicious, revisit the page at different times throughout the day.

If you want to build a web page that includes the temperature at the University of Waterloo, you can have the client periodically make a request for that data. Unlike a traditional request (e.g., an <img> within HTML) that is displayed directly on the screen, the request would be made by JavaScript code.

It's complicated, but what happens is that the JavaScript code requests the data, and then eventually receives the data. The JavaScript code then interprets the data and can dynamically adjust the current web page accordingly.

The reason it is called background communication is very technical, but it is because the JavaScript code does not stop to wait for the request to be answered. When new data is received, code is launched to respond to the information.

This type of communication allows clients and servers to communicate without slowing down your web browser or having to reload (or refresh) your web page. This method can also be used to give you notifications. For example, when facebook lets you know when someone has commented on your post. It is also how real-time collaboration is achieved with web sites like Google Docs.