LESSON 27 ยท WEB SECURITY

Web Security ๐Ÿ”’

แŠ แ•แˆŠแŠฌแˆฝแŠ•แˆ…แŠ• แ‹ฐแˆ…แŠ•แАแ‰ฑ แ‰ แ‰ฐแŒ แ‰ แ‰€ แˆแŠ”แ‰ณ แŠ แ‹ตแˆญแŒ!
Hackers แŠฅแŠ•แ‹ณแ‹ญแŒˆแ‰ก โ€” XSSแฃ SQL Injectionแฃ CSRF แˆแˆ‰แŠ•แˆ แŒ แ‰ฅแ‰…!

โœ๏ธ แ‹จแ‰ฐแ‹˜แŒ‹แŒ€แ‹แก @AppMinds_ET ยท EthioCode SoftSelect
01
แ‹‹แŠ“แ‹Žแ‰น แ‹จแ‹ฐแˆ…แŠ•แАแ‰ต แˆตแŒ‹แ‰ถแ‰ฝ โ€” 4 แŒ แˆ‹แ‰ถแ‰ฝ

แŠ แ•แˆŠแŠฌแˆฝแŠ•แˆ…แŠ• แ‰ แˆ˜แˆตแˆ˜แˆญ แˆ‹แ‹ญ แˆตแ‰ณแ‹ˆแŒฃ Hackers แ‹ญแˆžแŠญแˆฉแ‰ณแˆแข แ‹‹แŠ“แ‹Žแ‰น 4 แŒฅแ‰ƒแ‰ถแ‰ฝแŠ• แ‰ฐแˆ›แˆญ โ€” แŠฅแŠ•แ‹ดแ‰ต แŠฅแŠ•แ‹ฐแˆแ‰ตแŠจแˆ‹แŠจแˆแˆ แ‰ฐแˆ›แˆญ!

๐Ÿ’‰
XSS
Cross-Site Scripting โ€” Hacker แ‰ฐแŒ แ‰ƒแˆšแ‹ แ‰ แ‰ฅแˆซแ‹แ‹˜แˆญ แ‹แˆตแŒฅ แŠ แ‹ฐแŒˆแŠ› แˆตแŠญแˆชแ•แ‰ต แ‹ซแˆตแŒˆแ‰ฃแˆ!
โœ… Input แˆ›แŒฝแ‹ณแ‰ต
๐Ÿ”“
SQL Injection
แ‹ˆแ‹ฐ แ‹ณแ‰ณแ‰คแ‹ แŒฅแ‹ซแ‰„ แ‹แˆตแŒฅ แŠ แ‹ฐแŒˆแŠ› SQL แ‹ซแˆตแŒˆแ‰ฃ โ€” แˆแˆ‰แŠ•แˆ แ‹แˆ‚แ‰ฅ แˆŠแ‹ˆแˆตแ‹ต แ‹ญแ‰ฝแˆ‹แˆ!
โœ… Parameterized Query
๐ŸŽญ
CSRF
แ‰ฐแŒ แ‰ƒแˆšแ‹ แˆณแ‹ซแ‹แ‰… แŠ แ‹ฐแŒˆแŠ› แ‰ฐแŒแ‰ฃแˆญ แŠฅแŠ•แ‹ฒแˆแŒฝแˆ แ‹ซแ‹ฐแˆญแŒ‹แˆ!
โœ… CSRF Token
๐Ÿ”จ
Brute Force
แ‹จแ‹ญแˆˆแ แ‰ƒแˆแŠ• แˆแˆ‰แŠ•แˆ แŒฅแˆแˆจแ‰ต แ‰ แˆ˜แˆžแŠจแˆญ แ‰ตแŠญแŠญแˆˆแŠ›แ‹แŠ• แ‹ซแŒˆแŠ›แˆ!
โœ… Rate Limiting
02
XSS โ€” Cross-Site Scripting

XSS แˆ›แˆˆแ‰ต Hacker แŠ แ‹ฐแŒˆแŠ› แˆตแŠญแˆชแ•แ‰ต แ‰ แŠ แ•แˆŠแŠฌแˆฝแŠ•แˆ… แ‹แˆตแŒฅ แ‹ซแˆตแŒˆแ‰ฃแˆแข แˆŒแˆŽแ‰ฝ แ‰ฐแŒ แ‰ƒแˆšแ‹Žแ‰ฝ แŒˆแŒนแŠ• แˆฒแŠจแแ‰ฑ แˆตแŠญแˆชแ•แ‰ฑ แ‹ญแˆฐแˆซแˆ โ€” Cookies แŠฅแŠ“ tokens แˆŠแˆฐแˆญแ‰… แ‹ญแ‰ฝแˆ‹แˆแข

xss-protection.js
// โŒ แˆตแˆ…แ‰ฐแ‰ต โ€” แ‹จแ‰ฐแŒ แ‰ƒแˆš แŒแ‰คแ‰ต แ‰€แŒฅแ‰ณ แ‰ HTML แ‹แˆตแŒฅ แŠ แ‰ณแˆตแŒˆแ‰ฃ!
element.innerHTML = userInput;  // แŠ แ‹ฐแŒˆแŠ›!

// โœ… แ‰ตแŠญแŠญแˆ โ€” textContent แ‰ฐแŒ แ‰€แˆ
element.textContent = userInput;  // แ‹ฐแˆ…แŠ•แАแ‰ฑ แ‰ฐแŒ แ‰ฅแ‰†!

// โœ… Backend แˆ‹แ‹ญ sanitize-html แ“แŠฌแŒ… แ‰ฐแŒ แ‰€แˆ
const clean = sanitizeHtml(userInput);

// โœ… React แˆซแˆฑ แ‹ฐแˆ…แŠ•แАแ‰ฑ แ‰ฐแŒ แ‰ฅแ‰† แАแ‹
// <p>{userInput}</p> โ€” React แ‰ แˆซแˆฑ แ‹ญแŒ แ‰ฅแ‰ƒแˆ!
03
SQL Injection โ€” แ‹ณแ‰ณแ‰คแ‹ แŒฅแ‰ƒแ‰ต

SQL Injection แˆ›แˆˆแ‰ต แ‰ Login แ‰…แŒฝ แ‹แˆตแŒฅ แŠ แ‹ฐแŒˆแŠ› SQL แ‰ แˆ›แˆตแŒˆแ‰ฃแ‰ต แˆแˆ‰แŠ•แˆ แ‹แˆ‚แ‰ฅ แˆ›แ‹แŒฃแ‰ต แ‹ˆแ‹ญแˆ แˆ›แ‰ แˆ‹แˆธแ‰ต แАแ‹แข

sql-injection-fix.js
// โŒ แˆตแˆ…แ‰ฐแ‰ต โ€” String concatenation แ‰ แŒญแˆซแˆฝ แŠ แ‰ตแŒ แ‰€แˆ!
const query = `SELECT * FROM users WHERE email='${email}'`;

// โœ… แ‰ตแŠญแŠญแˆ โ€” Parameterized Query
await db.query('SELECT * FROM users WHERE email = $1', [email]);

// โœ… Prisma แ‹ˆแ‹ญแˆ Mongoose แ‰ฐแŒ แ‰€แˆ (แˆซแˆณแ‰ธแ‹ safe แŠ“แ‰ธแ‹)
await prisma.user.findUnique({ where: { email } });
04
Password Hashing โ€” แ‹จแ‹ญแˆˆแ แ‰ƒแˆ แŒฅแ‰ แ‰ƒ

แ‹จแ‰ฐแŒ แ‰ƒแˆšแ‹Žแ‰ฝ แ‹จแ‹ญแˆˆแ แ‰ƒแˆŽแ‰ฝแŠ• แ‰€แŒฅแ‰ณ แ‰ แ‹ณแ‰ณแ‰คแ‹ แ‹แˆตแŒฅ แŠ แ‰ณแˆตแ‰€แˆแŒฅ! แ‰ แˆแ‰ตแŠฉ **hash** แŠ แ‹ตแˆญแŒแข แŠจแ‰€แ‹ตแˆžแ‹ แŠญแแˆ 17 (Authentication) แ‹แˆตแŒฅ แŠฅแŠ•แ‹ฐแ‰ฐแˆ›แˆญแАแ‹แฃ bcrypt แ‰ฐแŒ แ‰…แˆ˜แˆ… แ‹จแ‹ญแˆˆแ แ‰ƒแˆŽแ‰ฝแŠ• hash แˆ›แ‹ตแˆจแŒ แ‰ แŒฃแˆ แŠ แˆตแˆแˆ‹แŒŠ แАแ‹แข

password-hashing.js
// โœ… แ‰ตแŠญแŠญแˆˆแŠ› แˆ˜แŠ•แŒˆแ‹ต โ€” bcrypt แ‰ฐแŒ แ‰€แˆ
const bcrypt = require('bcrypt');

// แ‹จแ‹ญแˆˆแ แ‰ƒแˆ hash แˆ›แ‹ตแˆจแŒ
const saltRounds = 10;
const hashedPassword = await bcrypt.hash(password, saltRounds);

// แ‹จแ‹ญแˆˆแ แ‰ƒแˆ แˆ›แ‹ˆแ‹ณแ‹ฐแˆญ
const isMatch = await bcrypt.compare(inputPassword, hashedPassword);
05
Security Checklist โ€” แ‹จแ‹ฐแˆ…แŠ•แАแ‰ต แแ‰ฐแˆป แ‹แˆญแ‹แˆญ

แŠ แ•แˆŠแŠฌแˆฝแŠ•แˆ…แŠ• แŠจแˆ›แ‰ฐแŒฃแŒฃแ‰ แ‰ แŠแ‰ต แ‹ญแˆ…แŠ• แ‹แˆญแ‹แˆญ แˆ™แˆ‰ แ‰ แˆ™แˆ‰ แˆแ‰ตแˆฝ!

โœ“
HTTPS แ‰ฐแŒ แ‰€แˆ

HTTP = แŠญแแ‰ต แŒฝแˆ‘แ โ€” แˆแˆ‰แˆ แАแŒˆแˆญ แ‹ญแ‰ณแ‹ซแˆ! HTTPS = แ‹จแ‰ฐแˆ˜แˆฐแŒ แŒ  โ€” Let's Encrypt แАแƒ แАแ‹!

โœ“
แ‹จแ‹ญแˆˆแ แ‰ƒแˆŽแ‰ฝแŠ• Hash แŠ แ‹ตแˆญแŒ

bcrypt.hash(password, 10) โ€” แ‰€แŒฅแ‰ณ แ‰ แ‹ณแ‰ณแ‰คแ‹ แŠ แ‰ณแˆตแ‰€แˆแŒฅ! (แŠญแแˆ 17 แ‹แˆตแŒฅ แ‰ฐแˆแˆจแŠ“แˆ)

โœ“
แŒแ‰คแ‰ต แˆ›แˆจแŒ‹แŒˆแŒซ

แ‹จแ‰ฐแŒ แ‰ƒแˆš แŒแ‰คแ‰ต แˆแˆ‰แŠ•แˆ validate แŠ แ‹ตแˆญแŒ! Zod แ‹ˆแ‹ญแˆ Joi แ‰ฐแŒ แ‰€แˆ!

โœ“
Rate Limiting

15 แ‹ฐแ‰‚แ‰ƒ แ‹แˆตแŒฅ 100 แŒฅแ‹ซแ‰„แ‹Žแ‰ฝ แ‰ฅแ‰ป! Brute force แ‹ญแŠจแˆˆแŠจแˆ‹แˆ!

โœ“
Helmet.js

npm install helmet โ€” แŠ แŠ•แ‹ต แˆ˜แˆตแˆ˜แˆญ!

โœ“
แˆšแˆตแŒฅแˆฎแ‰ฝแŠ• แ‰  .env แ‹แˆตแŒฅ แŠ แˆตแ‰€แˆแŒฅ

API keysแฃ passwords โ€” .env แ‹แˆตแŒฅ แ‰ฅแ‰ป! .gitignore แŠ แ‰ตแˆญแˆณ!

06
Live Security Tester
๐Ÿ”’ Security Playground
๐Ÿ’‰ XSS Test
๐Ÿ”‘ Password Strength
๐Ÿ“‹ Security Headers

XSS attack แˆžแŠญแˆญ โ€” Bad vs Good method แ‹ซแˆณแ‹ซแˆ!

โ† Test แ‰แˆแ แŒซแŠ•

Password strength แแ‰ฐแˆป โ€” แŒ แŠ•แŠซแˆซ password แˆแŠ• แ‹“แ‹ญแАแ‰ฑ แАแ‹?

โ† Password แŒปแ
โ—‹ แ‰ขแ‹ซแŠ•แˆต 8 แŠแ‹ฐแˆ‹แ‰ต
โ—‹ แ‰ขแ‹ซแŠ•แˆต แŠ แŠ•แ‹ต แ‰แŒฅแˆญ
โ—‹ แ‰ขแ‹ซแŠ•แˆต แŠ แŠ•แ‹ต แ‰ตแˆแ‰… แŠแ‹ฐแˆ
โ—‹ แ‰ขแ‹ซแŠ•แˆต แŠ แŠ•แ‹ต special char (!@#$)

Helmet.js แˆแŠ• HTTP Security headers แ‹ญแŒจแˆแˆซแˆ?

X-Content-Type-Options: nosniff
Browser แŠ• MIME type sniff แ‹ซแˆˆ แ‹ซแ‹ณแŠ“แˆ
X-Frame-Options: DENY
Clickjacking โ€” iframe แ‹แˆตแŒฅ แˆ›แˆณแ‹จแ‰ต แ‹ญแŠจแˆˆแŠญแˆ‹แˆ
Content-Security-Policy
แˆแŠ• scripts/styles แ‹ญแˆแ‰€แ‹ณแˆ‰ แ‹ญแ‹ˆแˆตแŠ“แˆ โ€” XSS แ‹ญแ‰€แŠ•แˆณแˆ
Strict-Transport-Security
HTTPS แ‰ฅแ‰ป แ‹ญแŒ แ‰€แˆ™ โ€” HTTP แŠ• redirect แ‹ซแ‹ฐแˆญแŒ‹แˆ
07
แ‹‹แŠ“ แ‹‹แŠ“ แАแŒฅแ‰ฆแ‰ฝ
1
๐Ÿ’‰ XSS โ€” Input แŠ• Sanitize แŠ แ‹ตแˆญแŒ

แ‹จแ‰ฐแŒ แ‰ƒแˆš แŒแ‰คแ‰ต แ‰€แŒฅแ‰ณ innerHTML แŠ แ‰ณแ‹‰แˆ! React แ‰ฐแŒ แ‰€แˆ โ€” แˆซแˆฑ safe แАแ‹!

2
๐Ÿ”“ SQL Injection โ€” Parameterized Queries

String concatenation แ‰ แŒญแˆซแˆฝ แŠ แ‰แˆ! Prisma แ‹ˆแ‹ญแˆ Mongoose แ‰ฐแŒ แ‰€แˆ!

3
๐Ÿ”’ Password Hashing

แ‹จแ‹ญแˆˆแ แ‰ƒแˆŽแ‰ฝแŠ• แ‰€แŒฅแ‰ณ แ‰ แ‹ณแ‰ณแ‰คแ‹ แŠ แ‰ณแˆตแ‰€แˆแŒฅ! bcrypt.hash(password, 10) แ‰ฐแŒ แ‰€แˆ!

4
โฑ๏ธ Rate Limiting โ€” Brute Force แŠ แ‰แˆ

express-rate-limit แ‰ฐแŒ แ‰€แˆ โ€” Hackers แ‰ แˆซแˆต-แˆฐแˆญ แ‹ญแ‰ณแŒˆแ‹ณแˆ‰!

5
๐Ÿ”‘ Secrets แŠ• .env แ‹แˆตแŒฅ แŠ แˆตแ‰€แˆแŒฅ

API keys แŠฅแŠ“ passwords โ€” .env แ‹แˆตแŒฅ แ‰ฅแ‰ป! แ‰ GitHub แŠ แ‰ตแŒซแŠ•!

08
Quiz
โ“ SQL Injection แŠ• แˆˆแˆ›แ‰†แˆ แˆแŠ• แ‹˜แ‹ด แ‰ตแŒ แ‰€แˆ›แˆˆแˆ…?
What prevents SQL Injection attacks?
AUser input แŠ• toLowerCase() แ‹ซแ‹ตแˆญแŒ‰
BParameterized Queries / Prisma / Mongoose โœ…
CHTTPS แŠ• แ‰ฐแŒ แ‰€แˆ™
DRate Limiting แŠ• แ‰ฐแŒ แ‰€แˆ™