Security in modern Web Applications -> Owasp to the rescue!
Tags: security, node, javascript, webdev
Published: 2023-11-13 08:07:23

This summer, I had an unique opportunity to give a talk at WeAreDevelopers World Congress 🎉

I was really happy about it and when I discovered the talk title that was selected (the same as this article title) I thought that it is even better! I like improving security of web apps so giving a talk about this subject is such great and big audience as the one at WeAreDevelopers was always my dream.

Below, you will see the link to my presentation as well as the links to the tools and packages that can be quite useful when working with Security in modern web applications with [OWASP](https://owasp.org/www-project-top-ten/).

![Security in modern web applications
OWASP to the Rescue
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/427qg1qabnpx1bh14l92.png)

I have also summarized some of the most important parts of my talk so that you can read about it :)

Enjoy!

https://docs.google.com/presentation/d/1XeLL2YpjUBOE3iAjyXIiplBkylKTCLVT2HbXSY96gZo/edit?usp=sharing

##  Main idea

To make you more aware of security risks in modern web applications. That's it. In this talk, I wanted to share security awareness across developers because I believe that if you are aware of common security issues, you are less likely to have them in your system.

Why do we have security issues in web applications?

![Why do we have security issues in web applications?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mrzbpeu7s9fd3x96n347.png)

Business & Management wants developers to deliver ASAP

![Business & Management wants developers to deliver ASAP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ze7c6cjwiojeecgbm7q.png)

As developers, we should explain to them that not working on these aspects will have bad consequences later

When should I start working on security?

As ASAP as Possible. It should be part of CI/CD process as shown below

![Security in CI/CD](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rx9goqotpxha0o47qjbs.png)

Where should I look for security patterns & principles?

The OWASP Top 10 is a standard awareness document for developers and web application security. It represents a broad consensus about the most critical security risks to web applications.
Globally recognized by developers as the first step towards more secure coding.

## Common security risks

OWASP TOP 10 names several common security risks that you can encounter while developing a web application.

Let's start with injections - SQL and XSS

![Injections](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fzw7tdq2rufbonpwi33.png)

These attacks aim to inject some malicious code into your application by either storing it unintentionally in the database (SQL) or in user browser (XSS). 

You can read more about them here:
* https://www.geeksforgeeks.org/what-is-cross-site-scripting-xss/ 
* https://portswigger.net/web-security/sql-injection

Next, there is Broken Access Control

![Broken Access Control](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/633fkpn3x4y4mz8yc0ki.png)

The idea of this attack is to bypass security rules so that unauthorized user could access data that should only be accessible to authorized members (like admins for example). You can read more about it https://www.prplbx.com/resources/blog/broken-access-control/

And finally my favourite, Denial of Service attacks that aim to deliver so many requests to your application that it will basically give up and stop working

![Denial of Service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vq9qlmxje1m1g7z9jg26.png)

You can read more about it https://developer.okta.com/books/api-security/dos/what/

The best way to protect against these attacks is to follow OWASP recommendations.

## Protecting your application

The easiest way to protect your web application against these common security threats in my opinion is always to utilise native browser functionality like HTTP Headers:

![HTTP Security Headers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4037rr43cuvvnmq2bgm.png)

They allow you to set some instructions to how your browser should behave under certain circumstances. You can set Content Security Policy, Permissions Policy, Basic Auth, and many more!

But in order to protect your application against all other threats you should also learn more about following cases:

* Rate & Request Size Limiting
* Cross Origin Resource Sharing (CORS)
* Cross Site Request Forgery (CSRF)
* Cross Site Scripting (XSS) Validation
* Allowed HTTP Methods
* Logging & monitoring

And my final note for the slides:

*There are no unbreakable systems. There are only those who are so difficult/time consuming to break that attackers will give up*

## Improving Security of Vue & Nuxt

I am proud to say that there is a really good package (module) for Nuxt that you can use to make your app more secure by default (I am the maintainer of it :D ).

![Nuxt Security](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8cfl5aaqc78c2c2isj2q.png)

By using it, your application should be protected against common security issues and threats mentioned by OWASP.

It comes with several features out of the box:

* Security response headers (including CSP for SSG apps)
* Request Size & Rate Limiters
* Cross Site Scripting (XSS) Validation
* Cross-Origin Resource Sharing (CORS) support
* Hide X-Powered-By header and remove console loggers utils
* [Optional] Allowed HTTP Methods, Basic Auth, CSRF

If you like the idea, please make sure to leave a GitHub star :)

https://github.com/baroshem/nuxt-security

## Summary

Nicely done! You are now more aware about common security risks and threats. Thanks to that, you are less likely to have these issues in your web application. With this in mind, go and build more secure web applications, one website at a time! 😉

Take care and see you next time!