Objective

• understand the basic mechanics of the HTTP protocol from both a client and server perspective

Hands-on with HTTP

Step 1:

Familiarize yourself with the built-in developer features in Chrome, or equivalent features in other browsers. (From the Chrome menu, go to More Tools -> Developer Tools. If you have trouble see this diagram.)

Step 2:

Open a private browsing window. (This step is important.)

Step 3:

Open the Developer Tools, click on the "Network" tab, and check the "Disable cache" box.

Step 4:

With Developer Tools open, click on the tab labeled "Network", then load the page https://cis.gvsu.edu/~kurmasz/Humor/engin.html Important: Make sure you are using https not http

Step 5:

Select and expand the HTTP message labeled "engin.html". Make sure the Headers tab is selected, then look through the General section for the Status Code

1. What browser and operating system are you using?
2. What is the Status Code; and what does it signify?
3. What would the status code be if you mis-typed "engin"?
4. Test your answer to the previous question by trying to fetch https://cis.gvsu.edu/~kurmasz/Humor/enign.html (notice the misspelling).

Step 6:

Examine the request headers for your call to https://cis.gvsu.edu/~kurmasz/Humor/engin.html.

5. Are request headers sent by the browser or the web server?
6. What is the value of the User-Agent header?
7. What is the purpose of the User-Agent header?
8. Why does the User-Agent value appear to list several different web browsers? (Hint: See this Stack Overflow post: stackoverflow.com/questions/4024230/strange-user-agent-with-google-chrome.)
9. Visit the page using a couple other browsers (Safari, Firefox, Chrome, IE, etc.) and report the different User-Agent strings used.
10. What is the value of the Accept header?
11. What is the purpose of the Accept header?
12. What is the purpose of the "q" parameter? (Hint: Look here.)

Step 7:

Now, examine the response headers for your call to https://cis.gvsu.edu/~kurmasz/Humor/engin.html.

13. What is the value of the Content-Type header?
14. What is the purpose of the Content-Type header?
15. List the other response headers and briefly describe their purpose.

Step 8:

View the actual payload of the HTTP response by clicking on the "Response" tab.

16. What kind of data was received? Does it match the Content-Type header?

Step 9:

Visit https://cis.gvsu.edu/~kurmasz/Images/buzz1.jpg.

17. What is the Content-Type?

Step 10:

Uncheck the "Disable Cache" box and reload https://cis.gvsu.edu/~kurmasz/Humor/engin.html.

18. What is the status code? (If the Status Code is still 200, try refreshing again.)
19. What is the purpose of this status code? What is the benefit of returning this code instead of 200?
20. What additional request headers did the browser send.
21. What does the value for If-None-Match represent?
22. Where did the browser get this value?

Step 11:

Load the page http://cis.gvsu.edu/~kurmasz/Humor/engin.html Notice that you are using http instead of https

23. What is the status code? What does this status code indicate?
24. What previously unseen response header did the server return when you requested the "http" page?
25. How did your browser respond to this code?

Step 12:

Load the page https://cis.gvsu.edu/~kurmasz/Images This URL does not end with a slash.

26. What is the status code? What does this status code indicate?
27. What is the value of the Location response header?
28. What is difference between the status code returned for the http page in question 23 from question 26?

(Take note of how this trailing slash is handled --- especially if you are writing a web server!)

Updated Thursday, 23 January 2020, 3:14 PM