WebFund 2015W: Tutorial 4: Difference between revisions

Latest revision as of 04:21, 2 February 2015

In this tutorial you will examine notes-demo, a simple node express application that demonstrates session support and basic form interaction. You will need to use the browser and node debugging tools described in the Tutorial 2.

In this tutorial you should do the following after getting notes-demo running.

Understanding Sessions

Try logging in to the app using two different browsers (e.g., Firefox and Chrome). What happens when you logout from one browser - how does it affect the other?
Observe the request and response for the app's home page (http://localhost:3000). Look at both the network panel (load the page after selecting the network panel) and the HTML DOM view (Inspector/Elements)
Observe the contents of the form submit POST request: how much data is sent to the server? Observe it both from the browser side (to see what is sent) and inside of node, particularly where the POST results are returned.
The session state is stored in the browser. Can you figure out the user's username from this information?
What does the req.body and req.session look like just before a page gets rendered?

Understanding User input

What happens to HTML tags embedded in a note title? What about the content?
What code is responsible for this difference? Specifically, what is the difference in how user data is stored or displayed?

Questions to ponder

Who can observe the cookie? Modify it?
How "persistent" are sessions on the server? The client?
How could you "hijack" a session? Does the difficulty of session hijacking relate to whether a login is password protected or not?
How much code would you have to add to tinywebserver in order to get it to duplicate the functionality of notes-demo?
Why does this application have so many screens to implement so little functionality?
Can you access notes belonging to a different user without logging in as that user?

Getting Checked Off

To get checked off, show a TA the following:

A session cookie sent by the browser
A session cookie stored on the server
A modified /notes page that shows an error after attempting to edit a non-existent note

@@ Line 1: / Line 1: @@
-'''This tutorial is not yet finalized (and in fact is likely to change radically).'''
 In this tutorial you will examine [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/notes-demo.zip notes-demo], a simple node express application that demonstrates session support and basic form interaction.  You will need to use the browser and node debugging tools described in the [[WebFund 2015W: Tutorial 2|Tutorial 2]].
@@ Line 16: / Line 14: @@
 * What code is responsible for this difference?  Specifically, what is the difference in how user data is stored or displayed?
-To get checked off, show a TA the following:
+===Questions to ponder===
-* A session cookie sent by the browser
-* A session cookie stored on the server
-* A modified /notes page that shows an error after attempting to edit a non-existent note
-Questions to ponder:
 * Who can observe the cookie?  Modify it?
 * How "persistent" are sessions on the server?  The client?
@@ Line 27: / Line 20: @@
 * How much code would you have to add to [[WebFund 2015W: Tutorial 3|tinywebserver]] in order to get it to duplicate the functionality of notes-demo?
 * Why does this application have so many screens to implement so little functionality?
+* Can you access notes belonging to a different user without logging in as that user?
+===Getting Checked Off===
+To get checked off, show a TA the following:
+* A session cookie sent by the browser
+* A session cookie stored on the server
+* A modified /notes page that shows an error after attempting to edit a non-existent note