WebFund 2015W Lecture 9: Difference between revisions

From Soma-notes
Created page with "==Resources== ==Video== The video from the lecture given on February 2, 2015 is available now [http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/lectures/comp2406-2015w..."
 
LeeCroft (talk | contribs)
No edit summary
 
Line 1: Line 1:
==Resources==
==Resources==
[http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/notes-demo.zip notes-demo code]


==Video==
==Video==
Line 6: Line 7:


==Notes==
==Notes==
<h3>Notes-demo</h3>
<h4>Using the notes-demo</h4>
<ul>
  <li>When initially accessing the index page of the notes-demo, we are presented with a login page.</li>
  <li>We should be able to type in a username and see the data that is associated with that username.</li>
  <li>Each user has their own set of notes. Once logged in, they are presented with a list of these notes.</li>
  <li>Users have the ability to create new notes and edit existing ones.</li>
  <li>The user is only able to access their own notes. There should be no way in which they have view or edit the notes of other users.</li>
</ul>
<h4>Sessions and cookies</h4>
<ul>
  <li>If we are logged in on one browser (i.e. Chrome) and then open a new browser (i.e Internet Explorer) we will be asked to log in on Internet Explorer.</li>
  <li>Each web browser (user) has its own set of notes.</li>
  <li>When different users are accessing web pages, they are making requests to the server which seem to be the same, yet they are getting responses customized for them with their own set of notes.</li>
  <li>How does the server know how to serve the notes which pertain to a specific user? Through the use of cookies and sessions.</li>
  <li>Information relating to whether or not you are logged in is stored in a session on the web server. The session is referenced through a cookie stored by the web browser. So a cookie from Chrome cannot be accessed by Internet Explorer.</li>
  <li>Cookies are a small piece of data which is sent from the server and saved onto the Web Browser’s cache. Every time a user loads the website, the cookie automatically gets sent back to the server, to notify the server of any previous activity. Cookies are a reliable mechanism for servers to remember stateful information (such as whether the user is logged in).</li>
  <li>We can look at the cookies sent by the client using your web browser’s developer tools.</li>
  <li>One thing to note about cookies, the browser is not doing anything to the cookie. All it is doing is sending the cookie back to the server if it is relevant (and when needed).</li>
  <li>Cookies are ‘encrypted’ (kind of), they are made to be hard to guess so that no one can make cookies themselves and pretend to be someone they’re not.</li>
  <li>If someone steals your cookies they can use them on their computer and pretend to be you.</li>
</ul>
<h4>Privacy issues</h4>
<ul>
  <li>Did the server ask us if it can send the cookie to the browser? No.</li>
  <li>Cookies are used by advertisers.</li>
  <li>The advertisers look at your cookies to see what websites you have been visiting.</li>
  <li>Browser have gotten more strict about cookies to make it harder for advertisers to misuse them.</li>
  <li>We need cookies to run just about any web application.</li>
</ul>
<h4>Inside index.js</h4>
<ul>
  <li>When going to the index page the request handler checks to see if there is a cookie and then checks for a username in the session associated with the cookie. If the username is there then it loads the notes page associated with that user. If not then the login page is loaded. This behaviour can be seen in the <code>router.get()</code> method for '/'.</li>
  <li>When the user logs in, their username is put into their session.  This behaviour can be seen in the <code>router.post()</code> method for '/login'.</li>
  <li>If a client tries to directly access the notes page without being logged in, they will be presented with the login page and an error. This behaviour can be seen in the <code>router.get()</code> method for '/notes'.</li>
  <li>When the user logs out, their session is destroyed. This is done to help protect against session hijacking. This behaviour can be seen in the <code>router.post()</code> method for '/logout'.</li>
  <li>You do not put data you care about in a session. The data you care about should be stored somewhere else in a data structure.</li>
  <li>We are storing the data (the notes) in an array which is tied to a specific username, this is stored in an object which contains everyone’s data.</li>
  <li>The data is stored in RAM, once the server is reset we will lose all the data (we will deal with persistent data after the midterm).</li>
  <li>What happens if the user tries to access a note that doesn’t exist? Or if a user put in the wrong log in information? Many cases exist and need to be handled in the implementation of your web app.</li> 
  <li>You need to design your web app to handle different types of errors and exceptions. If a user goes straight to the ‘/notes’ URL but is not logged in, what happens? They should be redirected to the home page or an error page.</li>
</ul>
<h4>Inside notes.jade</h4>
<ul>
  <li>In Jade, you can embed JavaScript using the '-' operator to indicate unbuffered JavaScript code.</li>
  <li>The '-' operator is used in this file with a for loop to iterate through all of the user's notes and display them on the page.</li>
  <li>In Jade, use '!=' to indicate unescaped code. This means any special characters will not be escaped. In this example, this amounts to interpreting the HTML tags inside the notes as actual HTML rather than plain text. In most cases, this is dangerous as it is a security threat.</li>
  <li>&lt;br&gt; is a line break in HTML.</li>
</ul>

Latest revision as of 06:33, 4 February 2015

Resources

notes-demo code

Video

The video from the lecture given on February 2, 2015 is available now as an MP4.

Notes

Notes-demo

Using the notes-demo

  • When initially accessing the index page of the notes-demo, we are presented with a login page.
  • We should be able to type in a username and see the data that is associated with that username.
  • Each user has their own set of notes. Once logged in, they are presented with a list of these notes.
  • Users have the ability to create new notes and edit existing ones.
  • The user is only able to access their own notes. There should be no way in which they have view or edit the notes of other users.

Sessions and cookies

  • If we are logged in on one browser (i.e. Chrome) and then open a new browser (i.e Internet Explorer) we will be asked to log in on Internet Explorer.
  • Each web browser (user) has its own set of notes.
  • When different users are accessing web pages, they are making requests to the server which seem to be the same, yet they are getting responses customized for them with their own set of notes.
  • How does the server know how to serve the notes which pertain to a specific user? Through the use of cookies and sessions.
  • Information relating to whether or not you are logged in is stored in a session on the web server. The session is referenced through a cookie stored by the web browser. So a cookie from Chrome cannot be accessed by Internet Explorer.
  • Cookies are a small piece of data which is sent from the server and saved onto the Web Browser’s cache. Every time a user loads the website, the cookie automatically gets sent back to the server, to notify the server of any previous activity. Cookies are a reliable mechanism for servers to remember stateful information (such as whether the user is logged in).
  • We can look at the cookies sent by the client using your web browser’s developer tools.
  • One thing to note about cookies, the browser is not doing anything to the cookie. All it is doing is sending the cookie back to the server if it is relevant (and when needed).
  • Cookies are ‘encrypted’ (kind of), they are made to be hard to guess so that no one can make cookies themselves and pretend to be someone they’re not.
  • If someone steals your cookies they can use them on their computer and pretend to be you.

Privacy issues

  • Did the server ask us if it can send the cookie to the browser? No.
  • Cookies are used by advertisers.
  • The advertisers look at your cookies to see what websites you have been visiting.
  • Browser have gotten more strict about cookies to make it harder for advertisers to misuse them.
  • We need cookies to run just about any web application.

Inside index.js

  • When going to the index page the request handler checks to see if there is a cookie and then checks for a username in the session associated with the cookie. If the username is there then it loads the notes page associated with that user. If not then the login page is loaded. This behaviour can be seen in the router.get() method for '/'.
  • When the user logs in, their username is put into their session. This behaviour can be seen in the router.post() method for '/login'.
  • If a client tries to directly access the notes page without being logged in, they will be presented with the login page and an error. This behaviour can be seen in the router.get() method for '/notes'.
  • When the user logs out, their session is destroyed. This is done to help protect against session hijacking. This behaviour can be seen in the router.post() method for '/logout'.
  • You do not put data you care about in a session. The data you care about should be stored somewhere else in a data structure.
  • We are storing the data (the notes) in an array which is tied to a specific username, this is stored in an object which contains everyone’s data.
  • The data is stored in RAM, once the server is reset we will lose all the data (we will deal with persistent data after the midterm).
  • What happens if the user tries to access a note that doesn’t exist? Or if a user put in the wrong log in information? Many cases exist and need to be handled in the implementation of your web app.
  • You need to design your web app to handle different types of errors and exceptions. If a user goes straight to the ‘/notes’ URL but is not logged in, what happens? They should be redirected to the home page or an error page.

Inside notes.jade

  • In Jade, you can embed JavaScript using the '-' operator to indicate unbuffered JavaScript code.
  • The '-' operator is used in this file with a for loop to iterate through all of the user's notes and display them on the page.
  • In Jade, use '!=' to indicate unescaped code. This means any special characters will not be escaped. In this example, this amounts to interpreting the HTML tags inside the notes as actual HTML rather than plain text. In most cases, this is dangerous as it is a security threat.
  • <br> is a line break in HTML.