Ensiklopedia VibeKoding: Fundamentals of Security Thinking: Offense and Defense.Ensiklopedia VibeKoding: Fundamentals of Security Thinking: Offense and Defense.
Is your website secure? Many developers think "security is the security team's job" — until their own project gets attacked and user data is leaked. Security is not optional; it's a fundamental skill for every developer. This chapter helps you build a security mindset and understand the most common web security threats and defense methods.Is your website secure? Many developers think "security is the security team's job" — until their own project gets attacked and user data is leaked. Security is not optional; it's a fundamental skill for every developer. This chapter helps you build a security mindset and understand the most common web security threats and defense methods.
What will you learn in this article?What will you learn in this article?
| Chapter | Content | Core Concepts |
|---|---|---|
| Chapter 1 | Security mindset model | Thinking like an attacker |
| Chapter 2 | Common web attacks | XSS, SQL Injection, CSRF |
| Chapter 3 | Defense strategies | Input validation, output encoding, access control |
| Chapter 4 | Security checklist | Pre-launch security self-audit |
After reading this chapter, you will have basic security awareness and be able to identify and defend against the most common web security threats.After reading this chapter, you will have basic security awareness and be able to identify and defend against the most common web security threats.
------
Imagine you built a house — fully functional, beautifully decorated — but forgot to install locks. Security vulnerabilities are the "forgotten locks" of the code world.Imagine you built a house — fully functional, beautifully decorated — but forgot to install locks. Security vulnerabilities are the "forgotten locks" of the code world.
- Least Privilege: Grant only necessary permissions — not a single bit more - Defense in Depth: Don't rely on a single line of defense; set up multiple layers - Never Trust Input: All data from external sources could be malicious - Secure by Default: Default configurations should be secure, not convenient- Least Privilege: Grant only necessary permissions — not a single bit more - Defense in Depth: Don't rely on a single line of defense; set up multiple layers - Never Trust Input: All data from external sources could be malicious - Secure by Default: Default configurations should be secure, not convenient
------
Use the interactive component below to understand the three most common web attack principles (for educational purposes only):Use the interactive component below to understand the three most common web attack principles (for educational purposes only):
An attacker injects malicious scripts into a web page. When other users visit the page, the script executes in their browser.An attacker injects malicious scripts into a web page. When other users visit the page, the script executes in their browser.
javascript // Dangerous: directly inserting user input into HTML element.innerHTML = userInput // If userInput is <script>malicious code</script>, it will execute // Safe: use textContent or escaping element.textContent = userInput // Or use framework's auto-escaping (Vue's {{ }}, React's JSX)
Defense Essentials:Defense Essentials:
<, >, &, ", ')Escape HTML special characters on output (<, >, &, ", ')Content-Security-Policy HTTP headerSet the Content-Security-Policy HTTP headerAn attacker crafts special input to manipulate the logic of SQL queries.An attacker crafts special input to manipulate the logic of SQL queries.
javascript // Dangerous: string concatenation for SQL const query = `SELECT * FROM users WHERE name = '${userInput}'` // If userInput is ' OR '1'='1, it will return all users // Safe: use parameterized queries const query = 'SELECT * FROM users WHERE name = ?' db.execute(query, [userInput])
Defense Essentials:Defense Essentials:
An attacker tricks a logged-in user into visiting a malicious page, leveraging the user's login state to send requests.An attacker tricks a logged-in user into visiting a malicious page, leveraging the user's login state to send requests.
Defense Essentials:Defense Essentials:
Referer / Origin headersCheck Referer / Origin headersSameSite attribute on cookiesSet SameSite attribute on cookies------
javascript // Whitelist validation: only allow expected formats function isValidEmail(email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) } // Length limits function isValidUsername(name) { return name.length >= 2 && name.length <= 50 }
| Data Type | Protection Measures |
|---|---|
| Passwords | bcrypt/argon2 hashing, never store in plaintext |
| API keys | Environment variables, never commit to code repositories |
| User data | HTTPS transmission, encrypted storage |
| Session tokens | HttpOnly + Secure + SameSite cookies |
CODE Content-Security-Policy: default-src 'self' X-Content-Type-Options: nosniff X-Frame-Options: DENY Strict-Transport-Security: max-age=31536000
------
Before going live, use the interactive component below to check your project's security status:Before going live, use the interactive component below to check your project's security status:
.env file is added to .gitignore[ ] .env file is added to .gitignorenpm audit)[ ] Dependencies are regularly updated (npm audit)------
LLMs can act as your "security consultant" — helping you audit code vulnerabilities and generate security solutions.LLMs can act as your "security consultant" — helping you audit code vulnerabilities and generate security solutions.
> Prompt:> Prompt:
> ```> ```
> Please perform a security audit on the following code, checking for:> Please perform a security audit on the following code, checking for:
> - XSS vulnerabilities (unescaped user input)> - XSS vulnerabilities (unescaped user input)
> - SQL injection (string-concatenated queries)> - SQL injection (string-concatenated queries)
> - CSRF risks (missing token verification)> - CSRF risks (missing token verification)
> - Sensitive data leakage (hardcoded keys, plaintext passwords)> - Sensitive data leakage (hardcoded keys, plaintext passwords)
> For each issue, provide risk level, specific location, and remediation.> For each issue, provide risk level, specific location, and remediation.
>>
> [Paste your code]> [Paste your code]
> ```> ```
> Prompt:> Prompt:
> ```> ```
> My project uses Express.js + PostgreSQL and is about to go live.> My project uses Express.js + PostgreSQL and is about to go live.
> Please generate a complete security configuration checklist, including:> Please generate a complete security configuration checklist, including:
> - HTTP security header configuration code> - HTTP security header configuration code
> - CORS configuration> - CORS configuration
> - Secure database connection settings> - Secure database connection settings
> - Environment variable management solution> - Environment variable management solution
> Provide ready-to-use code snippets.> Provide ready-to-use code snippets.
> ```> ```
> Prompt:> Prompt:
> ```> ```
> Explain the complete flow of a CSRF attack with a concrete example:> Explain the complete flow of a CSRF attack with a concrete example:
> 1. How the attacker constructs the malicious page> 1. How the attacker constructs the malicious page
> 2. Why the browser automatically includes cookies> 2. Why the browser automatically includes cookies
> 3. How the server defends using CSRF tokens> 3. How the server defends using CSRF tokens
> Demonstrate the complete attack and defense process with code.> Demonstrate the complete attack and defense process with code.
> ```> ```
AI security audits cannot replace professional security testing. Treat them as a first-pass screening — critical systems still require professional security team audits.AI security audits cannot replace professional security testing. Treat them as a first-pass screening — critical systems still require professional security team audits.
------
Security is not a one-time task but a habit that runs through the entire development process. It's like wearing a seatbelt when driving — not because you expect an accident, but because it's basic safety awareness. When writing every line of code, ask yourself: what would happen if this input were malicious?Security is not a one-time task but a habit that runs through the entire development process. It's like wearing a seatbelt when driving — not because you expect an accident, but because it's basic safety awareness. When writing every line of code, ask yourself: what would happen if this input were malicious?
------
npm audit to check dependency vulnerabilities and ESLint security plugins to check code.Practical Tools: Use npm audit to check dependency vulnerabilities and ESLint security plugins to check code.