Top 6 HTTP Headers that improve your site security.

Web Security (Source: https://brandreachers.com)

Security is a really important thing but almost we don’t care when building applications. There are a lot of essential security practices, But in this story, I am going to talk about HTTP Security Headers.

In HTTP requests, Headers hold the metadata about the request/response. Apart from that, Some HTTP Headers are used to enforce some security mechanisms.

Okay, Let’s jump into the topic…

HTTP Strict Transport Security (HSTS)

Most websites use HTTPS nowadays. That’s really good. But some sites don’t force users to communicate via HTTPS. Instead, they work on both HTTP and HTTPS. This is really bad. Because Still, they are giving an option to communicate non-securely.

HSTS header helps us to force users to access the site via HTTPS only. So basically, When the browser finds this header, It will change the connection to HTTPS even if the user tries to access it via HTTP.

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

Strict-Transport-Security - HTTP | MDN

Content Security Policy (CSP)

CSP headers will allow us to define what kind of resources can be loaded into the site. So we can have more control over the resources such as JavaScript, Images, CSS, Fonts, AJAX requests, Frames, HTML5 Media.

We can whitelist what contents from which origin the browser can load into the webpage. Because of this restriction, we can mitigate a lot of attacks including XSS, Data Injection and ClickJacking.

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

Can specify in Meta Tag too

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; img-src https://*;">

Content-Security-Policy - HTTP | MDN

Cross-Site Scripting Protection (X-XSS)

X-XSS-Protection headers are preventing the execution of malicious javascript code. If the X-XSS-protection header is enabled and the browser finds an XSS Attack, It will stop loading the site.

This header will be added automatically on modern browsers such as Chrome, Safari. But, I recommend you to enable it on your application side too.

X-XSS-Protection: 0 
X-XSS-Protection: 1 
X-XSS-Protection: 1; mode=block 
X-XSS-Protection: 1; report=<reporting-uri>

X-XSS-Protection - HTTP | MDN

iFrame Protection (X-Frame-Options)

X-Frame-Options header is used to tell the browser whether the website should be allowed to load inside <frame>, <iframe>, <embed> or <object>.

This header helps us to mitigate Click-Jacking Attacks. That means, Attackers uses the iFrame to load any website and reduces the opacity. So users can’t see it, But when users click, They are actually clicking on the website which is already loaded in the iframe.

X-Frame-Options: DENY 
X-Frame-Options: SAMEORIGIN

X-Frame-Options - HTTP | MDN

MIME Sniffing Prevention (X-Content-Type-Options)

MIME Sniffing is an attack that enables attackers to sniff the response from the server and change the content type then injecting malicious code/scripts. So the browser will be tricked to execute the code/script.

Using X-Content-Type-Options solves this problem. You should specify this header in the response with value nosniff.

X-Content-Type-Options: nosniff

X-Content-Type-Options - HTTP | MDN

Cross-Origin Resource Sharing (CORS)

As a developer, We all are familiar with this term CORS. We get CORS errors when we want to access resources from other services. To fix this issue, Most of the time developers disable this CORS completely or allow all resources for all origins. This is a really bad idea.

Basically, CORS gives us the ability to control who can access which resources from our server/origin. We should allow necessary resources, methods, headers and origins instead of allowing everything to everyone.

Access-Control-Allow-Origin: https://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

Conclusion

Nowadays, We use a lot of frameworks and libraries to build applications. Most of the frameworks have built-in security features and some of them are enabled by default. But it doesn't mean we should not worry about it.

Make sure your site has the necessary common security implementations. Run penetration testing on your site to inspect the security level.

Give some 👏 if you like this story. Will see you in another blog.

Happy Coding… ❤️