GETS vs POST

GET and POST requests in HTTP traffic

This web page illustrates the use of GET vs POST requests in combination with forms and images include in a web page. The web page includes some instructions for exercises for you to carry out.

Using GET vs POST

Below a HTML form which generates a GET request:

Please enter your name to register

Now the same from with POST instead of GET:

Please enter your name to register

FOR YOU TO DO: Try out the buttons above, and look at the generated web traffic in the OWASP ZAP proxy.
You should see GET and POST requests to www.w3schools.com in the HTTP traffic. Here you should see that for the GET request the parameters firstname and lastname end up in the URL, whereas with the POST request they end up in the body of the HTTP request

Using GET and POST with a hidden field

Now a form for a GET request with a hidden field for the first name. This could for instance be a webpage tailored for user 'John' who already supplied their first name:

Hello John, please also enter your last name to register:

Now the same, but with a POST field:

Hello John, please also enter your last name to register:

FOR YOU TO DO: Look at the HTTP traffic to see which value are sent at the first name, and look at the HTML source of this webpage to see where the hidden parameters come from.

Including images in a web page

This webpage also includes an image, namely the Radboud logo to the right of this text. The browser takes care of wrapping the text around the image: if you resize your browser window to make it wider or narrower you should see the text is wrapped around the image differently.

FOR YOU TO DO

Look at the HTML source of this webpage to see how this picture is included in the webpage.

Is this image loaded with a GET request or a POST request? Look at the HTTP traffic in ZAP to figure that out.
The image may be cached in your browser: if that is the case you will not see the image being retrieved in the HTTP. Firefox you can force the cache to be bypassed when reloading a page by pressing CONTROL-SHIFT-R instead of CTRL-R for a normal reload.

To get an impression of what the HTML spec looks like, look at the specification of the <img> element in the HTML spec.
Here the specification lists the attributes that this element takes and how browsers are meant to process these. Some of these attributes, like width, are pretty self-explanatory. Others, like the alt attribute, are less obvious and and come with lots of guidance on how it should be use; for example, see the Requirements for providing text to act as an alternative for images.
Note that the URLs above have a fragment, i.e. some characters after the # character, to jump to the right offset inside a webpage.

Copy this file to your own computer and edit it to change it to have the Radboud logo displayed in a different size or left-adjusted rather than right-adjusted.