WWW?

CERN, 1989

Tim Berners-Lee

"I just had to take the hypertext idea and connect it to the Transmission Control Protocol and domain name system ideas and—ta-da!—the World Wide Web ... Creating the web was really an act of desperation, because the situation without it was very difficult when I was working at CERN later."

Brief HTTP history

1970S - OSI (OPEN SYSTEM INTERCONNECTION, FINALLY STANDARDIZED IN 1984)

1970S - TCP/IP (STANDARDIZED IN 1982)

In summary, TCP is the data. IP is the Internet location GPS

• 1992 - HTTP/0.9
• 1996 - HTTP/1.0
• 1999 - HTTP/1.1
• 2015 - HTTP 2.0 (RFC 7540 in May 2015)

HTTP

DNS

(domain name system)

DNS lookup

DNS lookup (browser)

DNS lookup (local)

Connection

TCP/IP: triple handshake

TCP/IP: latency

Signal round trip time (RTT)

HTTP (finally)

HTTP/0.9

HTTP/1.0

HTTP/1.1

Going back to connection

"Connection": "close"

HTTP/1.0

"Connection": "keep-alive"

HTTP/1.1

Request pipelining

HTTP/1.1

Modern browsers dropped request pipelining support a while ago (mostly because of bugs).

Now it is superseeded by multiplexing with HTTP/2.

HTTP/1.1: features

• Text-based
• Pull protocol
• Stateless
• Scaleable
• Simple

HTTP/1.1: structure

• Content-Length: number-of-bytes
• Referer: referer-URL
• User-Agent: browser-type
• Accept-Encoding: encoding-method-1, encoding-method-2, ...
• Cookie: cookie-name-1=cookie-value-1, cookie-name-2=cookie-value-2, ...
• ...

Request headers

• Cache-Control: max-age=3600, public
• Content-Encoding:gzip
• Content-Type:text/html; charset: utf-8
• Content-Length: 10000
• Connection: Keep-Alive
• X-Forwarded-By, X-*...
• ...

Response headers

"Content-encoding"

"Content-encoding"

https://medium.com/oyotech/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4

https://www.html5rocks.com/en/tutorials/speed/txt-compression/

HTTP Methods

1. "OPTIONS"
2. "GET"
3. "HEAD"
4. "POST"
5. "PUT"
6. "PATCH"
7. "DELETE"
8. "TRACE"
9. "CONNECT"

(don't need to remember all)

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

HTTP Status codes

1. "Informational 1xx"
2. "Successful 2xx"
3. "Redirection 3xx"
4. "Client Error 4xx"
5. "Server Error 5xx"

(don't need to remember all)

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

HTTP POST

Cookies

• Session cookie
• Persistent cookie

https://www.cisco.com/c/en/us/support/docs/security/web-security-appliance/117925-technote-csc-00.html

• Javascript

  document.cookie

• Response

  HTTP/1.1 200 OK
  Content-type: text/html
  Set-Cookie: name=value
  									

• Plugins, E.G Firefox Cookies Manager
• Manually

  C:\Users\<username>\AppData\Roaming\Microsoft\Windows\Cookies
  	

• HTML
  <meta http-equiv="set-cookie"content="name=;expires=; domain=;path=;secure">

How to set a cookie?

Who can access a cookie?

Showtime

Plan

• Promise API
• Fetch API: request handling, error handling
• Request & response headers
• Using response data outside of fetch
• Cookie API
• Tools: Postman

https://github.com/abramenal/rs-talk-network

Session cookie:

one more thing...

https://stackoverflow.com/questions/10617954/chrome-doesnt-delete-session-cookies

AJAX

/ˈeɪdʒæks/

short for "asynchronous JavaScript and XML"

Drawbacks

1. Browser could disable (or does not support) JavaScript
2. CORS
3. SEO: search engines indexing

HTTP/2

Cons #1: HOL blocking

six-connection limit per origin

https://http1.golang.org/gophertiles

Cons #2: Encoding

Payload is encoded, but all metadata is not

HTTP/2 key differences

• is binary, instead of textual

• is fully multiplexed, instead of ordered and blocking

• can therefore use one connection for parallelism

• uses header compression to reduce overhead

• allows servers to “push” responses proactively into client caches

HTTP/2

HTTP/2

https://http2.golang.org/gophertiles

HTTP/2

HTTP/2

HTTP/2

HTTP/2

https://caniuse.com/#feat=http2

HTTP/2

Learn more:

https://stackoverflow.com/questions/36835972/does-the-per-host-connection-limit-is-raised-with-http-2

https://www.youtube.com/watch?v=r5oT_2ndjms

https://http2.github.io/faq/

https://www.smashingmagazine.com/2017/04/guide-http2-server-push/

HTTPS

https://www.cloudflare.com/learning/ssl/what-happens-in-a-tls-handshake/

https://hoster.by/service/solutions/ssl/#CSR

https://ssl.comodo.com/ssl-certificate-comparison

Showtime

CORS

Cross-origin resource sharing

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api#cross-origin_requests

Showtime

REST

Representational state transfer

https://developer.mozilla.org/en-US/docs/Glossary/REST

Six guiding constraints define a RESTful system.

These constraints restrict the ways that the server can process and respond to client requests so that, by operating within these constraints, the system gains desirable non-functional properties, such as performance, scalability, simplicity, modifiability, visibility, portability, and reliability.

If a system violates any of the required constraints, it cannot be considered RESTful.

1. Client-server architecture

2. Statelessness

• No client state stored on server
• Only client can store & provide details about its state
• Each request contains all necessary information to respond properly

3. Cacheability

4. Layered system

5. Code on demand (optional)

Servers can temporarily extend or customize the functionality of a client by transferring executable code: for example, compiled components such as Java applets, or client-side scripts such as JavaScript.

6. Uniform interface

Resource identification in requests

Individual resources are identified in requests, for example using URIs in RESTful Web services. The resources themselves are conceptually separate from the representations that are returned to the client. For example, the server could send data from its database as HTML, XML or as JSON—none of which are the server's internal representation.

6. Uniform interface

Resource manipulation through representations

When a client holds a representation of a resource, including any metadata attached, it has enough information to modify or delete the resource.

6. Uniform interface

Self-descriptive messages

Each message includes enough information to describe how to process the message. For example, which parser to invoke can be specified by a media type.

6. Uniform interface

Hypermedia as the engine of application state (HATEOAS)

Remember: REST is not a standard or protocol, this is a way of implementing backend APIs

(actually, architectural style)

Demo pt.2

Plan

• async/await
• Node.js simple HTTP server
• HTTPS: obtaining certificate, setting up secure server
• Cookies: secure, httpOnly
• ...*your awesome idea*...