WebFund 2015W: Tutorial 4: Difference between revisions

From Soma-notes
Created page with "In this tutorial you will examine [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/session-demo.zip session-demo], a simple node express application that demonstra..."
 
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
In this tutorial you will examine [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/session-demo.zip session-demo], a simple node express application that demonstrates session support.  You will need to use the browser and node debugging tools described in the [[WebFund 2015W: Tutorial 2|Tutorial 2]].
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]].


In this tutorial you should do the following:
In this tutorial you should do the following after getting [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/notes-demo.zip notes-demo] running.
* Get [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/session-demo.zip session-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?
* 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 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)
Line 9: Line 10:
* What does the req.body and req.session look like just before a page gets rendered?
* 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 [[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:
To get checked off, show a TA the following:
* A session cookie sent by the browser
* A session cookie sent by the browser
* A session cookie stored on the server
* 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?
* 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 [[WebFund 2015W: Tutorial 3|tinywebserver]] in order to get it to duplicate the functionality of session-demo?

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