Web Security Refresher for Frontend Developers
Tags: webdev, frontend, security, react
Published: 2023-06-08 17:07:20

---
title: Web Security Refresher for Frontend Developers
published: true
description: Learning path with links to some great materials to build or refresh your Web security knowledge
tags: webdev, frontend, security, react
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zi4byic7vy951lkvzwze.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-06-08 16:52 +0000
---
Security is extremely important when developing for the Web.
And unfortunately, it's often overlooked when building frontend developer skillset.

This article gives a learning path and links to some great materials to build or refresh your Web security knowledge.


## [The Basics of Web Application Security by Martin Fowler](https://martinfowler.com/articles/web-security-basics.html)
Great long-read giving an overview of risk areas in a Web application and guidance for how to mitigate them.

Perfect starting point or knowledge gap filler - you can dig deeper into each of the topics using the links provided and googling the threats mentioned.


## [OWASP Top Ten and Cheat Sheets](https://cheatsheetseries.owasp.org/IndexTopTen.html)
OWASP Top Ten threats are affecting all layers of Web apps, not only the frontend.

It's good to know and monitor the Top Ten, but the following cheat sheets are must-read and must-remember for a Frontend developer:
- [HTML5 Security](https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html)
- [XSS Prevention](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) 
- [DOM based XSS Prevention](https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html)
- [XSS Filter Evasion](https://cheatsheetseries.owasp.org/cheatsheets/XSS_Filter_Evasion_Cheat_Sheet.html) (reference for XSS mitigation testing)
- [CSRF Prevention](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)
- [CSP](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html)
- [Secure Headers Project](https://owasp.org/www-project-secure-headers/index.html#configuration-proposal)


## [Kontra OWASP Top Ten Training](https://application.security/free/owasp-top-10)
Interactive trainings for the common Web vulnerabilities based on real-world cases. The format is perfect for understanding how the attacks can be carried out against your app.

Note: There's a paywall appearing after passing a couple of trainings. You'll need to make a post on LinkedIn to get free access to the rest of the trainings.


## [Web Application Security Course - Mike North (FrontendMasters)](https://frontendmasters.com/courses/web-security/)💸
Practical guide using example NodeJS app to show common vulnerabilities and their fixes. You'll get most out of the practical part if you use NodeJS and render server-side. The tech stack of the example is a bit old, but the vulnerabilities shown are still relevant.

There's also his talk on Web Security [available on YouTube](https://www.youtube.com/watch?v=V6Dyn4iTn_Y&list=PLk9PtblnhxXjdNGSp39GzD7BeS2mh0S5o&index=1), it touches the topics from the course, but without the practical part.


## [React Security Fundamentals](https://courses.reactsecurity.io/view/courses/react-security-fundamentals)
Project-based tutorial showing you how to build a secure Web application featuring Authorization and Role Based Access Control. Most useful if you're building a React app and NodeJS API and need some directions on how to organize it.


## Conclusion
There's a lot of vulnerabilities and information on them on the Web and it's easy to get lost figuring out how to mitigate the risks in your application.
I hope this article makes it a bit easier to build the knowledge necessary to protect your users.

Suggestions for other materials are most welcome.