Web Background
URLS
HTTP
-
HTTP consists of request messages and responses messages
- GET: fetch a resource
- POST: create a resource
- PUT: update a resource
- DELETE: delete a resource
-
open a web browser and user browser network tools to see live requests
HTML
- markup for web pages
- links and image tags are important because they contain references to other objects
- the browser interprets the HTML as a Document Object Model (DOM)
Cookies
- cookies
- HTTP is stateless (every request is independent)
- cookies provide the state
- cookies are
(key, value)
pairs- can be stored in browser memory or persistently
- set in the
SetCookie
header
- open the browser developer tools, network tab to examine cookies
- important attributes
Max-Age
orExpires
— controls lifetimeDomain
— hosts the cookie is valid for (can’t be as broad as a TLD)Path
— the file paths the cookie should be used forSecure
— cookie will only be sent over HTTPSHttpOnly
— only accessible over HTTP(S) and not via DOM through JavaScript on the page
JavaScript
-
runs on the client’s computer in the browser
-
can manipulate the document object model (DOM)!
- any script can go through the DOM and change any elements in it
window.document
— gives you the DOMwindow.location
— gives you the URL
-
can be embedded in a web page or loaded as a separate resource
-
when a page is loaded, the browser executes JavaScript found in the DOM using this process:
- Execute all JavaScript code in the order it is encountered. This includes
<script>
tags and any HTML elements using asrc
attribute that inject a JavaScript file. - Any script may call
document.write()
or other functions to modify the DOM. Once a script finishes, the browser continues parsing the DOM. This may include parsing newly created parts of the DOM from the just-finished script. - After finishing parsing, execute JavaScript when an event handler fires. The
onload
event fires after the document is parsed, all script blocks have run, and all external resources have loaded. Other events may beonclick
. - A URL may also use the
javascript:
scheme. In this scheme, the URL may contain JavaScript code in one or more semicolon-separated statements. Any return value is the body of the new document. This scheme can be in any URL, including thehref
attribute or as theaction
attribute in a<form>
tag.
- Execute all JavaScript code in the order it is encountered. This includes
Browser redirection
-
Redirection causes the browser to visit a new URL
-
JavaScript redirection
- HTML redirection after
N
seconds
- HTTP response header redirection after
N
seconds
- HTTP response header redirection, for status code 3XX
Summary
- walk through all the steps that occur when a browser visits a URL
- DNS lookups
- certificate verificaction for HTTPS connections
- parse HTML, creating a DOM
- run Javascript, potentially modifying the DOM
Extra Reading
- If you need to learn JavaScript, use Eloquent JavaScript