-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathrbac-masterclass-tutorial.html
More file actions
249 lines (212 loc) · 12.9 KB
/
Copy pathrbac-masterclass-tutorial.html
File metadata and controls
249 lines (212 loc) · 12.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RBAC Security Masterclass 🔐</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<!-- Highlight.js for Code Formatting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<style>
:root {
--bg-color: #0b0f19; /* Indigo Dark */
--surface-color: #151828;
--primary-color: #6366f1; /* Indigo */
--primary-glow: rgba(99, 102, 241, 0.4);
--text-main: #f8fafc;
--text-muted: #94a3b8;
--border-color: rgba(255, 255, 255, 0.08);
--card-border: rgba(255, 255, 255, 0.1);
--accent-color: #a5b4fc;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Plus Jakarta Sans', sans-serif;
background-color: var(--bg-color); color: var(--text-main); line-height: 1.6;
background-image:
radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(79, 70, 229, 0.05) 0px, transparent 50%);
background-attachment: fixed; min-height: 100vh;
}
.layout { display: flex; gap: 2.5rem; max-width: 1400px; margin: 0 auto; padding: 3rem 2rem; }
/* Sidebar Styles (Reused) */
.sidebar {
width: 280px; flex-shrink: 0; position: sticky; top: 3rem; max-height: calc(100vh - 6rem); overflow-y: auto;
background: rgba(21, 24, 40, 0.8); border: 1px solid var(--card-border); border-radius: 16px; padding: 1.5rem;
backdrop-filter: blur(12px);
}
.sidebar h3 {
margin-bottom: 1rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1.5px;
color: var(--primary-color); border-bottom: 1px solid var(--card-border); padding-bottom: 1rem;
}
.sidebar ul { list-style: none; }
.sidebar li { margin-bottom: 0.3rem; }
.nav-section {
font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);
margin: 1.5rem 0 0.5rem 0; padding-left: 0.5rem; font-weight: 700;
}
.sidebar a {
text-decoration: none; color: var(--text-muted); display: block; padding: 0.5rem 1rem;
border-radius: 8px; transition: all 0.3s ease; font-size: 0.95rem; font-weight: 500;
}
.sidebar a.active {
background: rgba(99, 102, 241, 0.2); color: #fff; border-left: 3px solid var(--primary-color); border-radius: 4px 8px 8px 4px;
}
.sidebar a:hover:not(.active) { background: rgba(99, 102, 241, 0.15); color: var(--primary-color); transform: translateX(5px); }
.main-content { flex: 1; min-width: 0; }
header { text-align: center; margin-bottom: 3rem; }
h1 {
font-size: 3rem; font-weight: 800; margin-bottom: 1rem;
background: linear-gradient(135deg, var(--primary-color) 0%, #c7d2fe 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 40px var(--primary-glow);
}
.subtitle { font-size: 1.2rem; color: var(--text-muted); }
/* Content Blocks */
.content-card {
background: rgba(21, 24, 40, 0.6); border: 1px solid var(--card-border);
border-radius: 16px; padding: 2.5rem; margin-bottom: 2rem; backdrop-filter: blur(10px);
box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
}
h2 { font-size: 1.8rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; color: #fff; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; }
h3 { font-size: 1.3rem; margin: 1.5rem 0 1rem; color: #e2e8f0; }
p { margin-bottom: 1rem; font-size: 1.1rem; color: #cbd5e1; }
ul { margin-left: 1.5rem; margin-bottom: 1rem; color: #cbd5e1; }
li { margin-bottom: 0.5rem; }
.explanation { background: rgba(99, 102, 241, 0.1); border-left: 4px solid var(--primary-color); padding: 1rem 1.5rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0; }
.explanation p { margin-bottom: 0; color: #e2e8f0; }
pre { background: #010409 !important; border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem !important; margin: 1.5rem 0; overflow-x: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
code { font-family: 'JetBrains Mono', monospace !important; font-size: 0.95rem; line-height: 1.5; }
.diagram { font-family: 'JetBrains Mono', monospace; background: #050505; color: #818cf8; padding: 1.5rem; border-radius: 12px; border: 1px solid var(--primary-color); box-shadow: 0 0 20px rgba(99, 102, 241, 0.1); overflow-x: auto; white-space: pre; line-height: 1.4; margin: 1.5rem 0; font-size: 0.9rem; }
.cta-banner { background: linear-gradient(135deg, var(--primary-color) 0%, #312e81 100%); padding: 3rem 2rem; border-radius: 16px; text-align: center; margin-top: 3rem; }
.cta-banner h2 { border: none; justify-content: center; }
@media (max-width: 900px) {
.layout { flex-direction: column; }
.sidebar { width: 100%; position: relative; top: 0; max-height: none; margin-bottom: 2rem; }
}
</style>
</head>
<body>
<div class="layout">
<!-- Sidebar Navigation -->
<aside class="sidebar">
<h3>🗂️ Tutorials Link</h3>
<nav>
<ul>
<li><a href="index.html">🏠 Home Hub</a></li>
<li class="nav-section">Databases / Lang</li>
<li><a href="mongodb-conditions-tutorial.html">🍃 MongoDB Class</a></li>
<li><a href="redis-masterclass-tutorial.html">🔥 Redis</a></li>
<li><a href="typescript-oops-tutorial.html">📘 TS OOPs</a></li>
<li class="nav-section">Architecture</li>
<li><a href="message-queues-tutorial.html">📨 Message Queues</a></li>
<li><a href="notification-system-tutorial.html">🔔 Notifications</a></li>
<li><a href="worker-threads-tutorial.html">⚙️ Node Workers</a></li>
<li><a href="system-design-tutorial.html">🏗️ Sys Design (Part 1)</a></li>
<li><a href="system-design-part2.html">🚀 Sys Design (Part 2)</a></li>
<li class="nav-section">Security & DevOps</li>
<li><a href="github-masterclass-tutorial.html">🐙 Git & GitHub</a></li>
<li><a href="rbac-masterclass-tutorial.html" class="active">🔐 RBAC & Auth</a></li>
<li><a href="abac-masterclass-tutorial.html">🛡️ ABAC Policies</a></li>
</ul>
</nav>
</aside>
<!-- Main Content -->
<main class="main-content">
<header>
<h1>RBAC Security Masterclass 🔐</h1>
<p class="subtitle">Role-Based Access Control, Middleware Security, Auth vs Autz, & 403 Forbidden scenarios.</p>
</header>
<div class="content-card" id="intro">
<h2>1. Authentication vs Authorization!</h2>
<p>Naye developers hamesha inn dono main confuse hote hain:</p>
<ul>
<li>🛑 <strong>Authentication (401 Unauthorized):</strong> Ye ensure karna k tum "Kaun ho?". Ex: Login Email and Password (Tum verify hogaye, Tum ek legit user ho app me).</li>
<li>🛑 <strong>Authorization (403 Forbidden):</strong> Login tau tumne kar lia, lkn kya main tumhe <code>delete_database</code> wale button per click krne ki <b>Permission</b> du? Us permission ko Authorization / RBAC kehtay hn.</li>
</ul>
<div class="explanation">
<p>👉 Example: Hotel me tum check in hote ho Passport de ke <b>(Authentication)</b>, Phir Receptionist tumhe Room Number 105 ki chabi deti hai jisse tum sirf apne room me ja sakte ho, Manager k room mein nhi! <b>(Authorization / Access Control)</b>.</p>
</div>
</div>
<div class="content-card" id="rbac-basics">
<h2>2. What is RBAC? (Role-Based Access)</h2>
<p>RBAC (Role-Based Access Control) security ki ek technology hai jisme users ko ek 'Tag / Role' diya jata hai. APIs call krne se pehle Node.js server wo Tag parhte hai.</p>
<div class="diagram">
[ User (Role: 'manager') ] ---> GET /api/salaries ---> (Middleware) ---> ✅ ALLOWED!
[ User (Role: 'staff') ] ---> GET /api/salaries ---> (Middleware) ---> ❌ 403 FORBIDDEN!
</div>
</div>
<div class="content-card" id="db-code">
<h2>3. Implementing RBAC Database Schema</h2>
<p>RBAC sabse asaan tab hojata hai jab aap user banate time hi Mongoose/SQL mein Roles assign kar do. Mongoose `enum` properties define karna theek rehta hai:</p>
<pre><code class="language-javascript">const mongoose = require('mongoose');
const userSchema = new mongoose.Schema({
name: { type: String, required: true },
email: { type: String, required: true },
password: { type: String, required: true },
// Yaha roles define hotay hain:
role: {
type: String,
enum: ['user', 'manager', 'admin'],
default: 'user'
}
});
module.exports = mongoose.model('User', userSchema);
</code></pre>
</div>
<div class="content-card" id="middleware">
<h2>4. Crafting the Permissions Middleware</h2>
<p>Ab assume krtay hn k User ne login kar k JWT Token (Auth) receive kar lia hai (jiske ander uski ID aur role stored tha). Ab express routes par permission restrict karne k lie custom higher-order Express Middleware banta hai:</p>
<pre><code class="language-javascript">// auth.middleware.js
const restrictTo = (...allowedRoles) => {
// Ye function doosra function return karta hai taa k hum args pass kr sken middleware me
return (req, res, next) => {
// 1. req.user payload 'auth' middleware se aaya hai (JWT Decode krnay bad)
const currentUserRole = req.user.role;
// 2. Check agar allowedRoles array k ander currentUserRole majood NAHI hai.
if (!allowedRoles.includes(currentUserRole)) {
return res.status(403).json({
error: "Tu admin nahi hai bhai! Tere limits k bahar hai ye kaam."
});
}
// 3. User allowed hai, pass to controller
next();
}
}
module.exports = { restrictTo };
</code></pre>
<h3>Usage in routes.js:</h3>
<pre><code class="language-javascript">const express = require('express');
const router = express.Router();
const { restrictTo } = require('./auth.middleware');
// Public route - Sabhi access kar saktay hn (Jo Login hain)
router.get('/profile', getProfileData);
// Manager route - Sirf manager & admin
router.get('/reports', restrictTo('manager', 'admin'), viewReports);
// Super-secret route
router.delete('/delete-database', restrictTo('admin'), deleteEntireDatabase);
</code></pre>
</div>
<div class="content-card" id="pbac">
<h2>5. Advanced: What is PBAC? 🚀</h2>
<p>Roles akele sometimes fail ho jate hain. Agar 'manager' module X me create krskta hai, lkn Y me sirf parh skta hai. Is barik control ko hum "Permission-based Access Control (PBAC)" kehte hain. Is mein database k andar permissions ka ek pura Matrix (ACL) save krna padta hai na ke sirf 'roles' array.</p>
<ul>
<li><code>permissions: ["CREATE_POST", "DELETE_POST", "READ_USER"]</code></li>
<li>Tum check role ki be-jaae exact permission id verify kartay ho route array k against.</li>
</ul>
</div>
<div class="cta-banner">
<h2 style="color: white">Your APIs are Bulletproof! 🏰</h2>
<p style="color: rgba(255,255,255,0.8); margin-top: 10px; font-weight: bold;">RBAC implement karne k baad hacker agar general JWT le bhi aaen, internal systems parh takk nhi aktay!<br><br>
<strong>Keep Securing Your Clouds! 🚀</strong>
</p>
</div>
</main>
</div>
</body>
</html>