[Fundamental] Web Flashcards
HTTP is stateless, what does that mean
there is no link between two requests being successively carried out on the same connection.
HTTP session
HTTP is stateless, in order to associate a request to any other request, you need a way to store user data between HTTP requests.
we can use
- URL params
- cookies: all cookies are sent on each request
- local storage: key:value pairs
Auth
In general:
send request with Authorization header
server-side sessions: store info in server, check if auth is valid to db
JWT token: token that contains three parts
ALGORITHM & TOKEN TYPE.PAYLOAD.HMACSHA256(
base64UrlEncode(header) + “.” +
base64UrlEncode(payload), your-256-bit-secret)
we can just use the third part to verify payload is valid
local storage vs session storage
That is, the data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site.
For sessionStorage, changes are only available per tab. Changes made are saved and available for the current page in that tab until it is closed. Once it is closed, the stored data is deleted.
JWT storage
Local storage can be read by js, xss
Cookies http only secure https
Csrf protection
CSR vs SSR vs SSG in general
Client-Side Rendering
- client request -> server sends blank page -> data fetch on client
Server-Side Rendering
- client request -> server fetch data -> server sends page with data
Static-Site Generation
- data fetch on build, client request -> server sends page with data
CSR pros and cons
pros
- serving blank page is faster
- lazy loading
- supports SPA, allows us to reuse UI components across our application, without requesting them again from the server.
cons
- client will see a blank page first, ultimately first contentful paint might be slower than SSR
- SEO, Since your metadata is being loaded by the JavaScript on the first pass loading, search engines will not see that data when their web crawlers hit your page
SSR pros and cons
pros
- fast FCP
- great for SEO
cons
- latency, heavy work on the server
SSG pros and cons
pros
- crazy fast, pages are already built with data
- great for SEO
cons
- need to rebuild for each modification
HTTP cache
All HTTP requests that the browser makes are first routed to the browser cache to check whether there is a valid cached response that can be used to fulfill the request. If there’s a match, the response is read from the cache, which eliminates both the network latency and the data costs that the transfer incurs.
Response headers for HTTP cache
Cache-Control: instruction for browser and intermediate cache
ETag: When the browser finds an expired cached response, it can send a small token (usually a hash of the file’s contents) to the server to check if the file has changed. If the server returns the same token, then the file is the same, and there’s no need to re-download it.
Last-Modified: like ETag, but time-based
Cache-Control
no-cache. This instructs the browser that it must revalidate with the server every time before using a cached version of the URL.
no-store. This instructs the browser and other intermediate caches (like CDNs) to never store any version of the file.
private. Browsers can cache the file but intermediate caches cannot.
public. The response can be stored by any cache.
HTTPS flow
- give me youtube.com
- here’s my certificate signed by google CA
- I have google CA public key, let me verify
- ok, here’s a secret key, I’ve encrypted it with your public key
- let’s encrypt everything with this secret key
SSL, TLS, HTTPS stands for …
SSL: Secure Sockets Layer standard technology for keeping an internet connection secure
TLS: TLS (Transport Layer Security) is just an updated, more secure, version of SSL
HTTPS (Hyper Text Transfer Protocol Secure) appears in the URL when a website is secured by an SSL certificate
What happens when you click on a URL in your browser
- DNS lookup
- HTTPS handshake
- depends on CSR, SSR, SSG
