Web Architecture
- browser issues requests to internet
- server responds through
- renders response
Anatomy of a Request
GET /index.html HTTP/1.1
Accept: image/gif, image/x-bitmap, image/jpeg, */*
Accept-Language: en
Connection: Keep-Alive
User-Agent: Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)
Host: www.example.com
Referer: http://www.google.com?q=dingbats
Does a GET
request on the server for the page index.html
on the root \
directory with some headers.
GET
: retrieve a resourcePOST
: update a resource
HTTP/2
- 47% of the web as of October 2021
- allows pipelining requests for multiple objects
- multiplexing allows multiple requests over one TCP connection
- header compression
- server push
HTTP/3
- 22% of the web
- uses QUIC instead of TCP
Response
- Had a status code,
HTTP/1.0 200 OK
<HEADERS>
<BODY>
The body is typically some html
code.
200
: OK303
: See other (redirect)404
: Not Found
Web Cookies
- HTTP is stateless, but cookies are needed to keep session
- sessions
- personalization
- tracking
cookieID=cookieValue
like a dictionary.
Nested Execution Model
- windows may countain frames from different sources
Frame
: rigid visible divisioniFrame
: floating inline frame
- frames are used to delegate screen area to content from another sources
- browser decides isolation based on frames Message passing via postMessage API:
- Sender:
targetWindow.postMessage(message, targetOrigin);
- Receiver:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
if (event.origin !== "http://example.com")
return;
...
}
Document Object Model (DOM)
- JS can read/modify page by interacting with the DOM.
- OOP way to interface reading/writing website content.
- access window, document, and other state like history, browser navigation, and cookies.
- JS can change the webpage contents dynamically and itself.
Browser Security
-
Network Attacker: attack on the connection between both the client and the server
-
Web Attacker: someone attacking the webpage
- Gadget Attacker: capabilities to inject limited content into honest page
- attacks pretending to be legit, embedding bad webpages into good ones and vice versa
-
Browswer isolates each page as if were a process: