{"id":1921,"date":"2024-06-17T22:39:09","date_gmt":"2024-06-17T22:39:09","guid":{"rendered":"https:\/\/www.w3computing.com\/articles\/?p=1921"},"modified":"2024-06-17T22:39:15","modified_gmt":"2024-06-17T22:39:15","slug":"building-secure-single-page-applications-spas-with-csharp-and-blazor","status":"publish","type":"post","link":"https:\/\/www.w3computing.com\/articles\/building-secure-single-page-applications-spas-with-csharp-and-blazor\/","title":{"rendered":"Building Secure Single Page Applications (SPAs) with C# and Blazor"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

In web development, Single Page Applications (SPAs) have gained immense popularity due to their seamless user experience and enhanced performance. SPAs load a single HTML page and dynamically update content as the user interacts with the application. However, with the increasing complexity of SPAs, ensuring security has become a paramount concern.<\/p>\n\n\n\n

This tutorial will guide you through building a secure SPA using C# and Blazor, Microsoft’s open-source framework for creating interactive web UIs with .NET. We will cover key security aspects such as authentication, authorization, data protection, and secure communication. This tutorial is intended for developers who have a basic understanding of Blazor and .NET but are looking to deepen their knowledge in securing SPAs.<\/p>\n\n\n\n

Prerequisites<\/h2>\n\n\n\n

Before we start, make sure you have the following tools and knowledge:<\/p>\n\n\n\n

    \n
  1. Visual Studio 2019\/2022<\/strong>: You can download it from Visual Studio’s official website<\/a>.<\/li>\n\n\n\n
  2. .NET 5 or later<\/strong>: Ensure you have the latest version installed. Download from here<\/a>.<\/li>\n\n\n\n
  3. Basic understanding of Blazor<\/strong>: Familiarity with creating Blazor components and basic routing.<\/li>\n\n\n\n
  4. Knowledge of C#<\/strong>: Understanding of C# programming language.<\/li>\n\n\n\n
  5. Basic understanding of web security concepts<\/strong>: Familiarity with terms like authentication, authorization, CSRF, XSS, etc.<\/li>\n<\/ol>\n\n\n\n

    Setting Up the Project<\/h2>\n\n\n\n

    Step 1: Create a Blazor WebAssembly Project<\/h3>\n\n\n\n

    Open Visual Studio and create a new project. Select “Blazor WebAssembly App” and click “Next.” Name your project “SecureBlazorSPA” and choose a location to save it. Ensure the “ASP.NET Core hosted” checkbox is selected. This setting creates a solution with three projects: a Blazor WebAssembly project, an ASP.NET Core server project, and a shared project for shared code.<\/p>\n\n\n\n

    Step 2: Configure HTTPS<\/h3>\n\n\n\n

    To ensure secure communication, make sure your application uses HTTPS. Visual Studio sets this up by default, but it’s good to verify.<\/p>\n\n\n\n

      \n
    1. Open the launchSettings.json<\/code> file in the Server<\/code> project.<\/li>\n\n\n\n
    2. Ensure the https<\/code> profile is configured correctly. It should look something like this:<\/li>\n<\/ol>\n\n\n
      \"profiles\"<\/span>: {\n    \"https\"<\/span>: {\n        \"commandName\"<\/span>: \"Project\"<\/span>,\n        \"dotnetRunMessages\"<\/span>: true<\/span>,\n        \"launchBrowser\"<\/span>: true<\/span>,\n        \"applicationUrl\"<\/span>: \"https:\/\/localhost:5001;http:\/\/localhost:5000\"<\/span>,\n        \"environmentVariables\"<\/span>: {\n            \"ASPNETCORE_ENVIRONMENT\"<\/span>: \"Development\"<\/span>\n        }\n    }\n}<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
      Step 3: Configure Authentication and Authorization<\/h3>\n\n\n\n
      For this tutorial, we’ll use ASP.NET Core Identity for authentication and authorization. ASP.NET Core Identity provides a framework for managing user accounts, roles, and more.<\/p>\n\n\n\n
      Install the Required NuGet Packages<\/h4>\n\n\n\n
      In the Server<\/code> project, install the following NuGet packages:<\/p>\n\n\n
      dotnet add<\/span> package Microsoft.AspNetCore.Identity.EntityFrameworkCore\ndotnet add<\/span> package Microsoft.AspNetCore.Authentication.JwtBearer\ndotnet add<\/span> package Microsoft.IdentityModel.Tokens\ndotnet add<\/span> package System.IdentityModel.Tokens.Jwt<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Set Up Identity<\/h4>\n\n\n\n
      Open Startup.cs<\/code> in the Server<\/code> project and add the following using statements:<\/p>\n\n\n
      using<\/span> Microsoft.AspNetCore.Authentication.JwtBearer;\nusing<\/span> Microsoft.AspNetCore.Identity;\nusing<\/span> Microsoft.EntityFrameworkCore;\nusing<\/span> Microsoft.IdentityModel.Tokens;\nusing<\/span> SecureBlazorSPA.Server.Data;\nusing<\/span> SecureBlazorSPA.Server.Models;\nusing<\/span> System.Text;<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Configure services in the ConfigureServices<\/code> method:<\/p>\n\n\n
      public<\/span> void<\/span> ConfigureServices<\/span>(IServiceCollection services<\/span>)<\/span>\n{\n    services.AddDbContext<ApplicationDbContext>(options =>\n        options.UseSqlServer(Configuration.GetConnectionString(\"DefaultConnection\"<\/span>)));\n\n    services.AddDefaultIdentity<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true<\/span>)\n        .AddRoles<IdentityRole>()\n        .AddEntityFrameworkStores<ApplicationDbContext>();\n\n    services.AddAuthentication(options =>\n    {\n        options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;\n        options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;\n    })\n    .AddJwtBearer(options =>\n    {\n        options.TokenValidationParameters = new<\/span> TokenValidationParameters\n        {\n            ValidateIssuer = true<\/span>,\n            ValidateAudience = true<\/span>,\n            ValidateLifetime = true<\/span>,\n            ValidateIssuerSigningKey = true<\/span>,\n            ValidIssuer = Configuration[\"Jwt:Issuer\"<\/span>],\n            ValidAudience = Configuration[\"Jwt:Issuer\"<\/span>],\n            IssuerSigningKey = new<\/span> SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration[\"Jwt:Key\"<\/span>]))\n        };\n    });\n\n    services.AddControllersWithViews();\n    services.AddRazorPages();\n}<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      In the Configure<\/code> method, ensure you add authentication and authorization middleware:<\/p>\n\n\n
      public<\/span> void<\/span> Configure<\/span>(IApplicationBuilder app, IWebHostEnvironment env<\/span>)<\/span>\n{\n    if<\/span> (env.IsDevelopment())\n    {\n        app.UseDeveloperExceptionPage();\n        app.UseWebAssemblyDebugging();\n    }\n    else<\/span>\n    {\n        app.UseExceptionHandler(\"\/Error\"<\/span>);\n        app.UseHsts();\n    }\n\n    app.UseHttpsRedirection();\n    app.UseBlazorFrameworkFiles();\n    app.UseStaticFiles();\n\n    app.UseRouting();\n\n    app.UseAuthentication();\n    app.UseAuthorization();\n\n    app.UseEndpoints(endpoints =>\n    {\n        endpoints.MapRazorPages();\n        endpoints.MapControllers();\n        endpoints.MapFallbackToFile(\"index.html\"<\/span>);\n    });\n}<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Add JWT settings to your appsettings.json<\/code>:<\/p>\n\n\n
      \"Jwt\"<\/span>: {\n    \"Key\"<\/span>: \"YourSecretKey12345678\"<\/span>,\n    \"Issuer\"<\/span>: \"https:\/\/localhost:5001\"<\/span>\n}<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
      Create the Identity Models<\/h4>\n\n\n\n
      In the Server<\/code> project, create a Models<\/code> folder.<\/p>\n\n\n\n
      Create a class ApplicationUser.cs<\/code> that extends IdentityUser<\/code>:<\/p>\n\n\n
      using<\/span> Microsoft.AspNetCore.Identity;\n\nnamespace<\/span> SecureBlazorSPA.Server.Models<\/span>\n{\n    public<\/span> class<\/span> ApplicationUser<\/span> : IdentityUser<\/span>\n    {\n    }\n}<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Create a Data<\/code> folder and add ApplicationDbContext.cs<\/code>:<\/p>\n\n\n
      using<\/span> Microsoft.AspNetCore.Identity.EntityFrameworkCore;\nusing<\/span> Microsoft.EntityFrameworkCore;\nusing<\/span> SecureBlazorSPA.Server.Models;\n\nnamespace<\/span> SecureBlazorSPA.Server.Data<\/span>\n{\n    public<\/span> class<\/span> ApplicationDbContext<\/span> : IdentityDbContext<\/span><ApplicationUser<\/span>>\n    {\n        public<\/span> ApplicationDbContext<\/span>(DbContextOptions<ApplicationDbContext> options<\/span>)\n            : base<\/span>(options<\/span>)<\/span>\n        {\n        }\n    }\n}<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Update the ApplicationDbContext<\/code> in Startup.cs<\/code>:<\/p>\n\n\n
      services.AddDbContext<ApplicationDbContext>(options =>\n    options.UseSqlServer(Configuration.GetConnectionString(\"DefaultConnection\"<\/span>)));<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Update appsettings.json<\/code> with your connection string:<\/p>\n\n\n
      \"ConnectionStrings\"<\/span>: {\n    \"DefaultConnection\"<\/span>: \"Server=(localdb)\\\\mssqllocaldb;Database=aspnet-SecureBlazorSPA;Trusted_Connection=True;MultipleActiveResultSets=true\"<\/span>\n}<\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
      Run the following commands to create and apply the initial migration:<\/p>\n\n\n
      dotnet ef migrations add InitialCreate --project SecureBlazorSPA.Server\ndotnet ef database update --project SecureBlazorSPA.Server<\/code><\/span>Code language:<\/span> Bash<\/span> (<\/span>bash<\/span>)<\/span><\/small><\/pre>\n\n\n
      Step 4: Create a Token Service<\/h3>\n\n\n\n
      In the Server<\/code> project, create a Services<\/code> folder and add ITokenService.cs<\/code>:<\/p>\n\n\n
      using<\/span> System.Threading.Tasks;\n\nnamespace<\/span> SecureBlazorSPA.Server.Services<\/span>\n{\n    public<\/span> interface<\/span> ITokenService<\/span>\n    {\n        Task<string<\/span>> GenerateToken<\/span>(ApplicationUser user<\/span>)<\/span>;\n    }\n}<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Implement the interface in TokenService.cs<\/code>:<\/p>\n\n\n
      using<\/span> Microsoft.Extensions.Configuration;\nusing<\/span> Microsoft.IdentityModel.Tokens;\nusing<\/span> SecureBlazorSPA.Server.Models;\nusing<\/span> System;\nusing<\/span> System.IdentityModel.Tokens.Jwt;\nusing<\/span> System.Security.Claims;\nusing<\/span> System.Text;\nusing<\/span> System.Threading.Tasks;\n\nnamespace<\/span> SecureBlazorSPA.Server.Services<\/span>\n{\n    public<\/span> class<\/span> TokenService<\/span> : ITokenService<\/span>\n    {\n        private<\/span> readonly<\/span> IConfiguration _configuration;\n\n        public<\/span> TokenService<\/span>(IConfiguration configuration<\/span>)<\/span>\n        {\n            _configuration = configuration;\n        }\n\n        public<\/span> async<\/span> Task<string<\/span>> GenerateToken<\/span>(ApplicationUser user<\/span>)<\/span>\n        {\n            var<\/span> claims = new<\/span>[]\n            {\n                new<\/span> Claim(JwtRegisteredClaimNames.Sub, user.UserName),\n                new<\/span> Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString())\n            };\n\n            var<\/span> key = new<\/span> SymmetricSecurityKey(Encoding.UTF8.GetBytes(_configuration[\"Jwt:Key\"<\/span>]));\n            var<\/span> creds = new<\/span> SigningCredentials(key, SecurityAlgorithms.HmacSha256);\n\n            var<\/span> token = new<\/span> JwtSecurityToken(\n                issuer: _configuration[\"Jwt:Issuer\"<\/span>],\n                audience: _configuration[\"Jwt:Issuer\"<\/span>],\n                claims: claims,\n                expires: DateTime.Now.AddMinutes(30<\/span>),\n                signingCredentials: creds);\n\n            return<\/span> new<\/span> JwtSecurityTokenHandler().WriteToken(token);\n        }\n    }\n}<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Register the TokenService<\/code> in Startup.cs<\/code>:<\/p>\n\n\n
      services.AddTransient<ITokenService, TokenService>();<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Step 5: Create Account Controllers<\/h3>\n\n\n\n
      Create an AccountController<\/code> in the Controllers<\/code> folder of the Server<\/code> project:<\/p>\n\n\n
      using<\/span> Microsoft.AspNetCore.Identity;\nusing<\/span> Microsoft.AspNetCore.Mvc;\nusing<\/span> SecureBlazorSPA.Server.Models;\nusing<\/span> SecureBlazorSPA.Server.Services;\nusing<\/span> System.Threading.Tasks;\n\nnamespace<\/span> SecureBlazorSPA.Server.Controllers<\/span>\n{\n    [ApiController<\/span>]\n    [Route(\"api\/[controller]\"<\/span>)<\/span>]\n    public<\/span> class<\/span> AccountController<\/span> : ControllerBase<\/span>\n    {\n        private<\/span> readonly<\/span> UserManager<ApplicationUser> _userManager;\n        private<\/span> readonly<\/span> SignInManager<ApplicationUser> _signInManager;\n        private<\/span> readonly<\/span> ITokenService _tokenService;\n\n        public<\/span> AccountController<\/span>(UserManager<ApplicationUser> userManager, SignInManager<ApplicationUser> signInManager, ITokenService tokenService<\/span>)<\/span>\n        {\n            _userManager = userManager;\n            _signInManager = signInManager;\n            _tokenService = tokenService;\n        }\n\n        [HttpPost(\"register\"<\/span>)<\/span>]\n        public<\/span> async<\/span> Task<IActionResult> Register<\/span>([FromBody] RegisterModel model<\/span>)<\/span>\n        {\n            if<\/span> (!ModelState.IsValid)\n            {\n                return<\/span> BadRequest(ModelState);\n            }\n\n            var<\/span> user = new<\/span> ApplicationUser { UserName = model.Email, Email = model.Email };\n            var<\/span> result = await<\/span> _userManager.CreateAsync(user, model.Password);\n\n            if<\/span> (result.Succeeded)\n            {\n                await<\/span> _signInManager.SignInAsync(user, false<\/span>);\n                return<\/span> Ok(new<\/span> { Token = await<\/span> _tokenService.GenerateToken(user) });\n            }\n\n            foreach<\/span> (var<\/span> error in<\/span> result.Errors)\n            {\n                ModelState.AddModelError(string<\/span>.Empty, error.Description);\n            }\n\n            return<\/span> BadRequest(ModelState);\n        }\n\n        [HttpPost(\"login\"<\/span>)<\/span>]\n        public<\/span> async<\/span> Task<IActionResult> Login<\/span>([FromBody] LoginModel model<\/span>)<\/span>\n        {\n            if<\/span> (!ModelState.IsValid)\n            {\n                return<\/span> BadRequest(ModelState);\n            }\n\n            var<\/span> result = await<\/span> _signInManager.PasswordSignInAsync(model.Email, model.Password, model.RememberMe, false<\/span>);\n\n            if<\/span> (result.Succeeded)\n            {\n                var<\/span> user = await<\/span> _userManager.FindByEmailAsync(model.Email);\n                return<\/span> Ok(new<\/span> { Token = await<\/span> _tokenService.GenerateToken(user) });\n            }\n\n            return<\/span> Unauthorized();\n        }\n    }\n}<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Create RegisterModel.cs<\/code> and LoginModel.cs<\/code> in the Models<\/code> folder:<\/p>\n\n\n
      public<\/span> class<\/span> RegisterModel<\/span>\n{\n    public<\/span> string<\/span> Email { get<\/span>; set<\/span>; }\n    public<\/span> string<\/span> Password { get<\/span>; set<\/span>; }\n    public<\/span> string<\/span> ConfirmPassword { get<\/span>; set<\/span>; }\n}\n\npublic<\/span> class<\/span> LoginModel<\/span>\n{\n    public<\/span> string<\/span> Email { get<\/span>; set<\/span>; }\n    public<\/span> string<\/span> Password { get<\/span>; set<\/span>; }\n    public<\/span> bool<\/span> RememberMe { get<\/span>; set<\/span>; }\n}<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Implementing Security in the Blazor Client<\/h2>\n\n\n\n
      Step 6: Set Up Authentication State Provider<\/h3>\n\n\n\n
      In the Client<\/code> project, create a Services<\/code> folder and add CustomAuthStateProvider.cs<\/code>:<\/p>\n\n\n
      using<\/span> Microsoft.AspNetCore.Components.Authorization;\nusing<\/span> System.Net.Http;\nusing<\/span> System.Net.Http.Headers;\nusing<\/span> System.Security.Claims;\nusing<\/span> System.Text.Json;\nusing<\/span> System.Threading.Tasks;\n\nnamespace<\/span> SecureBlazorSPA.Client.Services<\/span>\n{\n    public<\/span> class<\/span> CustomAuthStateProvider<\/span> : AuthenticationStateProvider<\/span>\n    {\n        private<\/span> readonly<\/span> HttpClient _httpClient;\n\n        public<\/span> CustomAuthStateProvider<\/span>(HttpClient httpClient<\/span>)<\/span>\n        {\n            _httpClient = httpClient;\n        }\n\n        public<\/span> override<\/span> async<\/span> Task<AuthenticationState> GetAuthenticationStateAsync<\/span>(<\/span>)<\/span>\n        {\n            var<\/span> token = await<\/span> _httpClient.GetStringAsync(\"token\"<\/span>);\n\n            if<\/span> (string<\/span>.IsNullOrWhiteSpace(token))\n            {\n                return<\/span> new<\/span> AuthenticationState(new<\/span> ClaimsPrincipal(new<\/span> ClaimsIdentity()));\n            }\n\n            var<\/span> claims = ParseClaimsFromJwt(token);\n            var<\/span> identity = new<\/span> ClaimsIdentity(claims, \"jwt\"<\/span>);\n            var<\/span> user = new<\/span> ClaimsPrincipal(identity);\n\n            return<\/span> new<\/span> AuthenticationState(user);\n        }\n\n        public<\/span> void<\/span> NotifyUserAuthentication<\/span>(string<\/span> token<\/span>)<\/span>\n        {\n            var<\/span> authenticatedUser = new<\/span> ClaimsPrincipal(new<\/span> ClaimsIdentity(ParseClaimsFromJwt(token), \"jwt\"<\/span>));\n            var<\/span> authState = Task.FromResult(new<\/span> AuthenticationState(authenticatedUser));\n            NotifyAuthenticationStateChanged(authState);\n        }\n\n        public<\/span> void<\/span> NotifyUserLogout<\/span>(<\/span>)<\/span>\n        {\n            var<\/span> anonymousUser = new<\/span> ClaimsPrincipal(new<\/span> ClaimsIdentity());\n            var<\/span> authState = Task.FromResult(new<\/span> AuthenticationState(anonymousUser));\n            NotifyAuthenticationStateChanged(authState);\n        }\n\n        private<\/span> IEnumerable<Claim> ParseClaimsFromJwt<\/span>(string<\/span> jwt<\/span>)<\/span>\n        {\n            var<\/span> payload = jwt.Split('.'<\/span>)[1<\/span>];\n            var<\/span> jsonBytes = ParseBase64WithoutPadding(payload);\n            var<\/span> keyValuePairs = JsonSerializer.Deserialize<Dictionary<string<\/span>, object<\/span>>>(jsonBytes);\n            return<\/span> keyValuePairs.Select(kvp => new<\/span> Claim(kvp.Key, kvp.Value.ToString()));\n        }\n\n        private<\/span> byte<\/span>[] ParseBase64WithoutPadding<\/span>(string<\/span> base64<\/span>)<\/span>\n        {\n            switch<\/span> (base64.Length % 4<\/span>)\n            {\n                case<\/span> 2<\/span>: base64 += \"==\"<\/span>; break<\/span>;\n                case<\/span> 3<\/span>: base64 += \"=\"<\/span>; break<\/span>;\n            }\n            return<\/span> Convert.FromBase64String(base64);\n        }\n    }\n}<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Register the CustomAuthStateProvider<\/code> in Program.cs<\/code>:<\/p>\n\n\n
      builder.Services.AddAuthorizationCore();\nbuilder.Services.AddScoped<CustomAuthStateProvider>();\nbuilder.Services.AddScoped<AuthenticationStateProvider>(provider => provider.GetRequiredService<CustomAuthStateProvider>());<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Step 7: Create Authentication Components<\/h3>\n\n\n\n
      Create a Pages<\/code> folder in the Client<\/code> project and add Login.razor<\/code>:<\/p>\n\n\n
      @page \"\/login\"<\/span>\n@using<\/span> Microsoft.AspNetCore.Components.Authorization\n@inject HttpClient HttpClient\n@inject CustomAuthStateProvider AuthStateProvider\n@inject NavigationManager Navigation\n\n<EditForm Model=\"loginModel\"<\/span> OnValidSubmit=\"HandleLogin\"<\/span>>\n    <DataAnnotationsValidator \/>\n    <ValidationSummary \/>\n    <InputText @bind-Value=\"loginModel.Email\"<\/span> placeholder=\"Email\"<\/span> \/>\n    <InputText @bind-Value=\"loginModel.Password\"<\/span> type=\"password\"<\/span> placeholder=\"Password\"<\/span> \/>\n    <InputCheckbox @bind-Value=\"loginModel.RememberMe\"<\/span> \/> Remember me\n    <button type=\"submit\"<\/span>>Login<\/button>\n<\/EditForm>\n\n@code {\n    private<\/span> LoginModel loginModel = new<\/span> LoginModel();\n\n    private<\/span> async<\/span> Task HandleLogin<\/span>(<\/span>)<\/span>\n    {\n        var<\/span> response = await<\/span> HttpClient.PostAsJsonAsync(\"api\/account\/login\"<\/span>, loginModel);\n\n        if<\/span> (response.IsSuccessStatusCode)\n        {\n            var<\/span> token = await<\/span> response.Content.ReadAsStringAsync();\n            await<\/span> JSRuntime.InvokeVoidAsync(\"localStorage.setItem\"<\/span>, \"authToken\"<\/span>, token);\n            AuthStateProvider.NotifyUserAuthentication(token);\n            Navigation.NavigateTo(\"\/\"<\/span>);\n        }\n        else<\/span>\n        {\n            \/\/ Handle login failure<\/span>\n        }\n    }\n}<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Create Register.razor<\/code>:<\/p>\n\n\n
      @page \"\/register\"<\/span>\n@using<\/span> Microsoft.AspNetCore.Components.Authorization\n@inject HttpClient HttpClient\n@inject CustomAuthStateProvider AuthStateProvider\n@inject NavigationManager Navigation\n\n<EditForm Model=\"registerModel\"<\/span> OnValidSubmit=\"HandleRegister\"<\/span>>\n    <DataAnnotationsValidator \/>\n    <ValidationSummary \/>\n    <InputText @bind-Value=\"registerModel.Email\"<\/span> placeholder=\"Email\"<\/span> \/>\n    <InputText @bind-Value=\"registerModel.Password\"<\/span> type=\"password\"<\/span> placeholder=\"Password\"<\/span> \/>\n    <InputText @bind-Value=\"registerModel.ConfirmPassword\"<\/span> type=\"password\"<\/span> placeholder=\"Confirm Password\"<\/span> \/>\n    <button type=\"submit\"<\/span>>Register<\/button>\n<\/EditForm>\n\n@code {\n    private<\/span> RegisterModel registerModel = new<\/span> RegisterModel();\n\n    private<\/span> async<\/span> Task HandleRegister<\/span>(<\/span>)<\/span>\n    {\n        var<\/span> response = await<\/span> HttpClient.PostAsJsonAsync(\"api\/account\/register\"<\/span>, registerModel);\n\n        if<\/span> (response.IsSuccessStatusCode)\n        {\n            var<\/span> token = await<\/span> response.Content.ReadAsStringAsync();\n            await<\/span> JSRuntime.InvokeVoidAsync(\"localStorage.setItem\"<\/span>, \"authToken\"<\/span>, token);\n            AuthStateProvider.NotifyUserAuthentication(token);\n            Navigation.NavigateTo(\"\/\"<\/span>);\n        }\n        else<\/span>\n        {\n            \/\/ Handle registration failure<\/span>\n        }\n    }\n}<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Update App.razor<\/code> to handle authentication state:<\/p>\n\n\n
      <CascadingAuthenticationState>\n    <Router AppAssembly=\"@typeof(App).Assembly\"<\/span>>\n        <Found Context=\"routeData\"<\/span>>\n            <AuthorizeRouteView RouteData=\"@routeData\"<\/span> DefaultLayout=\"@typeof(MainLayout)\"<\/span>>\n                <NotAuthorized>\n                    <h1>Sorry, you're not authorized to view this page.<\/h1>\n                <\/NotAuthorized>\n            <\/AuthorizeRouteView>\n        <\/Found>\n        <NotFound>\n            <h1>Sorry, there'<\/span>s nothing at this<\/span> address.<\/h1>\n        <\/NotFound>\n    <\/Router>\n<\/CascadingAuthenticationState><\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Update MainLayout.razor<\/code> to add a logout button and display the user’s name if logged in:<\/p>\n\n\n
      @using<\/span> Microsoft.AspNetCore.Components.Authorization\n@inject CustomAuthStateProvider AuthStateProvider\n@inject NavigationManager Navigation\n\n<div class<\/span>=\"top-row px-4 auth\"<\/span>>\n    <a href=\"\"<\/span> @onclick=\"Logout\"<\/span>>Logout<\/a>\n    <AuthorizeView>\n        <Authorized>\n            <span>Hello, @context.User.Identity.Name<\/span>\n        <\/Authorized>\n        <NotAuthorized>\n            <a href=\"login\"<\/span>>Login<\/a>\n            <a href=\"register\"<\/span>>Register<\/a>\n        <\/NotAuthorized>\n    <\/AuthorizeView>\n<\/div>\n\n@code {\n    private<\/span> async<\/span> Task Logout<\/span>(<\/span>)<\/span>\n    {\n        await<\/span> JSRuntime.InvokeVoidAsync(\"localStorage.removeItem\"<\/span>, \"authToken\"<\/span>);\n        AuthStateProvider.NotifyUserLogout();\n        Navigation.NavigateTo(\"\/\"<\/span>);\n    }\n}<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Secure Communication<\/h2>\n\n\n\n
      Step 8: Secure API Endpoints<\/h3>\n\n\n\n
      Add the [Authorize]<\/code> attribute to secure your API endpoints. For example , in the WeatherForecastController<\/code>:<\/p>\n\n\n
      [Authorize<\/span>]\n[ApiController<\/span>]\n[Route(\"[controller]\"<\/span>)<\/span>]\npublic<\/span> class<\/span> WeatherForecastController<\/span> : ControllerBase<\/span>\n{\n    \/\/ Your existing code<\/span>\n}<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Step 9: Handle CSRF Attacks<\/h3>\n\n\n\n
      ASP.NET Core includes built-in protection against Cross-Site Request Forgery (CSRF) attacks. Make sure your forms include the anti-forgery token. In Blazor, you can use the AntiForgery<\/code> component.<\/p>\n\n\n\n
      Add the Microsoft.AspNetCore.Antiforgery<\/code> package to your project:<\/p>\n\n\n
      dotnet<\/span> add<\/span> package<\/span> Microsoft<\/span>.AspNetCore<\/span>.Antiforgery<\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
      Configure the service in Startup.cs<\/code>:<\/p>\n\n\n
      services.AddAntiforgery(options => \n{\n    options.HeaderName = \"X-CSRF-TOKEN\"<\/span>;\n});<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Use the anti-forgery token in your forms. You can inject IAntiforgery<\/code> and use it in your pages or components:<\/p>\n\n\n
      @inject IAntiforgery Antiforgery\n\n<EditForm Model=\"loginModel\"<\/span> OnValidSubmit=\"HandleLogin\"<\/span>>\n    @Antiforgery.GetAndStoreTokens(HttpContext).RequestToken\n    <DataAnnotationsValidator \/>\n    <ValidationSummary \/>\n    <InputText @bind-Value=\"loginModel.Email\"<\/span> placeholder=\"Email\"<\/span> \/>\n    <InputText @bind-Value=\"loginModel.Password\"<\/span> type=\"password\"<\/span> placeholder=\"Password\"<\/span> \/>\n    <InputCheckbox @bind-Value=\"loginModel.RememberMe\"<\/span> \/> Remember me\n    <button type=\"submit\"<\/span>>Login<\/button>\n<\/EditForm><\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Data Protection<\/h2>\n\n\n\n
      Step 10: Encrypt Sensitive Data<\/h3>\n\n\n\n
      ASP.NET Core provides data protection services for encrypting sensitive data. To use data protection, register it in Startup.cs<\/code>:<\/p>\n\n\n
      services.AddDataProtection()\n    .PersistKeysToFileSystem(new<\/span> DirectoryInfo(@\"\\\\server\\share\\directory\\\"<\/span>))\n    .SetApplicationName(\"SecureBlazorSPA\"<\/span>);<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Step 11: Use HTTPS<\/h3>\n\n\n\n
      Ensure your entire application uses HTTPS. This can be enforced in the Startup.cs<\/code>:<\/p>\n\n\n
      app.UseHttpsRedirection();<\/code><\/span>Code language:<\/span> C#<\/span> (<\/span>cs<\/span>)<\/span><\/small><\/pre>\n\n\n
      Conclusion<\/h2>\n\n\n\n
      Building secure SPAs with C# and Blazor involves a multi-faceted approach that includes securing communication, managing authentication and authorization, and protecting sensitive data. This tutorial provided a comprehensive guide to implementing these security measures in a Blazor WebAssembly application.<\/p>\n\n\n\n
      By following these steps, you can create a robust and secure SPA that ensures the integrity, confidentiality, and availability of your application and user data. Remember to keep up with the latest security best practices and regularly update your dependencies to mitigate potential vulnerabilities.<\/p>\n","protected":false},"excerpt":{"rendered":"
      Introduction In web development, Single Page Applications (SPAs) have gained immense popularity due to their seamless user experience and enhanced performance. SPAs load a single HTML page and dynamically update content as the user interacts with the application. However, with the increasing complexity of SPAs, ensuring security has become a paramount concern. This tutorial will […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8,4],"tags":[],"class_list":["post-1921","post","type-post","status-publish","format-standard","category-csharp","category-programming-languages","entry"],"yoast_head":"\nBuilding Secure Single Page Applications (SPAs) with C# and Blazor<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.w3computing.com\/articles\/building-secure-single-page-applications-spas-with-csharp-and-blazor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building Secure Single Page Applications (SPAs) with C# and Blazor\" \/>\n<meta property=\"og:description\" content=\"Introduction In web development, Single Page Applications (SPAs) have gained immense popularity due to their seamless user experience and enhanced performance. SPAs load a single HTML page and dynamically update content as the user interacts with the application. However, with the increasing complexity of SPAs, ensuring security has become a paramount concern. This tutorial will […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.w3computing.com\/articles\/building-secure-single-page-applications-spas-with-csharp-and-blazor\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-17T22:39:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-17T22:39:15+00:00\" \/>\n<meta name=\"author\" content=\"w3compadmin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"w3compadmin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/building-secure-single-page-applications-spas-with-csharp-and-blazor\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/building-secure-single-page-applications-spas-with-csharp-and-blazor\\\/\"},\"author\":{\"name\":\"w3compadmin\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#\\\/schema\\\/person\\\/a550b3e20d78bb4f79b7c6b7b53f0561\"},\"headline\":\"Building Secure Single Page Applications (SPAs) with C# and Blazor\",\"datePublished\":\"2024-06-17T22:39:09+00:00\",\"dateModified\":\"2024-06-17T22:39:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/building-secure-single-page-applications-spas-with-csharp-and-blazor\\\/\"},\"wordCount\":725,\"articleSection\":[\"C#\",\"Programming Languages\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/building-secure-single-page-applications-spas-with-csharp-and-blazor\\\/\",\"url\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/building-secure-single-page-applications-spas-with-csharp-and-blazor\\\/\",\"name\":\"Building Secure Single Page Applications (SPAs) with C# and Blazor\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#website\"},\"datePublished\":\"2024-06-17T22:39:09+00:00\",\"dateModified\":\"2024-06-17T22:39:15+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#\\\/schema\\\/person\\\/a550b3e20d78bb4f79b7c6b7b53f0561\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/building-secure-single-page-applications-spas-with-csharp-and-blazor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/building-secure-single-page-applications-spas-with-csharp-and-blazor\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/building-secure-single-page-applications-spas-with-csharp-and-blazor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Articles Home\",\"item\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Programming Languages\",\"item\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/programming-languages\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C#\",\"item\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/programming-languages\\\/csharp\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Building Secure Single Page Applications (SPAs) with C# and Blazor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#website\",\"url\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/\",\"name\":\"Developer Articles Hub\",\"description\":\"\",\"alternateName\":\"Developer Articles\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/#\\\/schema\\\/person\\\/a550b3e20d78bb4f79b7c6b7b53f0561\",\"name\":\"w3compadmin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/wp-content\\\/litespeed\\\/avatar\\\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1780141266\",\"url\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/wp-content\\\/litespeed\\\/avatar\\\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1780141266\",\"contentUrl\":\"https:\\\/\\\/www.w3computing.com\\\/articles\\\/wp-content\\\/litespeed\\\/avatar\\\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1780141266\",\"caption\":\"w3compadmin\"},\"sameAs\":[\"http:\\\/\\\/w3computing.com\\\/articles\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building Secure Single Page Applications (SPAs) with C# and Blazor","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.w3computing.com\/articles\/building-secure-single-page-applications-spas-with-csharp-and-blazor\/","og_locale":"en_US","og_type":"article","og_title":"Building Secure Single Page Applications (SPAs) with C# and Blazor","og_description":"Introduction In web development, Single Page Applications (SPAs) have gained immense popularity due to their seamless user experience and enhanced performance. SPAs load a single HTML page and dynamically update content as the user interacts with the application. However, with the increasing complexity of SPAs, ensuring security has become a paramount concern. This tutorial will […]","og_url":"https:\/\/www.w3computing.com\/articles\/building-secure-single-page-applications-spas-with-csharp-and-blazor\/","article_published_time":"2024-06-17T22:39:09+00:00","article_modified_time":"2024-06-17T22:39:15+00:00","author":"w3compadmin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"w3compadmin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.w3computing.com\/articles\/building-secure-single-page-applications-spas-with-csharp-and-blazor\/#article","isPartOf":{"@id":"https:\/\/www.w3computing.com\/articles\/building-secure-single-page-applications-spas-with-csharp-and-blazor\/"},"author":{"name":"w3compadmin","@id":"https:\/\/www.w3computing.com\/articles\/#\/schema\/person\/a550b3e20d78bb4f79b7c6b7b53f0561"},"headline":"Building Secure Single Page Applications (SPAs) with C# and Blazor","datePublished":"2024-06-17T22:39:09+00:00","dateModified":"2024-06-17T22:39:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.w3computing.com\/articles\/building-secure-single-page-applications-spas-with-csharp-and-blazor\/"},"wordCount":725,"articleSection":["C#","Programming Languages"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.w3computing.com\/articles\/building-secure-single-page-applications-spas-with-csharp-and-blazor\/","url":"https:\/\/www.w3computing.com\/articles\/building-secure-single-page-applications-spas-with-csharp-and-blazor\/","name":"Building Secure Single Page Applications (SPAs) with C# and Blazor","isPartOf":{"@id":"https:\/\/www.w3computing.com\/articles\/#website"},"datePublished":"2024-06-17T22:39:09+00:00","dateModified":"2024-06-17T22:39:15+00:00","author":{"@id":"https:\/\/www.w3computing.com\/articles\/#\/schema\/person\/a550b3e20d78bb4f79b7c6b7b53f0561"},"breadcrumb":{"@id":"https:\/\/www.w3computing.com\/articles\/building-secure-single-page-applications-spas-with-csharp-and-blazor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.w3computing.com\/articles\/building-secure-single-page-applications-spas-with-csharp-and-blazor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.w3computing.com\/articles\/building-secure-single-page-applications-spas-with-csharp-and-blazor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Articles Home","item":"https:\/\/www.w3computing.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Programming Languages","item":"https:\/\/www.w3computing.com\/articles\/programming-languages\/"},{"@type":"ListItem","position":3,"name":"C#","item":"https:\/\/www.w3computing.com\/articles\/programming-languages\/csharp\/"},{"@type":"ListItem","position":4,"name":"Building Secure Single Page Applications (SPAs) with C# and Blazor"}]},{"@type":"WebSite","@id":"https:\/\/www.w3computing.com\/articles\/#website","url":"https:\/\/www.w3computing.com\/articles\/","name":"Developer Articles Hub","description":"","alternateName":"Developer Articles","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.w3computing.com\/articles\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.w3computing.com\/articles\/#\/schema\/person\/a550b3e20d78bb4f79b7c6b7b53f0561","name":"w3compadmin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.w3computing.com\/articles\/wp-content\/litespeed\/avatar\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1780141266","url":"https:\/\/www.w3computing.com\/articles\/wp-content\/litespeed\/avatar\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1780141266","contentUrl":"https:\/\/www.w3computing.com\/articles\/wp-content\/litespeed\/avatar\/bd481d404e42caa2763662a3bfe825f8.jpg?ver=1780141266","caption":"w3compadmin"},"sameAs":["http:\/\/w3computing.com\/articles"]}]}},"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"w3compadmin","author_link":"https:\/\/www.w3computing.com\/articles\/author\/w3compadmin\/"},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/posts\/1921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/comments?post=1921"}],"version-history":[{"count":3,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/posts\/1921\/revisions"}],"predecessor-version":[{"id":1925,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/posts\/1921\/revisions\/1925"}],"wp:attachment":[{"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/media?parent=1921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/categories?post=1921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3computing.com\/articles\/wp-json\/wp\/v2\/tags?post=1921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}