As a frontend developer, I often focus too much on improving my skills in technologies like HTML, CSS, JS, and SPA frameworks, and it's right🙂, but it's also essential to enhance my understanding of how the browser works and, more importantly how I can enhance the security of the applications I develop.
I was the kind of developer that always do the new React course available to be more productive on the job. In the last period, we tackled the Authentication part of the application I currently working on, discussing how to handle it. it was disheartening not to know what the best solution suggest, where to persist the token on the client side, and how to explain the differences between local storage, session storage, and what are cookies. Fortunately, I am the person that tries to fill the gap as soon as possible when there is one, so I decided to immerse myself in the topic and go deep.
The purpose of this series about web security is to create my learning notes and fill the gap in myself and other developers as well: understand the mindset of a malicious user, discover the several kinds of attacks that can happen in a web application, and know a bit more about the browser built-in tools to mitigate attacks.

Why Web security matters

You often encounter headlines like "A big social network leaked login passwords" or "an attacker stole credit card information from a shopping site". Web security matters because we can avoid those kinds of things, in an insecure application, different people could be affected. It has an impact on users through stolen sensitive data, on the application through a lost of confidence from the users or worse a compromised business, and on other systems through hijacked attacks.

What's in this series

The series is divided in three parts:

1. Reconnaissance: when we talk about Web security, it's important to start understanding how a malicious user, an attacker, could think. The Recon phase is important because is the process to acquire knowledge about the application. Knowledge not only in a perspective way but also in a functional way: who are its users, how does the application generate revenue, what functionality is found in the application, etc.
   At the end of this process, we will gain a deep understanding of how the application works and if there could exist a possible vulnerability.

2. Offense: once we recon the application and gained information about it, we can proceed with the offense phase, Where we will see some common techniques used by attackers to compromise the application.

3. Deffense: in this final part, we will consider significant security risks and concerns. Following our concerns, we will evaluate alternative implementations as well as mitigations that alleviate security risk. Throughout this process, we will see some useful techniques to reduce the number of vulnerabilities found in the production code.

Prerequisite Knowledge

The series is focusing on frontend developers that want to acquire more knowledge on how to enhance the security of web applications and understand better the properties exchanged by clients and servers.
Hence is just enough to have a basic knowledge of JS, HTML, and browser developer tools.

References:
Web Application Security: Exploitation and Countermeasures for Modern Web Applications

The Web Application Hacker's Handbook: Finding and Exploiting Security Flaws: Discovering and Exploiting Security Flaws

Web Security Academy

Web Security, Stanford course

Safe and secure, Ensure your site and your users' data is secure.

Weaving the Web