Improve Your Web App Using the Right HTTP Headers
By: Kesk - -
Tags: Http Headers, Programming, App Development, Software Development, Web Development

This request includes key-value pairs giving information to the server like the key API or the resource host.

--header 'x-rapidapi-host: movie-database-imdb-alternative.p.rapidapi.com' --header 'x-rapidapi-key: xxxxxxxxx your api key xxxxxxxxx'

Here you can see the response headers that give us information about the resource itself:

HTTP/1.1 200 OK

Accept-Ranges: bytes

Access-Control-Allow-Origin: *

Age: 1106

Cache-Control: public, max-age=86400

...

Expires: Sat, 01 Aug 2020 08:26:52 GMT

Last-Modified: Sat, 01 Aug 2020 07:26:52 GMT

Server: RapidAPI-1.1.24

Set-Cookie: __cfduid=dcdc511196cfb0471cbedcdc511196cfb0471cbe; expires=Mon, 31-Aug-20 07:45:18 GMT; path=/; domain=.omdbapi.com; HttpOnly; SameSite=Lax

Vary: *

...

Content-Length: 2265

Connection: keep-alive

The HTTP 200 OK success status response code means that the request has succeeded.

The Accept-Ranges HTTP header is used by the server to inform about the unit that can be used to define the range.

The Access-Control-Allow-Origin header indicates whether the response can be shared with requesting code from the given origin.

The Age header contains the time the object has been in a proxy cache.

The Cache-Control header holds directives (instructions) for caching in both requests and responses.

The Expires header contains the date, after which the response is considered stale.

The Connection header controls if the network connection stays open after the current transaction finishes.

Now that you have seen a basic example that shows the headers in the communication let’s look at other important aspects to consider.

2. HTTP Headers for Secure communications between your application and the server

HTTP Strict Transport Security (HSTS)

Imagine that a hacker is using a ‘packet sniffer’ that analyses your traffic because you are connected to a public WIFI. This hacker now could catch your network traffic over HTTP for any website that uses only 301 redirects for changing from HTTP to HTTPS and then steals your data.

For this reason, your website must employ HTTP Strict Transport Security or HSTS over just HTTPS.

To accomplish this, you can use the HSTS response header that lets a web site notify browsers that it should be accessed using the HTTPS protocol instead of using HTTP.

This header sets the Strict-Transport-Security policy field parameter that forces those connections over HTTPS encryption, ignoring any other call to load resources in that domain over HTTP. This way, the chance of an HTTP connection is dropped entirely.

Syntax:

Strict-Transport-Security: max-age=<expire-time>

Strict-Transport-Security: max-age=<expire-time>; includeSubDomains

The max-age directive set the time, in seconds, that the browser should remember that a site is only to be accessed using HTTPS.

The includeSubDomains directive indicates to apply the rule to all of the site’s subdomains as well.

Upgrade-Insecure-Requests

Another good idea is to use the HTTP Upgrade-Insecure-Requests header.

Syntax:

Upgrade-Insecure-Requests: 1

This header serves to indicate to the server the client’s preference for an encrypted and authenticated response, and that it can handle the upgrade-insecure-requests CSP directive.

When a server finds this preference in an HTTP request’s headers, it must redirect the user to secure representation of the resource being requested.

Notice that the server could ignore it, but yet it denotes the client’s preference.

Content Security Policy (CSP)

Using The HTTP Content Security Policy response header, you can restrict the resources to load within the site. These policies principally include specifying server origins and script endpoints.

These headers help you to protect against Cross-Site Scripting and other code injection attacks.

Syntax:

Content-Security-Policy: <policy-directive>; <policy-directive>

More information on Mozilla Content-Security-Policy.

X-XSS-Protection

X-XSS-Protection header protects against Cross-Site Scripting attacks and is especially useful in older browsers because, in modern browsers, you can implement a strong Content-Security-Policy that disables the use of inline JavaScript.

Syntax:

X-XSS-Protection: 0

X-XSS-Protection: 1

X-XSS-Protection: 1; mode=block

0: Disables XSS filtering. 1: Enables XSS filtering.

The 1: mode=block indicates that the browser will prevent the rendering of the page if an attack is detected rather than sanitizing the page.

More information on Mozilla X-XSS-Protection.

X-Content-Type-Options

The X-Content-Type header offers protection against MIME sniffing instructing by indicating to the browser to follow the MIME types specified in the headers.

Syntax:

X-Content-Type-Options: nosniff

The nosniff directive blocks a request if the request-target is of type:

“style,” and the MIME-type is not text/css.

“script,” and the MIME-type is not a JavaScript MIME type.

and enables Cross-Origin Read Blocking (CORB) protection for the MIME-types: text/html,text/plain,text/json, application/json, text/xml, application/xml.

3. HTTP Headers for Enhancing Performance

Cache-Control

The Cache-Control HTTP header holds directives (instructions) for caching in both requests and responses. The goal of caching is to reduce the need to send requests/responses in many cases decreasing the number of network calls required for many operations.

Syntax:

Cache request directives:

Cache-Control: max-age=<seconds>

Cache-Control: max-stale[=<seconds>]

Cache-Control: min-fresh=<seconds>

Cache-Control: no-cache

Cache-Control: no-store

The max-age directive sets the maximum amount of time in seconds a resource is considered updated. Unlike Expires directive, this directive is relative to the time of the request.

The max-stale directive set if the client will accept a stale response.

The min-fresh directive means that the client wants a response that will still be fresh for at least the specified number of seconds.

The no-cache directive indicates that any cache may store the response, even if the response usually is non-cacheable.

The no-store directive indicates that the response may not be stored in any cache. Although additional directives may be set, this alone is the unique directive you need in stopping cached responses on modern browsers.

Cache response directives:

Cache-Control: must-revalidate

Cache-Control: no-cache

Cache-Control: no-store

Cache-Control: no-transform

Cache-Control: public

Cache-Control: private

Cache-Control: proxy-revalidate

Cache-Control: max-age=<seconds>

The must-revalidate directive indicates that once a resource becomes old, caches must not use their old copy without successful validation on the server.

The public directive indicates that any cache may store the response.

The private directive indicates that the response may be stored only by a browser’s cache.

The no-transform directive indicates that an intermediate proxy or cache cannot edit the response body.

The proxy-revalidate directive is similar to the must-revalidate directive but only for shared caches.

More information on Mozilla Cache-Control.

Content-Encoding

The Content-Encoding header is used by the server to tell the client the encoding to apply to the message body. The content encoding is principally used for compression, achieving save bandwidth and increasing the overall performance of the site.

Syntax:

Content-Encoding: gzip

Content-Encoding: compress

Content-Encoding: deflate

Content-Encoding: identity

Content-Encoding: br

Content-Encoding: gzip, identity

Content-Encoding: deflate, gzip

Content-Encoding Directives:

The gzip directive uses the deflate algorithm (GNU zip format) for compression.

The compress directive or UNIX program method has been deprecated and replaced by the gzip or deflate algorithm.

The deflate directive indicates the use of the Zlib structure with the deflates compression algorithm.

The identity directive indicates that no transformation is used.

The br directive indicates the use of the modern Brotli algorithm designed explicitly for HTTP.

More information on Mozilla Content encoding.

Conclusion

Building a website today is a challenging task because you have to be aware of a lot of things, but in the end, the most helpful thing is to learn the basics.

In this little article, I have talked about a few headers that could help improve the security and the performance of your app. I encourage you to continue investigating other useful headers.

I hope you found the article useful. Take care!