Don’t Get Hacked! Common Web Security Pitfalls and How to Fix Them

Web security is a critical concern for developers but often feels overwhelming due to its complexity and evolving nature. Understanding the most common vulnerabilities and how to protect your applications with practical code fixes can dramatically reduce risks. This guide dives into key security pitfalls from the OWASP Top 10, explaining both the problem and actionable solutions with code examples.

SQL Injection: Use Parameterized Queries

SQL Injection occurs when user input is directly included in SQL queries, allowing attackers to manipulate queries and access unauthorized data.

Vulnerable code example:

javascript

const query = `SELECT * FROM users WHERE username = '${username}' AND password = '${password}'`;
db.execute(query);

Fix with parameterized queries:

javascript

const query = 'SELECT * FROM users WHERE username = ? AND password = ?';
db.execute(query, [username, password]);

Parameterized queries ensure user input is treated as data, not executable code, preventing injection attacks.

Cross-Site Scripting (XSS): Sanitizing User Input

XSS attacks inject malicious scripts into web pages viewed by others, compromising user data.

Vulnerable example:

xml

<div>${userInput}</div>

If userInput contains malicious JavaScript, it executes in users’ browsers.

Fix with sanitization:

Use libraries like DOMPurify or encode output:

javascriptimport DOMPurify from 'dompurify';

const cleanInput = DOMPurify.sanitize(userInput);
<div dangerouslySetInnerHTML={{ __html: cleanInput }}></div>

Sanitizing input neutralizes potentially dangerous code before rendering.

Cross-Site Request Forgery (CSRF): Using and Validating Tokens

CSRF tricks authenticated users into submitting unwanted actions on a web app.

Prevention technique:

• Generate a random CSRF token on the server.
• Include the token in forms or headers.
• Validate the token on each request.

Example in Express.js:

javascript

const csurf = require('csurf');
const csrfProtection = csurf({ cookie: true });

app.use(csrfProtection);

app.get('/form', (req, res) => {
  res.render('form', { csrfToken: req.csrfToken() });
});

app.post('/process', csrfProtection, (req, res) => {
  // Process form data securely
});

Tokens ensure requests are intentional and come from trusted sources.

Secure Headers (CSP, HSTS)

Setting security headers adds another layer of defense:

• Content Security Policy (CSP): Controls allowed sources for scripts, styles, etc.
• HTTP Strict Transport Security (HSTS): Forces users to use HTTPS.

Example headers setup:

javascript

app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self'");
  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
  next();
});

Proper headers reduce risk from malicious content and insecure connections.

Tools to Automatically Scan Your Site for Vulnerabilities

Automation helps maintain security hygiene:

• OWASP ZAP: Free tool for dynamic application security testing.
• Snyk: Detects vulnerabilities in open-source dependencies.
• Burp Suite: Industry-standard penetration testing platform.

Regular scanning helps identify and fix weaknesses proactively.

Security is a continuous journey, but adopting best practices like parameterized queries, input sanitization, CSRF protection, secure headers, and vulnerability scanning dramatically raises your defense. Protect your web applications—and your users—from common attacks with these actionable techniques.