Secure coding practices for frontend devs

This article was generated with the assistance of AI to help our volunteer team share valuable insights efficiently. While we've reviewed the content for accuracy, please let us know if you spot any errors or have additional insights to contribute!

Missed our latest FEDSA Talk on secure frontend coding? Don’t worry — here’s your recap!

In our latest session, “Secure Coding Practices for Frontend Developers”, Alicia broke down why frontend security isn’t just a backend concern. With real-world demos, OWASP insights, and practical tips, this talk offered frontend developers a vital guide to building safer web applications — especially in an age where a single XSS vulnerability could expose sensitive data or destroy user trust.

This talk is a must-watch for anyone working with modern JavaScript frameworks or handling user input. If you’re using React, Vue, or Angular — or managing anything from login forms to third-party scripts — this one’s for you.

What We Covered

Alicia introduced the importance of frontend security in today’s landscape, emphasising that the front end is the most exposed part of any application. She explained key vulnerabilities from the OWASP Top 10 list and demonstrated how even seemingly harmless user inputs can become security threats if not handled properly.

Topics included:

• Cross-Site Scripting (XSS) — what it is, how it works, and how to prevent it.

• Cross-Site Request Forgery (CSRF) — how attackers exploit authenticated sessions and how to guard against it.

• Vulnerable and outdated packages — how ignored npm warnings can become open doors for attackers.

• Practical coding techniques for frontend security - with real Vue.js demo code.

Key Takeaways

Frontend Security is Your Responsibility Too

Security doesn’t stop at the backend. User inputs, DOM manipulation, and API calls handled in the front end are all potential vectors for attack.

Cross-Site Scripting (XSS) Is Still a Major Threat

Alicia walked through DOM-based, stored, and reflected XSS types, showing how poor input sanitisation can lead to site defacement or data theft. Escaping output and setting Content Security Policies (CSP) are crucial defences.

CSRF Attacks Exploit Logged-In Users Silently

CSRF tokens and SameSite cookie attributes can prevent users from unknowingly submitting malicious requests. Alicia explained exactly how these mechanisms work and how to implement them.

Your Dependencies Might Be a Liability

Tools like npm audit, Snyk, and GitHub’s Dependabot help you track vulnerable packages. But they only work if you pay attention to the warnings — don’t just ignore them or rely on quick fixes.

Modern Frameworks Help — If You Let Them

Frameworks like React, Vue, and Angular offer built-in protections like automatic output escaping. Avoid bypassing these with things like dangerouslySetInnerHTML unless you absolutely know what you’re doing.

Want to See the Demos?

Alicia’s live-coded examples - including stealing a fake session cookie and defacing a sample site - brought these vulnerabilities to life. They’re worth watching, especially if you’ve ever assumed your frontend is “safe enough.”

📺 Watch the full session on Youtube

Join our Discord for discussion and updates, and subscribe to our monthly newsletter to stay in the loop.