309 Notes

309 Lecture 1

General

HTML Tags
Patterns
Git
Cascading Style Sheets

Special Symbols

Name Symbol HTML
Hyphen - -
Dash –
Ampersand & &
Chevron (Left) < &lt;
Chevron (Right) > &gt;
Less than < &lt;
Greater than > &gt;
Less than or equal to &le;
Greater than or equal to &ge;
Not equal to &ne;
Sum &sum;
Infinity &infin;
In &in;
Not in &notin;
For all &forall;
There exists &exist;

Universal Attributes in HTML

Attribute Name Note
style Style
id(#) Identifier Uniq
class(.) Class Not uniq

309 Lecture 2

SYN-SYN-ACK
3-Way Handshake. Used by TCP to establish a connection btw hosts
Domain Name
DNS servers look up IP addresses for websites based on a domain name entry.
IP Address Standard
Managed by IANA, which is part of ICANN
Top-Level Domain
Maintained by IANA
e.g. .com, .net, .ca
Registrar
Assign hostname.
Modernizr
A software to use if one has to support an older browser that does not support HTML5.
Semantic HTML
HTML markup takes a semantic approach to naming tags/elements that represent info provided. It is about content, not style.
e.g. Use <em> instead of <i>.
e.g. Use <strong> instead of <b>.
Not: <span> <div>
Drag & Drop
Allow to grab any object & drag it to a diff location.
Web Storage
A secure, fast way of storing sessions or data locally, similar to cookies.
Indexed Database
Object-based & handles a large amount of data. It is Asynchronous.
Server-Sent Events
Allow a web page to automatically get updates from a server.
Use EventSource objects that take in a URL to a page sending updates & trigger onmessage events, which you can use javascript to automatically update relevant element.
Browser Support: All except IE.
Geolocation API
Allow you to ask for the user’s geographical location.
Viewport
Visible area of website seen through browser window.
Document Object Model (DOM)
The web browser builds a hierarchical model of the web page (the document) that includes all of the objects in the page (e.g., elements, text, etc.) and their relationship to each other (e.g., parents and children). All of the properties, methods, and events used to manipulate and create web pages are organized into objects.
Web developers can access the objects in the DOM model using scripting languages, especially JavaScript. A script can find things out about the state of the page and particular elements within it, and can change objects in response to events, including user requests.
Page Layout
Involve arranging & styling individual elements, groups of elements, sections of text, or sections of page.
Logical Section
<section>
<article>
<aside>
<div>
<span> (Group inline sections)
Comprisal of every element
Margin + Border + Padding + Content
Margin + Border + Padding + Content
Width
content width + L/R padding + L/R border + L/R margin
Height
content height + T/B padding + T/B border + T/B margin
Block Elements
Block Elements
Inline Elements
Inline Elements
Max-Width & Min-Width
Float & Clear
float
clear
Overflow
Alignment
text-align
vertical-align
Visibility
hidden
none
Responsive Design
Is a usability & user experience (UX) approach.
Breakpoints (Resize Window)
Mobile-First: min-width Low->High
Desktop-First: max-width High->Low

309 Lecture 3

Advantages of client-side scripting?
Usability: Can modify a page without having to post back to server (faster UI).
Efficiency: Can make small, quick changes to page without waiting for server.
Event-Driven: Can respond to user actions like clicks and presses.
Advantages of server-side programming?
Security: Has access to server's private data. Client can't see source code.
Compatibility: Not subject to browser compatibility issues.
Power: Can write files, open connections to servers, connect to databases.
Javascript
Interactive
Dynamic
React to events
On the client side
Web standard
Interpreted, not compiled
JS can:
Examine elements' state
Change state
Change styles
Canvas
Used to draw graphics, on fly via scripting (usually JS).
It is only a container for graphics. One must use a script to actually draw graphics.

309 Lecture 4

What is JQuery?
It interacts w/ DOM to access and modify HTML using CSS-styel selectors.
What is Minification?
極簡化
It is a process that strips out non-essential chars from scripts, CSS, etc. so that file size is smaller and therefore faster to download.
Functionality is not affected. Should do this before deploying to live. And always keep a non-minified version.
What is Node.JS?
Node.js is an event-driven, I/O model-based runtime environment and library for developing server-side web apps using JS. Node.js allows JS to break free of the client and process on the server-side.
Unlike PHP, Node.JS is non-blocking.
Block-based languages process in order while non-blocking languages process synchronously and indicate completion/failure using callbacks.
Node.js is good for persistent, realtime applications (e.g., online games, collab tools, chats, etc.) and data streaming, but should not be used for computation-heavy apps.
Node.js’s single-threaded event system allows it to make use of long-polling, which results in handling many client requests with minimal resource usage.
What is Module in Node.JS?
Modules (essentially libraries) are the building blocks of Node.js and can be included by requiring them in the main file.
Other stuff about Node.js?
Slides that I do not understand
What is AJAX?
"Asynchronous JAvascript and Xml"
AJAX is not a programming language, but rather a way of using JS to download data from a server in the background.
How does AJAX work?
  1. User interaction invokes an event handler
  2. Event handler's code creates an XMLHttpRequest object.
  3. XMLHttpRequest object requests a page from server.
  4. Server retrives appropriate data vased on page requested and sends it back.
  5. XMLHttpRequest object fires an event (a callback) when data arrives, often a function
  6. Callback event handler processes data and updates DOM accordingly.
 $(document).ready(function() {
     $.ajax({ // '$' means it is a jQuery object
         url: "data.xml",
         method: "GET",
         dataType: "xml"
     })
     .done(function(xmldata) { // If it works
         $(xmldata).find("pokemon").each( function(index, item) {

             // jQueryfy param 'item'
             var $item = $(item);

             // Get each item you need
             var $article = $('<article/>', {
                 // '/' means this is a new tag
                 // "key: value" format sets attr
                 // 'id' sets attr of id
                 // .attr() gets value of attr
                 id: 'pokemon-' + $item.attr('id')
             });

             // Append each item using .append() and .appendTo()
         });
     })
     .fail(function(jqXHR, textStatus) { // If it fails
         alert( "Request failed: " + textStatus );
     });
 });
                     
Examples?
 xmlhttp.onreadystatechange = function() {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
         document.getElementById("weather-temp").innerHTML="<strong>" + xmlhttp.responseText + "</strong>";
     }
 }
 xmlhttp.open("POST","/api/getWeather",true); xmlhttp.setRequestHeader("Content-type","application/x-www- form-urlencoded");
 xmlhttp.send("zipcode=97201");
                     

JQuery Version:
 $.ajax({
     url: "/api/getWeather",
     data: {zipcode: 97201},
     success: function(data) {
         $("#weather-temp").html("" + data + " degrees");
     }
 });
                     
What is jqXHR returned by $.ajax()?
It is a superset of XMLHttpRequest object.
Property Description
status Request's HTTP status code
statusText HTTP status code text
responseText Entire text of fetched page, as a string.
responseXML Entire contents of fetched page, as an XML DOM tree.
You should tell jQuery AJAX what dataType you are expecting: text, html, xml, json...
Same-Origin Policy
Unless it is a jsonp type (from another domain), must come from same protocol (http/https), same port, and same domain as request page.
ALthough async by default, can set to sync with async: false.
What is Callbackfunction?
 $.ajax({
     url: "post.php",
     type: "GET",
     dataType: "json",
     done: function( json ) {
         alert(json.title); // assuming title property
     },
     fail: function( xhr, status, errorThrown) {},
     always: function( xhr, status ) {}
 });
                     
What is XML?
"eXtensible Markup Language"
It is a generic, platform-independent, meta format for encoding semantic, human-readable, self0describing documents.
It always begins with <?xml ... ?> header tag ("prolog") and has a single root element.
Power of XML is as a universal format for exchanging data.
XML can use a schema or a DTD (Document Type Definition) to describe structure/markup and content.
Using one of these standardizes data for integrity and interoperability purposes.
When is XML data used?
      Web servers that store data as XML files.
      Databases that return query results as XML.
      Web services that use XML to communicate.
Diff btw XML Schema and DTD?
DTD is older and more set in its ways.
XML schema provides namespacing.
XML schema is also written in XML, so you do not have to learn a new language to write a DTD.
XML schema implements strong typing, which means that you can constrain data types (values and properties) to ensure data accuracy. It also has several built-in data types to use.
DTD allows for inline definitions.
Diff btw inline and external definition?
An XML document is Well-Formed if:
There is a SINGLE ROOT element.
Elements are properly NESTED.
Elements are CLOSED
Attribute values are QUOTED.
An XML document is Valid if:
it is well-formed AND conforms to its schema/DTD.
Cautions using XML
Cannot use HTML-specific properties like innerHTML in XML DOM.
Can only use STANDARD DOM method and properties in XML DOM.
Cannot use ID or CLASS to get specific nodes. ID and class are not necessarily defined as attributes.
firstChild/nextSibling properties are unreliable due to whitespace text nodes.
What is JSON?
"JavaScript Object Notation"
A language-independent convention for formatting data as a set of JS objects.
Made up of a collection of name/value pairs (object) that can also include an ordered list of values (array).
How to parse JSON?
JSON.parse(string)
Converts given string of JSON data into an equivalent JS object and returns it.
JSON.stringify(object)
Converts given obj into a string of JSON data. (Opposite of JSON.parse()
Other notes?
jQuery always returns a value.
Getter: will only get the FIRST element in a selection
.each: get ALL
Setter: will apply to ALL elements in a selection
JQuery vars: with $, just to differentiate from JS var
this: in JS, $(this): in JQ
Non-blocking is better for performance in: php will stop if there is an erorr, while node.js will keep processing.
GET: Faster
POST: more secure and required when sending a lot of data. best if changing data cuz it avoids caching issues with GET.

309 Lecture 5

What is HTTP?
It is set of commands understood by a web server and sent from a browser.
  • RUns on top of TCP/IP
  • Managed by WW3C
  • Current version HTTP.1., IETF RFC 2616
  • 2 phase protocol: 1. Request; 2: Response.
What is URI?
"Uniform Resource Identifier"
It is an identifier for a generic resource.
On web, we use a type of URI call URL ("Web Address"), which specifies Access mechanism (e.g. http) as well as resource location.
What is URL?
It is an identifier for location of a document served by a web server.
What is REST?
"REpresentational State Transfer"
It is an architectural style for using HTTP to provide resources over web. Focus is on roles and actions (HTTP verbs).
  • Uniquely access resources thru URLs.
  • Use GET, POST, PUT and DELETE.
  • Use a standard data format, e.g. HTML, XML, JSON.
  • Stateless protocol.
What is Stateless protocol?
無狀態協議
In computing, a stateless protocol is a communications protocol that treats each request as an independent transaction that is unrelated to any previous request so that the communication consists of independent pairs of request and response. A stateless protocol does not require the server to retain session information or status about each communications partner for the duration of multiple requests. In contrast, a protocol which requires keeping of the internal state on the server is known as a stateful protocol.
Benefits for REST?
  • Performance (lightweight)
  • Scalability due to client-server separation
  • Simplicity (Nouns and verbs)
  • Modifiability, even when in use
  • Visibility of communication
  • Portability (platform-independent)
  • Reliability at sys level.
What are standard REST verbs?
a specific resource (by an identifier) or a collection of resources
  • GET: Read
  • PUT: Update (Create if not exist)
  • DELETE: Remove
  • POST: Create
What operations model does REST verbs mimic?
CRUD (Create, Read, Update, Delete)
We need 2 basic URLs per resource:
1 for a collection of items in resource:
/collection/pokemon
1 to select a particular resource:
/collection/pokemon/001
Can even pass params:
/collection/pokemon/search?q=char&field=name
q stands for "query" here.
What are best practices for RESTful API design?
Use logical URLs that are human-understandable and don't point to a particular file.
If dealing w/ a lot of data, provide a paging mechanism.
Document everythin and provide instructions.
Don't use GET to make a change, use POST.
Provide multiple output data formats, e.g. JSON, XML, RSS, HTML...
Use authentication if your API allows change/deletion/adding.
Notes on Database?
Database
Notes on Entity Relationship Model?
Entity Relationship Model

309 Lecture 6

What are disadvantages of using table?
It is for tabular data
It is not being used semantically
It is slower
It is not very accessible
It does not play well w/ CSS
What is MVC?
Model–View–Controller
What is ReactJS in MVC model?
V (View)
What is Single Responsibility Principle?
Each component does its own thing. If it starts doing more things, you should break it down into multiple components.
What is Boilerplate Structure?
Framework that provides chunks of code that can be used over and over again with little change, or fill-in-the-blank.
What is drawback of embedded addresses?
What if you wanted all addresses for all people? Addresses are not standalone. Have to get all people, then their addreses.
What is Parent-Referencing?
Many children stores a ref to a single parent. Or: 1 parent to rule them all.
What is Factory Method?
A creational pattern for creating objects without having to specify their class. Alternative to using sa constructor.
What is ReactJS?
It uses JSX>
It is a JS lib for building user interfaces on web.
Declarative: Create views for each state in app and particular components will be automatically updated by ReactJS.
Component-Based: Build modules of components that one can combine into a larger UI.
Language-Independent: Does not care about web stack one is using; change ReactJS code as needed.
It compiles code into JS using its fundamental render() function.
Building blocks of ReactJS are called components. It is a JS(X) + HTML element rendered thru a virtual DOM.
COMPONENTIZATION is considered by many developers to be future of web UI.
It relies on a virtual DOM.
Diff btw ReactJS and AngularJS?
ReactJS:
Modular
Lightweight
Good performance w/ large projects
HTML mixed w/ JS
Can use w/ legacy projects
V of MVC
AngularJS:
MVC pattern
Heavy framework
Old (Good and bad)
Slower as project grows: Each data change
Triggers re-render per object (Performance --)
MVC all the way
What is JSX?
"JavaScript XML"
It is a strictly-typed object-oriented extension language for JS.
Syntax is like Java, w/ class/fn def ala Java.
No more loosey-goosey. Strict typing for higher productivity and quality code.
Faster than regular JS (optimized JS) and interoperable w/ JS.
Only supported in Chrome, so must compile to JS in ReactJS.
What are props and state in ReactJS?
props are config/options of obj passed down from its parent. It is also a property of ReactJS virtual DOM element. They are immutable.
State reacts to and triggers changes to obj internally (private). Changing a state can change properties and re-render components.
What is a Virtual DOM?
Abstraction of real DOM to avoid performance issues if the DOM is large.
Can be manipulated quickly on local side w/o touching real DOM.
Lightweight (good for mobile) but in-memory (higher memory usage).
Fast and efficient diffing algo.
What is Express?
It is a lightweight, minimalist (i.e. many plugins available) web app server framework for NodeJS that provides a boilerplate structure and organization.
What is Express Generator?
It creates a skeleton web appp w/ some common dependencies.
What is Mongo DB?
It is an open-source, NoSQL database that uses a JSON-like (BSON) document-oriented model.
Data is stored in collections (rather than tables).
Uses dynamic schemas rather than a pre-defined structure. Fields can be added/removed at will.
Works w/ many programming languages.
Caching: Most recent kept in RAM.
No transactions, but allows atomic operations.
Need to use Mongo?
Dealing w/ millions of records can lead to performance issues and lockdown situations if operations on these are needed.
Schema-less can lead to implicit schemas defined by way you use your data (and its expectations) in your app rather than database engine.
Other notes?
Notes

309 Lecture 7

GET and POST
GET is best for small amounts of insecure data. It asks a server for a pg or data. Params are sent in URL query.
POST is for large chunks of data of sensitive data. It submits data to a web server and retrieves server's response. Params are embedded in request's HTTP packet.
What is Form Validation?
Ensuring that necessary values are submitted and are in expected format. This includes:
Preventing blank (no input or space chars) values when field is required.
Ensuring type of value submitted, e.g. int, phone #, post code, etc.
Ensuring format and range of values.
Ensuring confirmation fields fit together, e.g. Comparing same email addr typed twice.
When can be validation done?
It can be performed on client-side or server-side.
Server-side is slow but secure.
Client-side is quick but less secure.
It involves solid knowledge and careful consideration of data values being accepted for submission.
One can use regex to check format of data values, but need to already know right format.
It provides appropriate and useful feedback on front-end to end-users.
Can validate on-submit or on-the-fly.
Can provide static hints beside fields.
Can provide tooltips (on-hover tips)
Can provide dynamic tips (shown as user interacts w/ a field).
e.g. CAPTCHA automated challenge-response checks.
What is stateless protocol?
A communications protocol that treats each request as an independent transaction that is unrelated to any previous request so that the communication consists of independent pairs of request and response.
HTTP is stateless, It allows a browser to req a sg doc from a seb server and !remember or keep track of anything btw invocations (short-lived).
What can a stateful protocol do ?
Can remember/track states
Uniquely identify each client for server.
A way of providing custom content for each client.
How to add and maintain states on top of HTTP?
Client mechanisms:
Cookies
Hidden vars
URL rewriting
HTML5 local storage (for HTTP 1.1).
Server mechanisms:
Sessions
When should cookie be set?
As a header field, it needs to be set before printing response body.
What are cookies?
A small piece of data sent by a server to a browser, and then sent back by browser on future pg reqs.
Authentication
User tracking
Personalization: Maintain user preferences, shopping carts, etc.
How to use cookies?
document.cookie
Cookies.set();
Cookies.get();
What is a Session Cookie?
Default type, is a temporary cookie that is stored only in browser's memory, so that when browser is closed, it is erased.
Can't be used for long-term tracking.
Safer, cuz only browser has access.
What is a Persistence Cookie?
Stored in a file on browser's computer and can track long-term info.
Potentially less secure cuz users (or programs that they run) can open cookie files, see/change cookie values, etc.
document.cookie="username=...; expires=...";
What are problems and limitations of cookies?
Browser can disable cookies. Users can disable and delete cookies.
Size limit/expiration policy.
Security issues: cuz they are stored in plain text, can be tampered w/.
Not handling cookie expiry well (expectations).
Alter to Cookies: Hidden Vars?
Hidden vars that store state info in web pgs rather than in browser/client.
Cross-browser support.
For form-based web apps only.
e.g. Changing URL, such as by clicking a hyperlink, loses state. Current submitted pg is current state, irrespective of what was submitted previously.
<input type="hidden" name="secret" value="haha">
Alter to Cookies: GET Request
One can also store state in URL such that URL becomes a GET req.
Supported by all browsers.
Requires all URLs contain all state info, leading to long, unwieldly URLs.
Current submitted pg represents current state.
!depd of what was done prevly
Alter to Cookies: Session
A server-side option, which stores cur state on server (i.e. in a file, db). Each req includes a token identifying browser's session.
Token can be passed via cookies, hidden vars, URL rewriting.
At each req, executing script uses token to fetch session state.
Beware session hijacking. Avoid by adding a uniq value and signature.
What is the best way to handle sessions in Node?
W/ Express.
Other notes?
Notes

309 Lecture 8

What is Web Architecture?
Higher-level structure underlying a web app.
Made up of elements, their properties, and relationship among elements.
There are multitude of architectures that we can consider.
What is Logical !depd?
Ability to change logical schema w/o changing external schema or app.
Can add new fields or tables or structure w/o changing view.
What is Physical !depd?
Ability to change physical schema w/o changing logical scheme.
Storage space and some data can change.
What is Goal of Multi-Tier (n-Tier) Architecture?
To separate components of a web app into diff tiers or layers
Where tier is physical and layer is logical.
Where components are presentation, processing logic and data gestion.
Benefit of separating into tiers is flexibility for devers, don't have to redo whole app.
What is in a 1-Tier Architecture Setup?
All 3 layers are on same machine, and presentation, logic and data are tightly connected.
Scalability: Sg processor means hard to increase volume of processing.
Portability: Moving to a new machine may mean rewriting everything.
Maintenance: Changing 1 layer requires chnanging other layers.
What is in a 2-Tier Architecture Setup?
DB runs on a server separated from client.
But presentation and logic layers are still tightly coupled.
Can easily switch to a diff db.
But coupling of presentation and logic can lead to heavy server load and network congestion.
What is in a 3-Tier Architecture Setup?
Each tier is separate and can potentially run on a diff machine. This is most common tiered architectural style on web.
Client-Server
Each tier is !depd
Unconnected tiers should not communicate
Change in platform affects only that tier.
What is a Presentation Layer?
It provides user interface and interactions.
This is client view or front-end.
Should not contain business logic or data access code.
What is a Logic Layer?
It provides set of rules for processing data and can accommodate many individual users.
Can be called middleware or even back-end.
No presentation or data access code.
What is a Data Layer?
It provides physical storage for data persistence.
Manages access to DB or file system; also called back-end.
No presentation or business logic code.
In context of web app dev:
Presentation layer is static or dynamically generated content rendered by browser (front-end).
Logic layer is responsible for dynamic content processing and generation, e.g. using Node.js, PHP, JavaEE, ASP.NET (middleware).
Data layer is DB, comprising data sets and data gestion system (back-end).
What is main BENEFIT of 3-tier?
!depd of layers, which means:
Easier maintenance
Reusable components
Faster dev (Division of work)
What is Design Pattern?
General and reusable approach to a commonly occuring app design problem.
Response to large how-to-design questions, desire for reuse, scalability, and personalization.
What is MVC?
"Model-View-Controller"
A design pattern that promotes a separation between model (data), view (presentation) and controls (interactions)
What is Model?
It manages app state by responding to reqs for info about its state (from view) or instructions to change state (from controller).
What is View?
It renders model into a form suitable for interaction (user interface). Multiple views can exist for a sg model given diff contexts.
What is Controller?
It receives user input and initiates a response by making updates to state of objects in model and selecting a view for response.
What does MVC mean?
Web Designer: Presentation;
Web Developer: Logic;
DB Admin: Data model.
Benefits of MVC?
Clarity of Design
Separation of Concerns
Parallel Dev
Distributable
Diff btw 3-Tier and MVC?
Communicaion: While in 3-tier presentation layer never communicates directly to data layer (only thru logic layer), in MVC all layers communicate directly (triangle topology).
Usage: In 3-tier, client, middleware, and data tiers are on physically separated platforms, but in MVC model, view and controller are together.
7 Key Security Concepts?
Authentication
Authorization
Confidentiality
Data/Message Integrity
Accountability
Availability
Non-Repudiation
What is Authentication?
It is about proving you are who you say you are, and involves an end-user providing credentials that check out against some secure data, e.g. passwords, tokens.
What is Identification?
It is identifying who user is (public knowledge), while authorization means verifying this identification using knowledge that is private or ingrained (passwords, tokens, biometrics).
Disadvantages of Biometrics?
False Positive: Imposter accepted
False Negative: Authentic user rejected.
What is a 2-Factor Authentication?
Diff security measures are combined.
Combine sth that user knows, possesses, and/or is inseparable from user.
e.g. ATM: Card + PIN
What is a Digital Signature?
A digital signature is a mathematical scheme for demonstrating the authenticity of a digital message or documents. A valid digital signature gives a recipient reason to believe that the message was created by a known sender, that the sender cannot deny having sent the message (authentication and non-repudiation), and that the message was not altered in transit (integrity).
What is Authorization?
It refers to what users are permitted todo. Most syses, software, and apps have an Access Control List, which keeps a record of users and their Access privileges (often grouped by role).
If you have an identified user, you can check against this list to authorize them for certain actions and views in your app.
What is Man-In-The-Middle?
A common way in which confidentiality is compromised.
In which sb. secretly intervenes in communication btw 2+ entities.
e.g. Open Wifi like Starbuck, w/o VPN/
What is Public Key Cryptography?
It involves pairs of public and private keys.
Process: Data/Message encrypted w/ public key, but can only be decrypted w/ private key.
What is Data/Message Integrity?
It can be preserved by validating data for accuracy and completeness.
Create a digest by hashing or using checksums.
Use HTTPS. Requires authentication if modifying.
Compare data sent before and after using digital signatures or Message Authentication Codes (MAC).
What is Accountability?
It can be achieved by keeping a log (logging or audit trails) that capture actions by specific users. There are 2 main requirements.
Secure Timestamping: So we know what happened when.
Data Integrity: Of the logs and audit trails, or tracking of any changes made to these.
What is Availability?
It is a security issue cuz certain attacks can prevent web app from properly carrying out security measures.
e.g. DoS
What is DoS?
"Denial of Service"
It aims to reduce availability by overwheling a server w/ excessive traffic.
Add redundancy to remove sg point of failure.
Impose limits on users.
What is Non-Repudiation?
Maker of transaction can't deny making it.
Evidence tends to be in form of a digital signature contained in a digital certificate.
Can involve a Trusted Third Party(TTP), which provides repos for public key certificates.
What is Traffic?
Many individual packets being sent.
What is Public Key Certificate?
Doc that proves ownership of a public key and contains info on key, owner of key, and digital signature of TTP or other authenticator.
What are security threats?
Phishing
Pharming
Insider Threats
Click Fraud
Denial of Service
IP Spoofing
What is Phishing?
It involves an attacker setting up a fake site that looks real to lure users into providing their login credentials.
What is Pharming?
It involves an attacker illegitimately redirecting a user to a fake site, with same goal as w/ phishing.
More users are victimized and no conscious action is required by victim.
Relies on DNS Cache Poisoning, where attacker compromises DNS tables to redirect a legitimate URL to their fake site.
DNS translates URLs to IP addrs, attacker changes IP addr, and this is cached, poisoning future accesses.
What is Insider Threat?
It is attack carried out w/ cooperation of insiders who have access to certain data.
To combat this, use principles of Separation of Privilege or Least Privilege: Provide users w/ only privileges needed to complete their tasks.
Insiders could have access to data and leak it.
Beware of db accounts and sys admins, who usually get complete access.
What is Click Fraud?
It is when an attacker (or script or site publisher) clicks on pay-per-click ads so that revenue is generated regardless of whether or not ad is of interest.
Competitors of advertisers could also click on ads to use up # clicks allowed.
Competitors of publishers may try to frame publisher by making it look as tho they are clicking on their own ads.
Often automated thru malware such as botnets.
What is IP Spoofing?
It occurs when an attacker forges source IP addr to spli by a firewall.
This is a kind of DoS attack, where goal is to spam a host or deny legitimate users access.
Can employ IP Whitelisting, where hosts only accept communications from clients/hosts that have certain IP addrs.
What is Design for Security?
Considering security from start of design process and not as an add-on. Involves designing concrete, measurable security goals. e.g.
Only certain users should be able to do X.
Output of feature Y should be encrypted.
Feature Z should be available 99.9% of time.
What is Trade-Offs for Users?
Sometimes inversely proportional, where greater security, less convenient it is for end-users (and devers), and vice-versa.
Good techs strike a balance: Relative security benefit at only slight inconvenience.
What is Degree of Security?
Ol syses are insecure.
Security is about risk gestion and budget.
If cost to break sys > reward to be gained, then sys is secure inuf.
Employ at least some security measure.
How to dev Statefull Apps?
Hidden form fields. But these can be manipulated on client side. Solution: For server to send a session ID to client. Server has table mapping session IDs to prices. Randly generated 128-bit ID is sent in a hidden form field instead of price.
    if (paid) {
        price = lookup(sessionID);
        if (price) {
            // Same as before
        } else {
            // Display transaction cancelled page
            // Log client IP and info
        }
    } else {
        // Same no case
    }
            
Another option?
Digital Signature
Can detect tampering thru MACs (Message Authentication Codes).
Sign whole transaction (based on all params).
Security based on secret key known only to server.
e.g. <input type="hidden" name="signature" value="a2a30984f302c843284e9372438b33d2">
Changes in submit_order script: See P57
Con: Performance hit: Have to compute MACs when processing HTTP reqs and stream state info to client (extra bandwidth).
Another option?
Cookie
Con: If user !log out, sb could use same browser to impersonate user.
Client-Side Scripts can be used to validate, but this approach has flaws:
JS can be disabled.
Dynamic changes in JS can be overwritten.
Also conduct server-side validation.
What are diffs btw Tiers and Layers in n-tier style?
Tiers are physical (Where code is)
Layers are logical/organizational (Code itself)
Components represent divisibility of layers based on logical responsibility:
Presentation logic
Business logic
Data access logic
This division is an example of Single Responsibility Principle.
How to protect against SQL injection?
Whitelisting (instead of Blacklisting)
Input Validation and Escaping
Prepared Statements and Binding Vars
Measures to Mitigate Impact
How to use whitelisting?
Work w/ real world/db/model designer to capture breadth of cases -> regex (^[0-9]*$, where ^ and $ match beginning and end of string)
Use escape quotes w/ escape() instead of blacklisting. But it only works for str inputs.
What is prepared statement?
It allows for creation of static queries using bind vars.
Bind vars are placeholders that are guaranteed to be data.
Params (user input) are not directly used.
Structure of query guaranteed.
How to mitigate impact of attacks?
Prevent schema and info leaks
Limit Privileges (Defense-in-Depth)
Encrypt Sensitive Data Stored in db
Harden db server and host os
Apply input validation
How to keep db schema private?
Knowing schema makes attackers' job easier
Blind SQL Injection: Attacker attempts to interrogate sys to figure out schema
Don't display detailed error messages and stack traces to external users.
What is Principle of Least Privilege?
Limit read access, table/views user can query.
Limit commands available to user, e.g. only allow SELECT rather than INSERT/DROP.
How to use validation?
Validation of query params is not inuf, must validate all input at entry point in code.
Reject overly long input.
Validation redundancy helps protect syses. We can often use same validation features on front-end and back-end.
How to secure passwords?
Don't use a flat file/pswd file.
Encryption: 1-say hashed w/ MD5 or SHA-1 or similar.
Salting: Add an additional rand # to end of each pswd.
What is dictionary attack?
It involves an attacker guessing pswds based on wordlist.
Can be online (live sys) or offline (accesses and download list of user/pswd combos).
Adding salts makes it harder, have to guess it. But if they target a user (chosen victim), easier.
And if offline and patient, greater chance of hack.
How to protect?
Monitor potential attacks by watching for lots of failed attempts.
Enforce strong pswds.
Bait hackers w/ honeypot pswds.
Encourage/require users to change pswds w/ prompts or ageing out pswds.
Suggest pronounceable but non-dictionary words. Syllables and vowels connected together. See node-gpw.
Apply artificial delay after n attempts.
Encourage userto track logins by providing info.
Have users select an img that is always displayed on login page after username is entered to combat phishing.
CAPTCHA.
1-time pswds.
Use passphrases.

309 Lecture 9

Same-Origin Policy
Interactions are limited by same-origin policy (i.e., cross-domain security policy), where scripts can only access data from other sites if they have same origin.
Where origin is a combo of protocol hostname, and port #.
Hyperlinks, embedded (i)frames, data inclusion (GET/POST, JSONP) across domain still psb.
e.g.
<iframe style="display: none" src="..."></iframe>
Hijacking cookies is psb
Temporary cookies cached until browser is shut down; persistent 1s cached until expiry date.
HTTP authentication credentials cached in memory and shared by all browser windows of a single browser instance.
Caching depends only on browser instance lifetime, not on whether original window is open.
How does security issues arise?
They arise from browser interacting w/ multiple web apps that are not direct attacks.
Cross-Site Request Forgery (XSRF)
Cross-Site Script Inclusion (XSSI)
Cross-Site Scripting (XSS)
What is XSRF?
"Cross-Site Request Forgery"
In a XSRF attack, a malicious site initiates HTTP reqs to our app on a user's behalf but w/o their knowledge.
It works cuz same-origin policy allows sending of GET/POST reqs to diff origins.
Sources: Hyperlinks, forms, script, img, css.
How to prevent?
To use secret tokens (nonces)
What is XSSI?
"Cross-Site Script Inclusion"
In a XSSI attack, a third party can include a <script> sourced from our web app. 2 kinds:
Static script inclusion: To enable code sharing.
Dynamic script inclusion: Async reqs (AJAX) are used to fetch data.
How to protect from XSSI attacks?
Check origin and referer headers.
User XSRF tokens, which are randly and securely generated on server-side and included as a hiddlen field. On server-side, they are required for change oprtns and should be validated.
Don't include sensitive data in shared scripts.
Use sanitizer w/ Node.js apps (Caja).
What is XSS?
"Cross-Site Scripting"
An attacker bypasses same-origin policy by executing a malicious script in app.
e.g. Thru unvalidated form fields or query params.
3 types of XSS?
Reflected:
Script is injected into a req and returned immediately in response.
Stored:
Script is stored and delivered to victim some time after being injected. Repeatable and easily spread.
DOM-Based:
Malicious client-side scripts are injected into DOM and run in browser.
How to protect from XSS attacks?
Input validation
Output validation
HTTP only option for cookies.

309 Lecture 10

What is Content Delivery Network?
Network of proxy servers that mirror content, one closest to user is accessed for speed improvements.