Some notes on the first few weeks of CSC309, plz contribute

csc309examnotes.md

CSC309 notes

Here are some notes for the course on things I thought were important to know for the exam. No substitute for reading the actual lecture notes though so please do that as well :D

HTTP Protocol

• A very simple example of a GET request with a 301 (Moved Permenantly) reply from the server
• every device/computer has IP address, 4 #'s seperated by dots
• DNS server holds the actual addresses and paths to how to get to the server
  • local dns
  • regional dns
• HTTP is high lvl and specific to web
• TCP/IP is the entire protocol framework while HTTP is just help within the application layer
• Application layer -> Transport layer -> Network layer -> Physical layer
• Example of TCP packet:
• TCP splits up the data to be sent into packets, within each packet is a header which contains...
  • sn #
  • checksum
• TCP congestion control
  • window-based, only certain number of packets can be sent at a time
  • if packet loss is detected, cut window size
• connection-orientated model
• connection-less model

HTML Forms Manipulation

• innerHTML can be changed on a DOM element for instance to change what ever is inside the tags
• can change the text in form controls by setting the value property of the DOM element
• query strings on the end of URLS can be a set of parameters passed from a browser to a web server
• forms are UI elements that take input, lots of different ones and different form controls
• generic <form> element, the action= attribute will specify where the form is being posted to when complete
• form controls stay loaded even on refresh
• hidden input parameters are useful for some scenarios such as state change
• want to specify a value for when a form control element is selected? Try value= attribute
• GET request = ask server for a page
• POST = submit data to a web server and retreive response

Form validation

• validation ensures the forms values are correct on submission
  • preventing blank values
  • type of values
• client side validation can be done to lead to a better user experience
• server side validation is done to truly secure validation of inputs

Cookies

• is a client mechanism to maintain states on top of HTTP
  • other examples are hidden vars, local storage (HTML5)
• server side mechanism is sessions ENV's
• Cookies are a small amount of info that the browser stores
• when the browser sends back more requests to the server, the cookie data is sent with to speed up different operations
• we set cookies in the head of the request object we send back to a browser
• can use yava to set up cookies
• different types of cookies
  • session cookie is the default type, temp and only stored in browser
  • persistant cookies are stored in a file on the computer where the browser is located
• persistant state with session vars
  • kept on server side
  • each request has a token with ID of browsers session

Javascript & DOM

• Timeline of events:
  • Send GET request for page
  • Execute script on server side to grab the page that the GET request asked for
  • Send the file back to the browser which requested the page
  • output html and then execute javascript
• reasons to use yava:
  • dont need to send requests back to server to manipulate dom elements
  • dont have to wait on the server
  • async
• completed event-driven
• script tage should be placed in HTML pages head
• attach functions to dom elements
• the javascript function is the event handler
• example of attached a DOM element to a variable: var name = document.getElementById("id");
• Window object is the DOM top-level object (the entire browser window)
• all global vode and variables become part of the window object properties
• document: the current web page and the elements inside it
• DOM tree exists as well:
  • element nodes
  • text nodes
  • attribute nodes
• you can traverse the DOM tree with methods such as, firstChild, lastChild, parentNode`
• example of traversal:
• can create new DOM elements and Text nodes by using document.createElement("tag")
• cant insert the new DOM elements you just created with appendChild
• remember to use the window.onload event which will run when the page has finished loading
• anonymous functions
  • can be stored as a var, attached to an event handler etc

###Jquery notes

• if ( $( '#nonexistent' ).length > 0 ) { // Correct! This code will only run if there's an element in your page // with an ID of 'nonexistent' }
• comprised of setters and getters essentially
• bunch of functions to traverse DOM after getting an element
• only really use jquery to add/remove classes
• when you click on element nested inside other element, will bubble up all the way to the most parent element

Basic Server-side Data

• type URL into the browser -> looks up IP addr using DNS -> connects to server and requests file -> grabs file from local file system -> sends back content to you
• node.js conventionally uses non-blocking I/O. Should be used for real-time applications, an ap which uses long-polling
• Node.js uses an event driven logic which is already prevalent in javascript
• client sends requests to server -> event loop is always running, accepts requests and sends it to non-blocking worker -> when its done with anything it sends it back to main thread/main server
• kind of like multithreading
• can use modules to import existing libraries, exporting to make your functions public

Synchronous vs Asynchronous Web Communication

• Synchronous web communication is where the user waits for an entire new page to load for new content on each request for instance
  • click, wait, refresh, etc
  • things happen on a single timeline
• An example of async would be using Ajax in a web page
  • dynamic loading of content in a page
  • makes it seem like multiple things are happening at once

E/R Model and Database Design

• legit just fucking CSC343
• entities, relationships, attributes
• other models which are dumb
• Entity set == class
• Relationship set == association between 2+ entity sets
• attributes can be attached to ether entities or relationships
• composite attributes are sub-classes of attributes
• min/max cardinality (n, N), n represents min and N represents Max
• weak entity sets
  • look at example in lecture slides
• a bunch of other stuff that doesnt really matter

Ajax, XML and JSON

Ajax

• Ajax allows for dynamic web pages
  • this means that content in the page can get updated without a full page refresh
• typical timeline for ajax request
  • user invokes an event handler -> creates an ajax object -> object requests content from server -> server retrieves appropriate data -> object has a callback which is invoked when the data is successfully gotten -> processes data
• we can specify parameters in a Prototype Ajax request such as GET, POST, etc
• we can handle ajax errors as well pretty easily
• can debug ajax calls using Developer console in most browsers
• Shortcut method: Ajax.updater can just automically fill an elements innerHTML when it receives the data it requested
• PeriodicalUpdater can do a request on a given interval

XML

• like html but worse
• a decreprecated piece of tech that is barely used any more
• why are we learning this again?
• JSONJSONJSON
• uses:
  • web servers hold their data in this form
  • databases can return a query in this form
  • communication between web servers
• can be traversed using guess what XQUERY
• DOM structure similar to html
• similar javascript DOM properties and methods exist to traverse XML the same way we traverse HTML
• sample timeline of using XML to analysis data that we just got using Ajax
  • do an ajax request to fetch data -> use DOM methods to examine XML -> extract data you need from XML -> populate/create HTML data with analysed data -> insert new HTML data into actual page

JSON

• the only real dev data markup language
• Data markup language based off of Javascript object notation
• JSON.parse(string) can convert a string of JSON into a nice yavascript object for us to use
• JSON.stringify(object) does the opposite
• a lot easier to traverse and such because it is mostly just keys, values and arrays

Web Architecture and Web Performance

• If you took 301 then you should know all of this, why the fuck did they teach us this at like the end of semester hahaha
• Logical independance:
  • change logical scema without changing external schema or app programs
  • wtf does this even mean
• Physical indepenence:
  • change physical schema without changing logical schema
• N-tier architectures try to seperate components into different tiers/layers
  • MVC anyone?
  • tiers: physical separation
  • layers: logical separation
• example of 2-tier
  • Client-server model
  • database on the server
• eg of 3 tier
  • client-server-dbserver
• 3 tiered systems should have independent tiers and should not expose dependencies to eachother
• MVC and 3 tier are different
  • 3 tier layers only communicate in one direction, in MVC all of the layers can communicate with each other

Perfomance

• so many weakpoints and a bunch of different design techniques can be used to get around these
• CSS gradients: blending of colors using CSS3 to reduce download time (was only previously possible with images and such)
• lazy loading of images: dont require all images to be loaded on the page for the page to be displayed
• multiple image resolutions: the browser/screen preference can reduce download timein most scenarios
• minify JS and CSS
• dont send cookies at every request?
• Gzip files coming back from the server to reduce overall payload over the network
• Avoid universal selectors in CSS, takes more time iterating because it will go through an entire list of DOM elements
• use selectors with native javascript support (getDocumnetByID and getElementByClassName)
• make fewer HTTP requests
• multiple DNS lookups for having different resourses split across the internet can bog down speeds
• faster queries will speed up performance as well
• scale an app by using a proxy

Restful API and such

• REST is just a set of conventions
• get a collection with /dogs, get a particular resourse with /dogs/1
• always respond in data format such as JSON or XML

Security Issues

• good question that might come up: name 10 types of security threats or attacks potential people might try to attempt on a website.

  • Defacement
  • Infiltration (Brute Force)
  • Phishing
  • Pharming
  • Insider Threats
  • Click Fraud
  • DDoS
  • Data Theft/Loss (social engineering)
  • Fake SSL Certificates
  • Use of server to send spam mail
  • XSRF
  • bad SQL injection

• something you know (passwords)

  • unless users use strong passwords then they are easy to crack

• something you have (tokens)

  • generate new token everytime a user logs in
  • ATM card is an example

• something you are (biometrics)

  • big con is social acceptance
  • hard to make perfect

• SSL

  • client auth: server verifies clients ID
  • server auth: client verifies servers ID
  • mutual: both ends

• Access Control List is used by many OS's to determin where users are authorized to conduct different actions.

  • CHMOD BITCHES

• A key is a secret shared between Alice and Bob

• Man in the middle attack, integrity checks can reduce single points of failure

• DDOS attack is reduce avail. by sending excessive traffic to victim sites

• Phishing: attacker sets up spoofed site that looks real

• too much stuff to makes notes about, most of it is just pretty vague and should be common sense anyways

• instead of using hidden values and putting them in the URL when sending form data (because this is easy to manipulate), the server can send a session-id to client which can be used instead of plain ol' url data

  • randomly generated and can be mapped to the form data

• probably the most used solution to the above problem:

  • keep session-ids in cookies
  • session-ids should have limited life time and such

• blacklisting:

  • filter out stuff like quotes from parameter inputs

• whitelisting:

  • only allow specific range of inputs etc
  • through regular expressions

• prevent SQL injection attacks by:

  • prevent schema and info leaks
  • limit privileges
  • encrypt sensitive data at the source
  • apply input validation (server side)
  • dont display detailed error messages

passwords

• hash the passwords, so you need a key to view them
• salting: include additional info in hash
• make them not be combinations of dictionary works, periodiclly make the user have to change their password
• XSRF:
  • malicious site can initiate HTTP requests to our app on Alice's behalf
  • take session data and make POST request (example) using bogus data
  • example is paying the bill not to a bank but to the hacker

Revenue Models & SEO

• ???????

• 8 Possible Threats:
  • Defacement
  • Infiltration (Brute Force)
  • Phishing
  • Pharming
  • Insider Threats
  • Click Fraud
  • Denial of Service
  • Data Theft/Loss
  • Fake SSL Certificates
  • Use of server to send spam mail