The HTTP/1 specification recommends opening up to two connections from a client (browser) to a web server. Modern browsers have removed this restriction and can handle more than two parallel downloads. This decreases page load time when downloading multiple assets (CSS, JavaScript files, images) for a single page view.

Domain sharding is an older workaround for HTTP/1 limitation by sharding the domain with multiple CNAME aliases for the same web server.

HTTP/2 solves this with multiplex responses, by interleaving multiple responses in parallel without blocking. This allows the web server to serve multiple files at the same time in a single connection.

Http2 request and response multiplexing

Sometimes you want to host multiple secure domains e.g. https://mycompany.com and https://api.mycompany.com, each with its own SSL certificate, on a single web server which has one IP address.

The difficulty is that the SSL handshake between the server and clients happens before the clients can indicate the domain they want to reach using the Host header.

Server Name Indication (SNI) is an extension of the TLS protocol which solves this issue by including the domain name in the TLS handshake, so that clients are able to see the correct SSL certificate for the website they want to access.

Server Name Indication

The recommendation is to use different file or directory names, for example image_1.png, image_2.png because you don’t have to wait for an object to expire before your CDN servers the new version (also, invalidations cost money).

Setting cache eviction policies (see below) is also recommended alongside versioning.

Cross Origin Resource Sharing (CORS) is a mechanism built in browsers to allow requests from the same domain but block rogue requests to a different:

• domain: example.com → api.com
• subdomain: example.com → api.example.com
• port: example.com → example.com:4000
• protocol https://example.com → http://example.com

The idea is to prevent cross-scripting attacks. For example, we don’t want Google Ads to make an AJAX call to your logged in bank account.

CORS works in the following way:

• If the server doesn’t respond with specific headers to GET and POST requests, the request will still be sent, the response still received but the browser won’t allow the JS to read the response.

• If the browser makes a request with cookies or a custom header and a Content-Type other than application/x-ww-form-urlencoded, multipart/form-data or text-plain then a mechanism called preflight is used and an OPTIONS request is sent to the server instead.

• If the server doesn’t respond properly, only the preflight request will happen and the browser will display an error: Access to fetch https://api.example.com from origin https://example com has been blocked by CORS policy...

CORS can be controlled with the following headers:

1. Allow-Control-Allow-Origin

   • returned by the server
   • indicates what client domains are allowed to access resources:
   • * - any domain (anti-pattern)
   • https://example.com
   • if you require authentication headers (e.g. cookies) you cannot use *

2. Allow-Control-Allow-Credentials

   • required only if the server supports authentication via cookies
   • the only valid case is true

3. Allow-Control-Allow-Headers

   • comma-separated list of request header values the server is willing to support
   • if you use custom headers like x-authentication-token, you need to return it in this ACA header response to the OPTIONS call, otherwise the request will be blocked

4. Access-Control-Expose-Headers

   • the server makes available a comma-separated list of headers to the client, others are restricted

5. Access-Control-Allow-Methods

   • comma-separated list of verbs GET, POST

6. Origin

   • part of the request the client is making
   • contains the domain from which the application is started
   • browsers don’t allow you to overwrite this value

Bonus: Set the Content-Security-Policy directives to allow loading javascript libraries only from your domains, to mitigate the risk of malicious third-party scripts.

This makes website rendering faster, because files are downloaded faster. The amount of compressed data is lower than uncompressed, so it also reduces costs.

Clients must use Accept-Encoding to indicate support for compressed files gzip or br and the server must respond with Content-Length to determine the size of the file.

Comparing Brotli with Gzip, it has support across major browsers, it’s faster and produces smaller files:

• HTML files are 21% smaller
• CSS files are 17% smaller
• JS files are 14% smaller

A CDN is like the front door of your house. You want to lock it, control who has access and ensure nobody can storm in.

A web firewall enables the CDN to allow, block or count requests matching certain rules.

These rules prevent common exploits like cross-site scripting (XSS) and SQL injection (SQLi) attacks and/or filters unwanted traffic, for regulatory requirements.

A DoS, or a particular form if it, Distributed Denial of Service (DDoS) means that a single malicious source or a multitude of systems target a vulnerable network and flood it with packets.

Not only that legitimate customers cannot be served but apparently, the average cost of a DDoS is around $40,000 per hour 🤯.

A DDoS shield is a software that inspects incoming traffic and applies a combination of traffic signatures, anomaly algorithms, and other analysis techniques to detect and stop malicious traffic in real-time.