Module 12 Flashcards
WWW == internet?
no
the world wide web is an application (software) that operates over the internet (hardware)
- internet provides infrastructure
- www uses the infrastructure to run an application on which users connect and exchange data
other applications use the internet as well, e.g. email
WWW
an application on the internet that combines many protocols to allow for communication and transfer of data between machines
the web is composed of __________ that are logically linked
documents
uniform resource identifier
alphanumeric string of characters used to uniquely identify a web page or resource
uniform resource locator
URL
type of URI that specifies the location on the WWW and the mechanism for retrieving it
break down of a URL
two types of content on WWW
static
- -same for all users
- -appearance may vary based on specific browser but content is the same
- -HTML, CSS
dynamic
- -programmatically generated depending on the user, context, config, arguments, etc.
- -technologies: javascript
t/f internet is a completely connected graph
true
what is a web browser?
software that is used to access and display Web content and to navigate across the Web
2 main components of the browser
- Rendering engine (HTML/CSS): responsible for static content presentation, formatting and layout
- JavaScript Engine (JS): responsible for creating and modifying dynamic content and appearance
how does a web browser work?
Hypertext Transfer Protocol (HTTP) to transfer documents
• this is a client/server protocol
- client sends request
- server sends HTTP response, includes content that client request`
anatomy of an HTTP request
http request example
anatomy of an http response
most common status codes
200 OK - request succeeded, resulting resource (as stated in request) will be included in message body
404 Not Found - requested resource does not exist
500 server error - error on the server side in processing the request
http response example
HTML
hypertext markup language - standard used to describe format and structure with which content should be displayed on a web page
document contains elements
each element generally includes a start tag, some content, and an end tag
html facts
human readable
specifies how to structure data, not how to display it
browser chooses how to display content
HTML structure is hierarchical
Important HTML tags
!DOCTYPE
tells browser what version of HTML to use
HTML
root element
HEAD
contains info about the document using other tags (like title, link, meta, script)
BODY
all of the content for the browser to display
CSS
cascading style sheets: a formatting language used to describe the appearance of content in an HTML file
inline css
include css within the element tag itself as a style attribute
good:
easy to use
good for quick, one off situations
bad:
mixing content and presentation: this should be avoided
hard to manage
css internal
include css within the head of the HTML using style elements
good:
separate content and presentation
easy to use
good if you only have a limited amount of CSS in the page
bad:
hard to manage with lots of styling
cannot reuse across multiple pages
css syntax
external css
put css in separate file and link in head
good:
separates content and presentation
can include many different CSS pages with multiple link tags
bad:
lots of files to manage (which might be overkill for small pages
css selectors
developing in JS
- JS embedded directly in the HTML inside script tags and/or using link tags to external .js files
- many browsers provide a JS REPL console for writing and evaluating code
- develop in .js file and execute it in a runtime environment such as Node.js
developing in JS
- JS embedded directly in the HTML inside script tags and/or using link tags to external .js files
- many browsers provide a JS REPL console for writing and evaluating code
- develop in .js file and execute it in a runtime environment such as Node.js
example of embedded js
creating a prototype
prototypes are created like another other JS function or object
the this keyword refers to the current object
the new keyword can be used to create new objects from the same prototype
extending a prototype
prototypes can extend another prototype with more functionality
to inherit a prototype, set the __proto__ property of an object to the parent prototype
prototype properties
properties and methods can be added to prototypes by adding them to the prototype property
event driven programming
- usually – programming is thought of as a sequence of instructions and function calls
- event driven programming is when a program’s behavior is based on events
- in web programming these events are generally user actions
- different events/actions invoke different callback functions which handle that event/action
t/f event driven programming is asynchronous
true
synchronous vs. asynchronous
synchronous:
- you are expecting a user input
- you continuously recheck a text field until the user has put in the required info
- you run some code on user input
asynchronous:
- you expect a user input
- you tell your browser to let your program know when the user has put in the required info
- you possibly run other code until the browser notifies you
- when the user has entered information you run the associated callback function
cookies
name-value pair
can contain optional attributes`
cookie parameters
Name
Max-Age (unspecified = session cookie)
Path: if set to /hws/, cookie valid for /hws/ but not for /labs/
domain: cis.upenn.edu (accessible by cis and all its subdomains)
secure: only transmitted via HTTPS
HttpOnly: not accessible via JS (document.cookie)
how to hijack cookies
guess the cookie
discover the cookie
set the cookie
guess the cookie
if session id is small or generated with bad randomness
time/date
small numbers - 32 bits
non-cryptographic PRG
solution: server should use good randomness
secure prgs
large ids 256 bits
discover the cookie
if sent over http
-network attacker can see it
if browser doesn’t authenticate the server
-DNS attacker can trick browser into sending cookie to attacker’s server
malicious JS
-can access cookie via document.cookie
mitigations:
set secure field
set HttpOnly (this could break some apps)
