Web Security Essentials for Front-End Engineers

Security is the most fundamental requirement for any product, and front‑end engineers are often the closest to potential vulnerabilities. This article reviews common web attacks—including XSS (non‑persistent, persistent, charset‑based, Flash‑based, unvalidated redirects), CSRF, directory/source exposure, SQL injection, command injection, DDoS, and traffic hijacking—explaining their principles and providing concrete mitigation steps.

For each XSS variant, the recommended defenses are to avoid eval, innerHTML, and other executable‑string methods, enforce server‑side data origin, escape all output, and ensure proper character‑set handling. Example of a non‑persistent XSS payload:

https://xx.com/xx?query=<script>alert(document.cookie)</script>

CSRF can be prevented by using anti‑CSRF tokens on state‑changing requests and avoiding unsafe GET operations. Example of a malicious image tag used for CSRF:

<img src="bank.com/Transfer.php?toBankId=11&money=1000">

Directory exposure should be avoided by proper server configuration and custom error pages. Example of correct vs. incorrect static file serving configuration:

// Correct configuration – only serve static directory
app.use(serve(__dirname + '/project/static'));

// Incorrect configuration – exposes entire project
app.use(serve(__dirname + '/project'));

SQL injection is mitigated by parameterized queries and thorough input escaping. Example of vulnerable SQL and a safe alternative:

SELECT * FROM user WHERE username='nomi' AND psw='mypassword';
-- malicious injection
SELECT * FROM user WHERE username='nomi' OR 1=1 --' AND psw='xxxx';

Command injection requires strict validation of any user‑controlled command arguments. Example of vulnerable code:

// Vulnerable command injection
exec(`git clone ${repo} /project/path`);

DDoS attacks are mitigated by scaling infrastructure, increasing bandwidth, and optimizing network architecture; there is no perfect technical shield, but robust architecture reduces impact.

HTTP/DNS hijacking can be prevented by enforcing HTTPS (SSL/TLS) and using secure DNS configurations.

The article concludes with a concise list of security principles for front‑end development, such as never trusting client‑side code, using HttpOnly cookies, avoiding sensitive data in HTML, sanitizing inputs and outputs, restricting file uploads, employing password‑strength checks, and following secure coding standards.

References to further reading on web security, HTTPS, DDoS mitigation, and related topics are provided.