Module 12

Question 1

WWW == internet?

Answer 1

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

Question 2

WWW

Answer 2

an application on the internet that combines many protocols to allow for communication and transfer of data between machines

Question 3

the web is composed of __________ that are logically linked

Answer 3

documents

Question 4

uniform resource identifier

Answer 4

alphanumeric string of characters used to uniquely identify a web page or resource

Question 5

uniform resource locator

Answer 5

URL

type of URI that specifies the location on the WWW and the mechanism for retrieving it

Question 6

break down of a URL

Answer 6

Question 7

two types of content on WWW

Answer 7

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

Question 8

t/f internet is a completely connected graph

Answer 8

true

Question 9

what is a web browser?

Answer 9

software that is used to access and display Web content and to navigate across the Web

Question 10

2 main components of the browser

Answer 10

1. Rendering engine (HTML/CSS): responsible for static content presentation, formatting and layout
2. JavaScript Engine (JS): responsible for creating and modifying dynamic content and appearance

Question 11

how does a web browser work?

Answer 11

Hypertext Transfer Protocol (HTTP) to transfer documents
• this is a client/server protocol

1. client sends request
2. server sends HTTP response, includes content that client request`

Question 12

anatomy of an HTTP request

Answer 12

Question 13

http request example

Answer 13

Question 14

anatomy of an http response

Answer 14

Question 15

most common status codes

Answer 15

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

Question 16

http response example

Answer 16

Question 17

HTML

Answer 17

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

Question 18

html facts

Answer 18

human readable
specifies how to structure data, not how to display it
browser chooses how to display content

Question 19

HTML structure is hierarchical

Answer 19

Question 20

Important HTML tags

Answer 20

!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

Question 21

CSS

Answer 21

cascading style sheets: a formatting language used to describe the appearance of content in an HTML file

Question 22

inline css

Answer 22

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

Question 23

css internal

Answer 23

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

Question 24

css syntax

Answer 24

Question 25

external css

Answer 25

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

Question 26

css selectors

Answer 26

Question 27

developing in JS

Answer 27

1. JS embedded directly in the HTML inside script tags and/or using link tags to external .js files 2. many browsers provide a JS REPL console for writing and evaluating code 3. develop in .js file and execute it in a runtime environment such as Node.js

Question 27

developing in JS

Answer 27

1. JS embedded directly in the HTML inside script tags and/or using link tags to external .js files 2. many browsers provide a JS REPL console for writing and evaluating code 3. develop in .js file and execute it in a runtime environment such as Node.js

Question 28

example of embedded js

Answer 28

Question 29

creating a prototype

Answer 29

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

Question 30

extending a prototype

Answer 30

prototypes can extend another prototype with more functionality to inherit a prototype, set the __proto__ property of an object to the parent prototype

Question 31

prototype properties

Answer 31

properties and methods can be added to prototypes by adding them to the prototype property

Question 32

event driven programming

Answer 32

- 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

Question 33

t/f event driven programming is asynchronous

Answer 33

true

Question 34

synchronous vs. asynchronous

Answer 34

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

Question 35

cookies

Answer 35

name-value pair can contain optional attributes`

Question 36

cookie parameters

Answer 36

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)

Question 37

how to hijack cookies

Answer 37

guess the cookie discover the cookie set the cookie

Question 38

guess the cookie

Answer 38

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

Question 39

discover the cookie

Answer 39

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)