Add Permission Article

WebDevSimplified · WebDevSimplified · commit 08ba99502168 · 2025-11-03T10:51:06.000-06:00
diff --git a/public/articleAssets/2025-11/rbac-vs-abac/abac-diagram.svg b/public/articleAssets/2025-11/rbac-vs-abac/abac-diagram.svg
@@ -0,0 +1,78 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 480">
+  <defs>
+    <style>
+      .label { font: 16px sans-serif; fill: #374151; }
+      .sublabel { font: 14px sans-serif; fill: #6b7280; }
+      .box { fill: var(--color-blue-light); stroke: var(--color-blue); stroke-width: 2; }
+      .user { fill: var(--color-yellow-light, hsl(41, 100%, 88%)); stroke: var(--color-orange); stroke-width: 2; }
+      .resource { fill: var(--color-green-light, hsl(158, 78%, 82%)); stroke: var(--color-green); stroke-width: 2; }
+      .policy { fill: var(--color-red-light, hsl(350, 100%, 94%)); stroke: var(--color-red); stroke-width: 2; }
+      .env { fill: var(--color-purple-light, hsl(269, 79%, 90%)); stroke: var(--color-purple); stroke-width: 2; }
+      .arrow { fill: none; stroke: #6b7280; stroke-width: 2; marker-end: url(#arrowhead); }
+    </style>
+    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#6b7280" />
+    </marker>
+  </defs>
+
+  <!-- Subject Attributes -->
+  <g transform="translate(30, 20)">
+    <rect class="user" width="180" height="120" rx="8" />
+    <text x="90" y="25" text-anchor="middle" class="label">Subject Attributes</text>
+    <text x="90" y="48" text-anchor="middle" class="sublabel">User ID: alice</text>
+    <text x="90" y="66" text-anchor="middle" class="sublabel">Role: editor</text>
+    <text x="90" y="84" text-anchor="middle" class="sublabel">Department: eng</text>
+    <text x="90" y="102" text-anchor="middle" class="sublabel">Clearance: 3</text>
+  </g>
+
+  <!-- Resource Attributes -->
+  <g transform="translate(30, 180)">
+    <rect class="resource" width="180" height="120" rx="8" />
+    <text x="90" y="25" text-anchor="middle" class="label">Resource Attributes</text>
+    <text x="90" y="48" text-anchor="middle" class="sublabel">Type: document</text>
+    <text x="90" y="66" text-anchor="middle" class="sublabel">Owner: bob</text>
+    <text x="90" y="84" text-anchor="middle" class="sublabel">Department: eng</text>
+    <text x="90" y="102" text-anchor="middle" class="sublabel">Locked: false</text>
+  </g>
+
+  <!-- Environment Attributes -->
+  <g transform="translate(30, 340)">
+    <rect class="env" width="180" height="100" rx="8" />
+    <text x="90" y="25" text-anchor="middle" class="label">Environment</text>
+    <text x="90" y="48" text-anchor="middle" class="sublabel">Time: 2PM</text>
+    <text x="90" y="66" text-anchor="middle" class="sublabel">Day: Tuesday</text>
+    <text x="90" y="84" text-anchor="middle" class="sublabel">Location: Office</text>
+  </g>
+
+  <!-- Policy Engine -->
+  <g transform="translate(300, 120)">
+    <rect class="policy" width="280" height="190" rx="8" />
+    <text x="140" y="30" text-anchor="middle" class="label">Policy Engine</text>
+
+    <rect x="20" y="45" width="240" height="30" rx="4" fill="#fff" stroke="#ec4899" />
+    <text x="140" y="65" text-anchor="middle" class="sublabel">IF user.role = "admin" → ALLOW</text>
+
+    <rect x="20" y="85" width="240" height="30" rx="4" fill="#fff" stroke="#ec4899" />
+    <text x="140" y="105" text-anchor="middle" class="sublabel">IF resource.locked → DENY</text>
+
+    <rect x="20" y="125" width="240" height="50" rx="4" fill="#fff" stroke="#ec4899" />
+    <text x="140" y="145" text-anchor="middle" class="sublabel">IF user.dept = resource.dept</text>
+    <text x="140" y="165" text-anchor="middle" class="sublabel">AND env.day != weekend → ALLOW</text>
+  </g>
+
+  <!-- Decision -->
+  <g transform="translate(690, 180)">
+    <rect width="180" height="100" rx="8" fill="#dcfce7" stroke="#16a34a" stroke-width="3" />
+    <text x="90" y="40" text-anchor="middle" class="label">Decision</text>
+    <text x="90" y="65" text-anchor="middle" style="font: bold 20px sans-serif; fill: #16a34a;">
+      ALLOW</text>
+    <text x="90" y="85" text-anchor="middle" class="sublabel">Edit Document</text>
+  </g>
+
+  <!-- Arrows -->
+  <path class="arrow" d="M 210 80 L 300 180" />
+  <path class="arrow" d="M 210 240 L 300 240" />
+  <path class="arrow" d="M 210 390 L 300 300" />
+
+  <path class="arrow" d="M 580 230 L 690 220" />
+</svg>
diff --git a/public/articleAssets/2025-11/rbac-vs-abac/rbac-diagram.svg b/public/articleAssets/2025-11/rbac-vs-abac/rbac-diagram.svg
@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 390">
+  <defs>
+    <style>
+      .label { font: 16px sans-serif; fill: #374151; }
+      .sublabel { font: 14px sans-serif; fill: #6b7280; }
+      .box { fill: #dbeafe; stroke: #3b82f6; stroke-width: 2; }
+      .user { fill: #fef3c7; stroke: #f59e0b; stroke-width: 2; }
+      .arrow { fill: none; stroke: #6b7280; stroke-width: 2; marker-end: url(#arrowhead); }
+    </style>
+    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#6b7280" />
+    </marker>
+  </defs>
+
+  <!-- Users -->
+  <g transform="translate(50, 10)">
+    <rect class="user" width="140" height="83" rx="8" />
+    <text x="70" y="30" text-anchor="middle" class="label">User</text>
+    <text x="70" y="50" text-anchor="middle" class="sublabel">Alice</text>
+    <text x="70" y="66" text-anchor="middle" class="sublabel">Role: Admin</text>
+  </g>
+
+  <g transform="translate(50, 130)">
+    <rect class="user" width="140" height="83" rx="8" />
+    <text x="70" y="30" text-anchor="middle" class="label">User</text>
+    <text x="70" y="50" text-anchor="middle" class="sublabel">Bob</text>
+    <text x="70" y="66" text-anchor="middle" class="sublabel">Role: Editor</text>
+  </g>
+
+  <g transform="translate(50, 250)">
+    <rect class="user" width="140" height="83" rx="8" />
+    <text x="70" y="30" text-anchor="middle" class="label">User</text>
+    <text x="70" y="50" text-anchor="middle" class="sublabel">Charlie</text>
+    <text x="70" y="66" text-anchor="middle" class="sublabel">Role: Viewer</text>
+  </g>
+
+  <!-- Roles with Permissions -->
+  <g transform="translate(300, 10)">
+    <rect class="box" width="200" height="140" rx="8" />
+    <text x="100" y="28" text-anchor="middle" class="label">Admin Role</text>
+    <text x="20" y="50" text-anchor="start" class="sublabel">✓ Read Articles</text>
+    <text x="20" y="67" text-anchor="start" class="sublabel">✓ Create Articles</text>
+    <text x="20" y="84" text-anchor="start" class="sublabel">✓ Edit Articles</text>
+    <text x="20" y="101" text-anchor="start" class="sublabel">✓ Delete Articles</text>
+    <text x="20" y="118" text-anchor="start" class="sublabel">✓ Manage Users</text>
+  </g>
+
+  <g transform="translate(300, 165)">
+    <rect class="box" width="200" height="107" rx="8" />
+    <text x="100" y="28" text-anchor="middle" class="label">Editor Role</text>
+    <text x="20" y="50" text-anchor="start" class="sublabel">✓ Read Articles</text>
+    <text x="20" y="67" text-anchor="start" class="sublabel">✓ Create Articles</text>
+    <text x="20" y="84" text-anchor="start" class="sublabel">✓ Edit Articles</text>
+  </g>
+
+  <g transform="translate(300, 287)">
+    <rect class="box" width="200" height="73" rx="8" />
+    <text x="100" y="30" text-anchor="middle" class="label">Viewer Role</text>
+    <text x="20" y="52" text-anchor="start" class="sublabel">✓ Read Articles</text>
+  </g>
+
+  <!-- Arrows -->
+  <path class="arrow" d="M 190 50 L 300 75" />
+  <path class="arrow" d="M 190 170 L 300 215" />
+  <path class="arrow" d="M 190 290 L 300 320" />
+</svg>
diff --git a/public/articleAssets/2025-11/rbac-vs-abac/rebac-diagram.svg b/public/articleAssets/2025-11/rbac-vs-abac/rebac-diagram.svg
@@ -0,0 +1,81 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 420">
+  <defs>
+    <style>
+      .label { font: 16px sans-serif; fill: #374151; }
+      .sublabel { font: 13px sans-serif; fill: #6b7280; }
+      .user { fill: #fef3c7; stroke: #f59e0b; stroke-width: 2; }
+      .resource { fill: #d1fae5; stroke: #10b981; stroke-width: 2; }
+      .folder { fill: #dbeafe; stroke: #3b82f6; stroke-width: 2; }
+      .policy { fill: #fce7f3; stroke: #ec4899; stroke-width: 2; }
+      .relation { fill: none; stroke: #6b7280; stroke-width: 2.5; }
+      .arrow { fill: none; stroke: #6b7280; stroke-width: 2; marker-end: url(#arrowhead); }
+      .inherit { fill: none; stroke: #9ca3af; stroke-width: 2; stroke-dasharray: 5,5; }
+    </style>
+    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#6b7280" />
+    </marker>
+  </defs>
+
+  <!-- Users -->
+  <g transform="translate(50, 30)">
+    <circle class="user" cx="50" cy="50" r="45" />
+    <text x="50" y="45" text-anchor="middle" class="label">Alice</text>
+    <text x="50" y="62" text-anchor="middle" class="sublabel">(Owner)</text>
+  </g>
+
+  <g transform="translate(50, 160)">
+    <circle class="user" cx="50" cy="50" r="45" />
+    <text x="50" y="45" text-anchor="middle" class="label">Charlie</text>
+    <text x="50" y="62" text-anchor="middle" class="sublabel">(Viewer)</text>
+  </g>
+
+  <g transform="translate(50, 290)">
+    <circle class="user" cx="50" cy="50" r="45" />
+    <text x="50" y="45" text-anchor="middle" class="label">David</text>
+    <text x="50" y="62" text-anchor="middle" class="sublabel">(Doc Editor)</text>
+  </g>
+
+  <!-- Folder -->
+  <g transform="translate(300, 30)">
+    <rect class="folder" width="200" height="100" rx="8" />
+    <text x="100" y="35" text-anchor="middle" class="label">Folder</text>
+    <text x="100" y="55" text-anchor="middle" class="sublabel">Engineering</text>
+    <text x="100" y="75" text-anchor="middle" class="sublabel">Owner: Alice</text>
+  </g>
+
+  <!-- Document -->
+  <g transform="translate(300, 250)">
+    <rect class="resource" width="200" height="100" rx="8" />
+    <text x="100" y="35" text-anchor="middle" class="label">Document</text>
+    <text x="100" y="55" text-anchor="middle" class="sublabel">doc-1</text>
+    <text x="100" y="75" text-anchor="middle" class="sublabel">Inside Engineering</text>
+  </g>
+
+  <!-- Relationships to Folder -->
+  <path class="arrow" d="M 145 80 L 300 80">
+    <title>owner</title>
+  </path>
+
+  <path class="arrow" d="M 145 210 L 300 110">
+    <title>viewer</title>
+  </path>
+
+  <!-- Folder contains Document -->
+  <path class="inherit" d="M 400 130 L 400 250">
+    <title>parent</title>
+  </path>
+
+  <!-- David direct editor on document -->
+  <path class="arrow" d="M 145 340 L 300 330">
+    <title>editor</title>
+  </path>
+
+  <!-- Inherited permissions annotations -->
+  <g transform="translate(530, 250)">
+    <rect class="policy" width="240" height="100" rx="8" />
+    <text x="120" y="25" text-anchor="middle" class="label">Access Rules</text>
+    <text x="10" y="48" class="sublabel">• Alice: owner of folder → edit doc</text>
+    <text x="10" y="68" class="sublabel">• Charlie: viewer of folder → view doc</text>
+    <text x="10" y="88" class="sublabel">• David: editor of doc → edit doc</text>
+  </g>
+</svg>
diff --git a/src/pages/2025-11/rbac-vs-abac/index.mdx b/src/pages/2025-11/rbac-vs-abac/index.mdx
