Backend_Structure/abac-masterclass-tutorial.html at main · brijeshkrverma/Backend_Structure · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ABAC 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: #0b1716; /* Dark Teal */
            --surface-color: #112322;
            --primary-color: #0d9488; /* Teal */
            --primary-glow: rgba(13, 148, 136, 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: #5eead4;
        }

        * { 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(13, 148, 136, 0.15) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(20, 184, 166, 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(17, 35, 34, 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(13, 148, 136, 0.2); color: #fff; border-left: 3px solid var(--primary-color); border-radius: 4px 8px 8px 4px;
        }
        .sidebar a:hover:not(.active) { background: rgba(13, 148, 136, 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%, #99f6e4 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(17, 35, 34, 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(13, 148, 136, 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: #5eead4; padding: 1.5rem; border-radius: 12px; border: 1px solid var(--primary-color); box-shadow: 0 0 20px rgba(13, 148, 136, 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%, #115e59 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">🔐 RBAC & Auth</a></li>
                    <li><a href="abac-masterclass-tutorial.html" class="active">🛡️ ABAC Policies</a></li>
                </ul>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <header>
                <h1>ABAC Security Masterclass 🛡️</h1>
                <p class="subtitle">Attribute-Based Access Control, Contextual Security, and beyond Static Roles.</p>
            </header>

            <div class="content-card" id="intro">
                <h2>1. Why RBAC Fails Sometimes?</h2>
                <p>RBAC mein hum sirf "Role" (user vs admin) dekhtay hain. Lekin man lo tumhari Social Media app me ek requirement aati hai:</p>
                <ul>
                    <li>🛑 <em>"Ek regular 'user' sirf APNI post Edit kar sakta hai, kisi aur ki nahi!"</em></li>
                </ul>
                <div class="explanation">
                    <p>👉 Agar hum sirf RBAC dekhen, toh user ke pss 'edit_post' permission hogi, tou wo sabki posts edit krdeta. Ye masla hal karne ke liye humein <strong>ABAC (Attribute-Based Access Control)</strong> use karna parta hai, jahan DB ki properties match ki jati hain.</p>
                </div>
            </div>

            <div class="content-card" id="pillars">
                <h2>2. The 4 Pillars of ABAC</h2>
                <p>ABAC Boolean conditions aur IF statements pe depend krta hai jo in 4 chizon se mil kar banti hai:</p>

                <div class="diagram">
1. Subject Attributes : User ki properties (Id, Department, Clearance Level)
2. Resource Attributes: Data (Post / File) ki properties (authorId, isConfidential, Status)
3. Action Attributes  : Kya karna chahta hai (GET, PUT, DELETE)
4. Environment attr   : Waqt aur halaat (Time: 9AM to 5PM, IP: 192.x, Location: India)
                </div>

                <p><em>Example ABAC Policy: </em><br>
                <b>ALLOW Subject</b> (Role=User)<br>
                <b>TO Action</b> (EDIT)<br>
                <b>ON Resource</b> (Post)<br>
                <b>IF</b> (Subject.id == Resource.authorId AND Environment.time == 'WorkingHours')</p>
            </div>

            <div class="content-card" id="code">
                <h2>3. Coding ABAC in Node.js</h2>
                <p>Custom ABAC middleware ya inline controller logic us waqt trigger hoti hai jab database se actual 'Resource' nikal kar aati hai.</p>

<pre><code class="language-javascript">const updatePost = async (req, res) => {
    // 1. Get the Document (Resource)
    const post = await Post.findById(req.params.postId);

    if (!post) return res.status(404).send('Post not found');

    // 2. Perform ABAC Checks (Policies)
    const isOwner = post.authorId.toString() === req.user.id;
    const isAdmin = req.user.role === 'admin';
    const isWorkingHours = new Date().getHours() >= 9 && new Date().getHours() <= 17;

    // 3. Make Decision
    if (!isOwner && !isAdmin) {
        return res.status(403).json({ error: "ABAC: Tum is post ke owner nahi ho!" });
    }

    if (!isWorkingHours) {
        return res.status(403).json({ error: "ABAC: You can only edit posts during office hours!" });
    }

    // 4. Sab clear hai, ab Update kardo
    post.content = req.body.content;
    await post.save();

    res.json({ success: true, post });
};
</code></pre>
            </div>

            <div class="content-card" id="casbin">
                <h2>4. Ready-made ABAC Libraries (Casbin / CASL)</h2>
                <p>Enterprise applications jisme hazaron data policies hon wahan hum manual IF statements nahi likhtay balke dedicated Policy Engines istamaal krte hn:</p>
                <ul>
                    <li>✨ <strong>CASL (Isomorphic Auth):</strong> Frontend React aur Backend Node js me same restrictions share krne k lie Javascript ki behtreen library. Iski conditions object style hoti hain <code>{ authorId: user.id }</code></li>
                    <li>✨ <strong>Casbin:</strong> Ek heavy duty multi-language authorization library jo `.conf` aur `.csv` files me policy matrix maintain krti hai. Isy banking apps me bht use krtay hn.</li>
                    <li>✨ <strong>AWS IAM:</strong> Amazon Web Services khud apne security roles me basically pure ABAC JSON policies use karta hai (e.g. EC2 instance sirf uss subnet me on ho jo tag 'Production' rakhti ho).</li>
                </ul>
            </div>

            <div class="cta-banner">
                <h2 style="color: white">Zero-Trust Secured! 🔓</h2>
                <p style="color: rgba(255,255,255,0.8); margin-top: 10px; font-weight: bold;">RBAC gives you broad brushes, but ABAC gives you microscopic control!<br><br>
                    <strong>Build Fort Knox level security! 🏦</strong>
                </p>
            </div>
        </main>
    </div>
</body>
</html>