Wait... Should We Be Doing It This Way? 🤔

Every developer has that moment when they stumble upon something in their codebase that makes them pause and think: “Wait... should we really be doing it this way?” Recently, I had a few of those moments, and they sparked some learning opportunities.

From unconventional API endpoint names to sending plaintext passwords over HTTPS, and even battling XSS attacks, it’s been a series of challenges. Let me take you on this journey!

---

1. API Naming 🔍

Imagine you’re the new developer on the team, and you see API endpoints named get_accounts or remove_folders.

Functional? Yes. Elegant? Not so much.

It’s like calling a restaurant menu item “Fetch_Burger” instead of just “Burger🍔"

What’s the Problem?

• It’s not RESTful. REST APIs are meant to be clean and resource-oriented, not action-packed.
• Action vs. Resource: RESTful API design focuses on resources rather than actions. Think of an action like get or remove as something that should be implied by the HTTP verb, not included in the URL.

The Fix:

Let the HTTP methods do the heavy lifting!

• GET /accounts instead of GET /get_accounts
• DELETE /folders/{folder_id} instead of DELETE /remove_folders/{folder_id}

Now, it’s like having a clean, organized menu where you know exactly what to expect.

---

2. DOM Manipulation in Ember.js 🔧

I stumbled upon some .js files where the DOM was being accessed directly, like this:

document.querySelector('#my-element').textContent = 'Hello';

This felt like bypassing a chef in a fancy restaurant to cook your own food in their kitchen—messy, unnecessary, and against the rules😒.

Why This Matters:

• Ember.js is built to handle the DOM for you. Manual manipulation can break reactivity and create inconsistencies.
• It also has powerful tools like tracked properties and services that help manage state without directly manipulating the DOM. By embracing this, you make your components more maintainable and avoid potential issues with synchronization between the UI and underlying state.

The Fix:

Let Ember do the heavy lifting with its reactive template system:

<h1>{{this.greeting}}</h1>

Need to interact with the DOM? Use lifecycle hooks. This keeps your code elegant, predictable, and future-proof.

---

3. Passwords Over HTTPS 🔐

Is it ok to send plaintext passwords over HTTPS? Yes, HTTPS encrypts traffic, but it’s like locking your front door while leaving your house key under the mat—it’s still a bad idea🫤.

Why It’s Risky:

• Logs or intermediaries might capture plaintext passwords.

The Fix:

• Handle passwords securely on the server.
• Instead of storing passwords as plaintext, hash them using algorithms like bcrypt, or scrypt with a unique salt for each password.
• Consider token-based authentication systems (like JWTs) to replace raw password handling altogether.

Want to dive deeper into JWTs and why they're a game-changer for secure authentication? Check out this post.

---

4. XSS Attacks🛡️

This one felt like a mini-war. We recently discovered XSS vulnerabilities in the codebase—where attackers could inject malicious scripts into our web pages. It was like realizing you’ve left your windows open during a storm💨.

Get a clear understanding of XSS 🤏 here.

The Risks:

• Attackers can steal data, hijack sessions, or run unauthorized scripts.

How We Fought Back:

• Input Sanitization: We made sure all user inputs are cleaned up before rendering.
• Content Security Policy (CSP): Strengthened our CSP to block unauthorized scripts.
• Output Escaping: Leveraged Ember’s built-in escaping mechanisms to prevent scripts from running in templates.

Now, the codebase feels like a fortress—not impenetrable, but definitely harder to breach.

Not familiar with Content Security Policy (CSP)? Check out this guide on MDN to learn how it strengthens web security.

---

Wrap-Up

Codebases grow, evolve, and sometimes pick up bad habits along the way. The key is to keep learning and improving. If you’ve ever had similar “aha!” moments in your codebase, I’d love to hear your stories. After all, every bug fixed is a lesson learned!

Happy Coding 💻