🔐 Angular Security – Auth, Roles & sichere APIs richtig gemacht

Sicherheit ist kein Add-on – sie muss von Anfang an mitgedacht werden.
Gerade bei Angular Apps mit Auth, Backend-Zugriffen & Rollen brauchst du eine klare Security-Strategie.

🧱 1. Authentifizierung: Was du brauchst

Option 1: OAuth2 / OIDC

• Keycloak, Auth0, Azure AD
• Angeschlossen via @auth0/angular-jwt oder eigener Interceptor

Option 2: JWT Auth + API Gateway

• Login liefert JWT (per Authorization: Bearer)
• Angular speichert im Memory oder sessionStorage
• Interceptor sendet Token mit jedem Request

intercept(req, next) {
  const token = localStorage.getItem('token');
  const authReq = req.clone({
    headers: req.headers.set('Authorization', `Bearer ${token}`)
  });
  return next.handle(authReq);
}

👥 2. Rollen & Rechte im Frontend

@Injectable({ providedIn: 'root' })
export class AuthService {
  private role = signal<'user' | 'admin'>('user');

  isAdmin = computed(() => this.role() === 'admin');
}

Oder per @Input():

<app-admin-panel *ngIf="auth.isAdmin()"></app-admin-panel>

➡ Keine Business-Logik im Template – nur Darstellung steuern

🔐 3. Guards für geschützte Routen

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  canActivate(): boolean {
    return !!localStorage.getItem('token');
  }
}

{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }

🔄 4. CSRF, XSS, CORS – das musst du tun

✅ CSRF: Token-basierte Auth statt Cookies
✅ XSS: Keine innerHTML, DomSanitizer verwenden
✅ CORS: Nur von sicheren Domains zulassen – über Backend/API-Gateway regeln

🧪 5. Testing & Auditing

• Automatisierte Security Tests (OWASP ZAP, npm audit, Snyk)
• E2E-Tests mit autorisierten & nicht autorisierten Nutzern
• Linter-Regeln für unsafe Patterns (z. B. no-inner-html)

✅ Fazit

Sichere Angular-Apps bedeuten:

• Kontrolle über Auth-Flows & Tokens
• Gekapselte Rollenlogik
• Sauberes Setup mit Guards & Interceptors

Sicherheit ist kein Sprint – sondern ein Standard.

📍 Bald im Blog: 🚀 Nx Monorepo Deep Dive – Das volle Power-Setup für Teams