History and Future of HTTP For Busy Developers

Dr Gleb Bahmutov PhD

https://slides.com/bahmutov/history-and-future-of-http

You cannot adapt to or survive this

survival is possible* but we need to act now

change your life
change your bank
join an organization
vote and protest

@bahmutov

rebellion.global www.wedonthavetime.org

www.sierraclub.org 350.org www.greenpeace.org

www.sunrisemovement.org

Speaker: Gleb Bahmutov PhD

@bahmutov

gleb.dev

github.com/bahmutov

glebbahmutov.com/blog

C / C++ / C# / Java / CoffeeScript / JavaScript / Node / Angular / Vue / Cycle.js / functional programming / testing

www.youtube.com/glebbahmutov

Gleb Bahmutov

Sr Director of Engineering

www.mercari.com/careers

Science: 📚

or

☠️

@bahmutov

http://info.cern.ch/Proposal.html

12 March

1989

vague but exciting

@bahmutov

Edit and view HTML documents, 1991

source: http://digital-archaeology.org/the-nexus-browser/

@bahmutov

Nexus Browser, 1994

source: http://digital-archaeology.org/the-nexus-browser/

@bahmutov

first website: info.cern.ch

1991

https://www.w3.org/Protocols/HTTP/AsImplemented.html

HTTP/0.9

@bahmutov

1991

650 words

3800 characters

https://www.w3.org/Protocols/HTTP/AsImplemented.html

HTTP/0.9

@bahmutov

1991

https://www.w3.org/Protocols/HTTP/AsImplemented.html

HTTP/0.9

@bahmutov

1991

https://www.w3.org/Protocols/HTTP/AsImplemented.html

HTTP/0.9

If the port number is not specified, 80 is always assumed for HTTP

@bahmutov

because port 79 and 81 were taken (RFC 1060)

1991

https://www.w3.org/Protocols/HTTP/AsImplemented.html

HTTP/0.9

The TCP-IP connection is broken by the server when the whole document has been transfered

@bahmutov

1991

GET /fuzzy_bunnies.txt

https://www.w3.org/Protocols/HTTP/AsImplemented.html

HTTP/0.9

@bahmutov

1991

The response to a simple GET request is a message in hypertext mark-up language ( HTML ). This is a byte stream of ASCII characters.

https://www.w3.org/Protocols/HTTP/AsImplemented.html

HTTP/0.9

@bahmutov

1991

No error response codes

https://www.w3.org/Protocols/HTTP/AsImplemented.html

HTTP/0.9

@bahmutov

1991

Only GET

No cookies / sessions / server state

https://www.w3.org/Protocols/HTTP/AsImplemented.html

HTTP/0.9

@bahmutov

Y - you

A - aren't

G - gonna

N - need

I - it

https://en.wikipedia.org/wiki/You_aren%27t_gonna_need_it

@bahmutov

What Problem Does HTTP/0.9 Solve?

@bahmutov

<html>
  <p>More info
    <a href="http://foo.com/bar.html">here</a>
  </p>
</html>

I want to read this HTML document

@bahmutov

TCP

how?

where?

HTTP

@bahmutov

1991

Future HTTP protocols will be back-compatible with this protocol.

https://www.w3.org/Protocols/HTTP/AsImplemented.html

HTTP/0.9

@bahmutov

1991 was

a few years ago ...

@bahmutov

World Wide Web went from zero to "everywhere" in about two years

http://www.mit.edu/people/mkgray/net/web-growth-summary.html

Then:

Date	# of web sites
'93	130
'94	2700
'95	23,500
'96	100,000

@bahmutov

<html>
  <p>See diagram
    <img src="http://foo.com/bar.jpg" />
  </p>
</html>

I want to see this JPEG image

@bahmutov

Non-academic users:

HTTP/1.0

We Are Gonna Need It (WAGNI)

@bahmutov

HTTP/1.0

1996

RFC 1945

60 pages

https://tools.ietf.org/html/rfc1945

GET /mypage.html HTTP/1.0
User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)

200 OK
Date: Tue, 15 Nov 1994 08:12:31 GMT
Server: CERN/3.0 libwww/2.17
Content-Type: text/html
<HTML> 
A page with an image
  <IMG src="/myimage.gif">
</HTML>

@bahmutov

HTTP/1.0

Non-HTML data (images!)
Methods (HEAD & POST)
Status Codes
User preferences (User-Agent)
Format negotiation (Content-Type)

1996

RFC 1945

@bahmutov

HTTP/1.1

Formalize best practices

@bahmutov

HTTP/1.1

1999

RFC 2616

27 drafts, latest 2014

https://www.w3.org/Protocols/

The Hypertext Transfer Protocol (HTTP) is a stateless application-level protocol for distributed, collaborative, hypertext information systems.

https://tools.ietf.org/html/rfc2616

@bahmutov

HTTP/1.1

Performance (Caching, connections)
Security (HTTPS, 3rd party cookies)
Usability (IP scarcity, error codes)

http://www8.org/w8-papers/5c-protocols/key/key.html

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

1999

RFC 2616

@bahmutov

GET /bar.html

<html>
  title: bar
</html>

*** **

bar.html

** ***

index.html

title: bar

*** **

bar.html

Give me the page ...

HTTP/1.1 is still /0.9

request

response

* I am really ignoring all server-to-server communication happening over HTTP

@bahmutov

HTTP/1.1 is uniform and everywhere

@bahmutov

Reality: multiple versions, implementations, extensions, working drafts

https://github.com/httpwg/http-extensions

http://httpwg.org/specs/

@bahmutov

"The Tangled Web: A Guide to Securing Modern Web Applications"

by Michal Zalewski

ISBN-13: 978-1593273880

👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍

@bahmutov

When I open a browser ...

@bahmutov

State (cookies)

Cache control

Security, security, security

@bahmutov

tracking pixels / cookies

58 requests to load

this page!

@bahmutov

AJAX:

From websites

to web apps

i.e. "avoiding page reloads"

@bahmutov

GET /index.html

*** **

** ***

index.html

GET /bar.html

1996: iframe in Internet Explorer

@bahmutov

XMLHttpRequest

Gets the data from the server by a client side script

1999 Internet Explorer plugin

2004 Google Gmail, Kayak.com

2006 first spec draft

2014 latest spec draft

https://www.w3.org/TR/2014/WD-XMLHttpRequest-20140130/

@bahmutov

IP

TCP

HTTP

REST

GraphQL

http://graphql.org/learn/serving-over-http/

http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm

2000

2012

@bahmutov

Client - Server communications

....

</script>

index.html

....

</script>

index.html

HTTP/1 => HTTP/2 or QUIC

WebSockets

WebRTC

ServiceWorker

browser

https://slides.com/bahmutov/http

ServiceWorker

Blurring the line between client and server

@bahmutov

If a tree falls while you are in the forest ...

@bahmutov

<html manifest="example.appcache">
  ...
</html>

Application Cache

CACHE MANIFEST
# v1 2011-08-14
index.html
style.css
image1.png
# Use from network if available
NETWORK:
network.html
# Fallback content
FALLBACK:
/ fallback.html

declarative list

@bahmutov

Application Cache

Turns out declaring caching strategy is hard.

https://alistapart.com/article/application-cache-is-a-douchebag

@bahmutov

ServiceWorker

Server

browser

Web Workers

ServiceWorker

Transforms

the response

Transforms

the request

@bahmutov

Smart caching

OFFLINE SUPPORT

Image / video transcoding

Background data sync

@bahmutov

What if an attacker can load malicious ServiceWorker script?

@bahmutov

Malicious ServiceWorker injected via XSS can be really hard to get rid of

Please protect yourself from XSS

https://glebbahmutov.com/blog/disable-inline-javascript-for-security/

@bahmutov

HTTP is dead

Long live HTTPS

@bahmutov

The browser APIs worth discussing all require secure connections

http://localhost or https://...

@bahmutov

Usually a single command!

https://letsencrypt.org/

@bahmutov

Browser

Server

HTTPS

connections are expensive because

TCP + TLS handshakes!

data

@bahmutov

Web Today

Ajax

ServiceWorker

HTTP/2

QUIC

@bahmutov

HTTP/3

HTTP/2

Making web faster

*

@bahmutov

HTTP/1.1

How to quickly load 200 resources?
How to load some resources first?
How to avoid duplicate data overhead?

@bahmutov

Source: Ilya Grigorik https://bit.ly/http2-opt

@bahmutov

2009 - Google starts SPDY

https://hpbn.co/http2/#brief-history-of-spdy-and-http2

Need for Speed 🚤

2015 - RFC 7540

binary, multiplexed protocol - 55% speed up on top sites!

@bahmutov

https://hpbn.co/http2

H2: Binary Framing Layer

@bahmutov

https://hpbn.co/http2

H2: Multiplexing

@bahmutov

https://hpbn.co/http2

H2: Stream Prioritization

3:1

then

3:1

@bahmutov

$ curl -I https://github.com
HTTP/1.1 200 OK
Server: GitHub.com
Date: Sat, 03 Jun 2017 03:08:50 GMT
Content-Type: text/html; charset=utf-8
Status: 200 OK
Cache-Control: no-cache
Vary: X-PJAX
X-UA-Compatible: IE=Edge,chrome=1
Set-Cookie: logged_in=no; domain=.github.com; path=/; 
expires=Wed, 03 Jun 2037 03:08:50 -0000; secure; HttpOnly
Set-Cookie: _gh_sess=eyJzZXNzaW9uX2lkIjoiYzFlYTc0YTQ0OTNhZTdlNzI4MTgwNzI5N2QyNTlkNWMiLCJfY
3NyZl90b2tlbiI6IngzaHhRREMxNEpLUFNid1ZmMkc4d0N1OG1xdjZ3MkdmWmh4YkRFazNYQkU9In0%3D--b7171bd148da0b79b248fb561b8bfd4aadf16ff5; path=/; secure; HttpOnly
X-Request-Id: 75c9420698c53b1a707b10b2a7a510cc
X-Runtime: 0.056786
Content-Security-Policy: default-src 'none'; base-uri 'self'; block-all-mixed-content; 
child-src render.githubusercontent.com; connect-src 'self' uploads.github.com 
status.github.com collector.githubapp.com api.github.com www.google-analytics.com 
github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com 
github-production-user-asset-6210df.s3.amazonaws.com wss://live.github.com; font-src 
assets-cdn.github.com; form-action 'self' github.com gist.github.com; frame-ancestors 
'none'; img-src 'self' data: assets-cdn.github.com identicons.github.com 
collector.githubapp.com github-cloud.s3.amazonaws.com *.githubusercontent.com; 
media-src 'none'; script-src assets-cdn.github.com; style-src 'unsafe-inline' 
assets-cdn.github.com
Strict-Transport-Security: max-age=31536000; includeSubdomains; preload
Public-Key-Pins: max-age=5184000; pin-sha256="WoiWRyIOVNa9ihaBciRSC7XHjliYS9VwUGOIud4PB18="; pin-sha256="RRM1dGqnDFsCJXBTHky16vi1obOlCgFFn/yOhI/y+ho="; pin-sha256="k2v657xBsOVe1PQRwOsHsw3bsGT2VzIqz5K+59sNQws="; pin-sha256="K87oWBWM9UZfyddvDfoxL+8lpNyoUB2ptGtn0fv6G2Q="; pin-sha256="IQBnNBEiFuhj+8x6X8XLgh01V9Ic5/V3IRQLNFFc7v4="; pin-sha256="iie1VXtL7HzAMF+/PVPR9xzT80kQxdZeJ+zduCB3uj0="; pin-sha256="LvRiGEjRqfzurezaWuj8Wie2gyHMrW5Q06LspMnox7A="; includeSubDomains
X-Content-Type-Options: nosniff
X-Frame-Options: deny
X-XSS-Protection: 1; mode=block
X-Runtime-rack: 0.060928
Vary: Accept-Encoding
X-Served-By: e878d09eac725c89f5f15204c1326660
X-GitHub-Request-Id: F1E1:2F2B:6F2906B:A48C07A:59322842

2100 characters

~55% of HTTP/0.9 spec!

https://hpbn.co/http2