Securing Blazor Client-side Applications
GETTING STARTED WITH AUTHENTICATION IN BLAZOR WEBASSEMBLY
Kevin Dockx ARCHITECT @KevinDockx https://www.kevindockx.com This bullet list with animations
Course prerequisites and tooling Coming Up Blazor authentication scenarios Blazor WASM hosting modes Securing the client application - Logging in and out - Creating users - Protecting the API This slide is with animations
Discussion tab on the course page Twitter: @KevinDockx
(course shown is one of my other courses, not this one) Course Prerequisites
Good knowledge of C# Knowledge of Blazor WASM
Course tip: Blazor: Getting Started (Gill Cleeren) Frameworks and Tooling
Visual Studio 2019 .NET Core 3.1 v16.4 or better Frameworks and Tooling
Visual Studio 2019 Visual Studio Visual Studio for JetBrains Rider v16.4 or better Code Mac This slide is with animations
Exercise files tab on the course page
(course shown is one of my other courses, not this one) Blazor Authentication Scenarios
Blazor WASM (WebAssembly) Blazor Server Blazor WASM
Compiled .NET Core assemblies & runtime downloaded to browser
WebAssembly bootstraps & configures runtime
JavaScript interop to handle (image by Microsoft, https://bit.ly/2NKq1U8) DOM manipulation & API Calls Blazor Server
Razor components hosted on the server in an ASP.NET Core application
UI updates handled over SignalR connection (also used for JavaScript interop calls)
Runtime handles sending UI events from browser to server (image by Microsoft, https://bit.ly/2NKq1U8) and applies UI updates sent by server to client Blazor WASM
Runs on the client thus cannot be trusted
Any authorization check can be bypassed
Focus is on securing the API Blazor Server
Runs on the server thus can be trusted
Authorization checks can be enforced, access rules can be implemented
Securing the API is still a focus point This bullet list with animations
Demo
Introducing the demo application Security Scenarios for a Blazor WASM Application
Token-based security with OAuth2 SameSite cookies and OpenID Connect This slide is with animations
The WASM team settled on tokens Security - No CSRF protection required for server endpoints Scenarios for - Tokens have narrower permissions a Blazor - Tokens tend to have shorter lifetimes WASM and can potentially be revoked - The same authentication and Application authorization principles can be used for hosted and standalone applications WASM Hosting Modes
Hosted WASM approach Standalone approach WASM hosted on ASP.NET Core backend WASM hosted on a regular HTML page Backend (API) can be built in whichever technology you choose, and can be hosted anywhere WASM Hosting Modes
Hosted Standalone
Could in theory be secured with Cannot be secured with SameSite SameSite cookies cookies
Can be secured with token-based Can be secured with token-based security security WASM Hosting Modes
Identity provider User management Generates tokens Custom or based on ASP.NET Core Identity Implements OAuth2/OIDC protocols WASM Hosting Modes
Hosted Standalone
Could in theory be secured with Cannot be secured with SameSite SameSite cookies cookies
Can be secured with token-based Can be secured with token-based security security Identity provider and ASP.NET Core Identity provider is a separate Identity are integrated in the backend component which optionally is that hosts the WASM app integrated with ASP.NET Core Identity Useful when you need a self-contained Useful when you have multiple solution applications that deal with the same set of users This bullet list with animations
Demo
Inspecting the default authentication template This slide is with animations
OAuth2 and If you’re completely new to OAuth2/OIDC - Securing ASP.NET Core 3 with OAuth2 OpenID and OpenID Connect (yours truly) Connect in We’re focusing on specifics related to Blazor WASM Blazor WASM applications This slide is with animations
The identity provider (IDP) will be OAuth2 and responsible for providing OpenID - Proof of authentication - Proof of authorization Connect in Blazor WASM to the Blazor application Users will prove who they are at IDP level To ke n -based Authentication with Blazor
Identity token Access token Represents proof of identity Represents consent Used at client level Passed from the client to the API, used at API level Common Token Concerns
Expiration Token signing and Token format validation
Authentication and Securely delivering … authorization tokens to different application types OAuth2 OAuth2 is an open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications This slide is with animations
OAuth2 for OAuth2 defines how our Blazor application can securely achieve authorization Blazor To that avail, our Blazor application can Applications request an access token This slide is with animations
Not all applications are created equal OAuth2 for - For example: not all application types can safely store secrets Blazor OAuth2 defines how different types of Applications applications can securely get such a token from the IDP through different flows OpenID Connect OpenID Connect is a simple identity layer on top of the OAuth2 protocol This slide is with animations
A client application can request an identity OpenID token (next to an access token) Connect for That identity token is used to extract user Blazor information from (client-side apps) or sign in to the client application (server-side Applications apps) This slide is with animations
IdentityServer4 - http://docs.identityserver.io/ IdentityServer4 is an OpenID Connect and OAuth2 framework for ASP.NET Core - Part of the .NET Foundation This bullet list with animations
Demo
Integrating IdentityServer This slide is with animations
Identity providers need to authenticate User users Management - Requires access to a user DB (or another with ASP.NET way of achieving the same) Core Identity Most systems require some form of user management ASP.NET Core Identity A membership system that support user interface login functionality This bullet list with animations
Demo
Integrating ASP.NET Core Identity This slide is with animations
Configuring We need to configure the client application and Integrating at level of the identity provider the Client We need to implement part of the flow at Application level of the client application OpenID Connect Flow A set of requests and corresponding responses that eventually result in an identity and/or access token that is or are safely delivered to the client application This slide is with animations
The flow to use can depend on multiple factors, including the type of client (eg: Configuring where it lives) and Integrating Best practice the Client - https://bit.ly/3fpEm3P Application - At the moment of recording, for Blazor WASM apps: code flow with PKCE protection, without client authentication Code Flow with PKCE Protection
Client application IDP (relying party) create code_verifier
hash (SHA256)
code_challenge authentication request + code_challenge authorization endpoint store code_challenge
user authenticates
(user gives consent) code code
token request (code, code_verifier) token endpoint Code Flow with PKCE Protection
Client application IDP (relying party)
token request (code, code_verifier) token endpoint
hash code_verifier
check if it matches the stored code_challenge
id_token id_token token is validated This bullet list with animations
Demo
Configuring and integrating the client application This slide is with animations
Protecting the The API should expect a valid access token to be passed through, by the client, on API each request to it Code Flow with PKCE Protection
Client application IDP (relying party) create code_verifier
hash (SHA256)
code_challenge authentication request + code_challenge authorization endpoint store code_challenge
user authenticates
(user gives consent) code code
token request (code, code_verifier) token endpoint Code Flow with PKCE Protection
Client application IDP (relying party)
token request (code, code_verifier) token endpoint
hash code_verifier
check if it matches the stored code_challenge
id_token, access token id_token, access token token is validated
access_token (as Bearer token in Authorization header) Code Flow with PKCE Protection
IDP API
token request (code, code_verifier) token endpoint
hash code_verifier
check if it matches the stored code_challenge id_token, access token
(as Bearer token in Authorization header) access token is validated This bullet list with animations
Demo
Protecting the API This bullet list with animations
Summary In regards to security, code that lives on the client cannot be blocked from executing (contrary to code that lives on the server) The hosting mode impacts how you’d secure your application This bullet list with animations
Summary Hosted mode - WASM hosted on ASP.NET Core backend - IDP and ASP.NET Core Identity integrated in the backend - Useful if you need a self-contained solution This bullet list with animations
Standalone mode Summary - WASM hosted on an HTML page - Identity provider is a separate component which optionally is integrated with ASP.NET Core Identity - Useful when you have multiple applications that deal with the same set of users This bullet list with animations
Summary
Token-based security with OAuth2 and OpenID Connect is the way to go