在ASP.NET Core + SPA中安全交换JWT的方法

参赛作品

• HTML5 Web存储（localStorage或sessionStorage）
  
• 饼干
  

设置本地开发环境

'start': 'set HTTPS=true&&rimraf ./build&&react-scripts start' 

配置ASP.NET Core服务器

JWT设置

 services.AddAuthentication(options => { options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme; options.DefaultSignInScheme = JwtBearerDefaults.AuthenticationScheme; options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme; }) .AddJwtBearer(JwtBearerDefaults.AuthenticationScheme, options => { options.RequireHttpsMetadata = true; options.SaveToken = true; options.TokenValidationParameters = new TokenValidationParameters { //  .  }; }); 

配置CORS策略

 services.AddCors(); 

 app.UseCors(x => x .WithOrigins("https://localhost:3000") //    SPA  .AllowCredentials() .AllowAnyMethod() .AllowAnyHeader()); 

设定Cookie政策

 app.UseCookiePolicy(new CookiePolicyOptions { MinimumSameSitePolicy = SameSiteMode.Strict, HttpOnly = HttpOnlyPolicy.Always, Secure = CookieSecurePolicy.Always }); 

安全令牌交换的想法

1. 使用httpOnly和secure标志将令牌放入HTTP请求。
2. 从HTTP请求接收并验证客户端应用程序令牌。

• 登录时将令牌写在httpOnly cookie中，并在登录时从其中删除令牌。
• 如果cookie中有令牌，请在每个后续请求的HTTP标头中替换该令牌。
• 如果cookie中没有令牌，则标题将为空，并且该请求将不会被授权。

中间件

 app.Use(async (context, next) => { var token = context.Request.Cookies[".AspNetCore.Application.Id"]; if (!string.IsNullOrEmpty(token)) context.Request.Headers.Add("Authorization", "Bearer " + token); await next(); }); app.UseAuthentication(); 

 if (result.Succeeded) HttpContext.Response.Cookies.Append(".AspNetCore.Application.Id", token, new CookieOptions { MaxAge = TimeSpan.FromMinutes(60) }); 

 context.Response.Headers.Add("X-Content-Type-Options", "nosniff"); context.Response.Headers.Add("X-Xss-Protection", "1"); context.Response.Headers.Add("X-Frame-Options", "DENY"); 

• X-Content-Type-Options标头用于防止MIME嗅探漏洞。 当网站允许用户下载内容但用户伪装某种类型的文件时，可能会发生此漏洞。 这可以使攻击者能够执行跨站点脚本脚本或破坏网站。
• 所有现代浏览器均具有内置的XSS过滤功能，可在页面完全显示给我们之前尝试捕获XSS漏洞。 默认情况下，它们在浏览器中处于启用状态，但是用户可能会更棘手并禁用它们。 使用X-XSS-Protection标头，我们实际上可以告诉浏览器忽略用户的操作并应用内置过滤器。
• X-Frame-Options告诉浏览器，如果您的网站位于HTML框架内，则不显示任何内容。 当尝试保护自己免遭点击劫持尝试时，这非常重要。

SPA客户端设置

 import axios from "axios"; const api = axios.create({ baseURL: process.env.REACT_APP_API_URL }); api.interceptors.request.use(request => requestInterceptor(request)) const requestInterceptor = (request) => { request.withCredentials = true; return request; } export default api; 

这都是为了什么？

示范项目

UPD：防范CSRF

配置ASP.NET Core服务器

 public class XsrfProtectionMiddleware { private readonly IAntiforgery _antiforgery; private readonly RequestDelegate _next; public XsrfProtectionMiddleware(RequestDelegate next, IAntiforgery antiforgery) { _next = next; _antiforgery = antiforgery; } public async Task InvokeAsync(HttpContext context) { context.Response.Cookies.Append( ".AspNetCore.Xsrf", _antiforgery.GetAndStoreTokens(context).RequestToken, new CookieOptions {HttpOnly = false, Secure = true, MaxAge = TimeSpan.FromMinutes(60)}); await _next(context); } } 

 public static class MiddlewareExtensions { public static IApplicationBuilder UseXsrfProtection(this IApplicationBuilder builder, IAntiforgery antiforgery) => builder.UseMiddleware<XsrfProtectionMiddleware>(antiforgery); } 

 services.AddAntiforgery(options => { options.HeaderName = "x-xsrf-token"; }); services.AddMvc(); 

 app.UseAuthentication(); app.UseXsrfProtection(antiforgery); 

SPA设置

 import axios from "axios"; import cookie from 'react-cookies'; const api = axios.create({ baseURL: process.env.REACT_APP_API_URL }); api.interceptors.request.use(request => requestInterceptor(request)) const requestInterceptor = (request) => { request.headers['x-xsrf-token'] = cookie.load('.AspNetCore.Xsrf') return request; } export default api; 

使用方法