Blazor技术问询：SameSite模式实现演示及跨站点Cookie访问方法

一、Blazor WebAssembly与Blazor Web App中SameSite Lax/Strict模式实现 #

1. Blazor WebAssembly独立应用 #

独立WASM本身为静态资源，Cookie配置需依赖后端托管服务（如ASP.NET Core）。在托管项目的Program.cs中全局配置Cookie策略，同时可针对特定Cookie设置SameSite模式：

var builder = WebApplication.CreateBuilder(args);

// 添加服务并配置Cookie策略
builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();
builder.Services.Configure<CookiePolicyOptions>(options =>
{
    // 设置全局默认SameSite模式为Lax
    options.MinimumSameSitePolicy = SameSiteMode.Lax;
    // 针对特定Cookie覆盖为Strict模式
    options.OnAppendCookie = ctx =>
    {
        if (ctx.CookieName == "AuthCookie")
        {
            ctx.CookieOptions.SameSite = SameSiteMode.Strict;
        }
    };
});

var app = builder.Build();

// 启用Cookie策略中间件
app.UseCookiePolicy();

app.MapControllers();
app.MapRazorPages();
app.MapFallbackToFile("index.html");

app.Run();

在API控制器中设置具体Cookie：

[ApiController]
[Route("api/cookies")]
public class CookiesController : ControllerBase
{
    [HttpGet("set-lax")]
    public IActionResult SetLaxCookie()
    {
        Response.Cookies.Append("LaxDemoCookie", "lax-demo-value", new CookieOptions
        {
            SameSite = SameSiteMode.Lax,
            HttpOnly = true,
            Secure = builder.Environment.IsProduction(), // 生产环境强制HTTPS
            Expires = DateTimeOffset.UtcNow.AddHours(1)
        });
        return Ok("Lax模式Cookie已设置");
    }

    [HttpGet("set-strict")]
    public IActionResult SetStrictCookie()
    {
        Response.Cookies.Append("StrictDemoCookie", "strict-demo-value", new CookieOptions
        {
            SameSite = SameSiteMode.Strict,
            HttpOnly = true,
            Secure = builder.Environment.IsProduction(),
            Expires = DateTimeOffset.UtcNow.AddHours(1)
        });
        return Ok("Strict模式Cookie已设置");
    }

    [HttpGet("get")]
    public IActionResult GetCookies()
    {
        var cookieDict = Request.Cookies.ToDictionary(kv => kv.Key, kv => kv.Value);
        return Ok(cookieDict);
    }
}

在Blazor组件中通过API读取Cookie（HttpOnly Cookie无法直接通过前端JS读取）：

@page "/cookie-test"
@inject HttpClient Http

<button @onclick="FetchCookies">获取Cookie信息</button>
<div>@((MarkupString)CookieDisplay)</div>

@code {
    private string CookieDisplay { get; set; }

    private async Task FetchCookies()
    {
        var cookies = await Http.GetFromJsonAsync<Dictionary<string, string>>("api/cookies/get");
        CookieDisplay = string.Join("<br>", cookies.Select(kv => $"{kv.Key}: {kv.Value}"));
    }
}

2. Blazor Web App（托管模式） #

Blazor Web App无论使用Server还是WASM渲染模式，Cookie配置均可在Program.cs中完成，Server模式下还可直接通过IHttpContextAccessor操作Cookie：

1. 注册IHttpContextAccessor：

builder.Services.AddHttpContextAccessor();

2. 在Server组件中设置Strict模式Cookie：

@page "/server-cookie-set"
@inject IHttpContextAccessor HttpContextAccessor

<button @onclick="SetStrictCookie">设置Strict模式Cookie</button>

@code {
    private void SetStrictCookie()
    {
        var httpContext = HttpContextAccessor.HttpContext;
        if (httpContext == null) return;

        httpContext.Response.Cookies.Append("ServerStrictCookie", "server-strict-value", new CookieOptions
        {
            SameSite = SameSiteMode.Strict,
            HttpOnly = true,
            Secure = builder.Environment.IsProduction(),
            Expires = DateTimeOffset.UtcNow.AddHours(1)
        });
    }
}

二、不同localhost站点间Cookie传输与访问 #

不同端口的localhost站点（如localhost:5000和localhost:5001）属于独立域名，默认Cookie不共享，可通过以下配置实现跨站点Cookie传输：

1. 配置共享Cookie域名 #

将Cookie的Domain设置为.localhost（前缀点表示匹配所有localhost子域名/端口），同时确保启用HTTPS（浏览器对非HTTPS的跨站点Cookie有严格限制）：

// 在两个站点的API控制器中设置共享Cookie
Response.Cookies.Append("SharedCookie", "cross-site-value", new CookieOptions
{
    SameSite = SameSiteMode.Lax, // Strict模式会禁止跨站点传输
    HttpOnly = false, // 如需前端读取设为false，否则保持true通过API获取
    Secure = true, // 必须启用HTTPS
    Domain = ".localhost", // 共享至所有localhost站点
    Expires = DateTimeOffset.UtcNow.AddHours(1)
});

2. 配置CORS允许携带凭证 #

在提供Cookie的站点（如localhost:5000）中配置CORS策略，允许目标站点携带凭证：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowLocalhostCrossSite", policy =>
    {
        policy.WithOrigins("https://localhost:5001")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 允许携带Cookie等凭证
    });
});

// 启用CORS中间件（需在UseRouting之后，UseAuthorization之前）
app.UseCors("AllowLocalhostCrossSite");

3. 请求端配置HttpClient携带Cookie #

在请求站点（如localhost:5001）中配置HttpClient以携带Cookie：

builder.Services.AddHttpClient("CrossSiteApi", client =>
{
    client.BaseAddress = new Uri("https://localhost:5000/");
}).ConfigurePrimaryHttpMessageHandler(() => new HttpClientHandler
{
    UseCookies = true,
    Credentials = CredentialOption.Include // 发送当前站点的Cookie到目标API
});

在Blazor组件中调用跨站点API获取Cookie：

@page "/cross-site-cookie"
@inject IHttpClientFactory HttpClientFactory

<button @onclick="GetSharedCookie">获取跨站点共享Cookie</button>
<div>@SharedCookieValue</div>

@code {
    private string SharedCookieValue { get; set; }

    private async Task GetSharedCookie()
    {
        var client = HttpClientFactory.CreateClient("CrossSiteApi");
        var cookies = await client.GetFromJsonAsync<Dictionary<string, string>>("api/cookies/get");
        SharedCookieValue = cookies.TryGetValue("SharedCookie", out var val) ? val : "未获取到共享Cookie";
    }
}

关键注意事项 #

• HTTPS强制要求：Chrome、Edge等浏览器会拒绝非HTTPS环境下的跨站点Cookie传输，开发环境可通过launchSettings.json启用HTTPS。
• SameSite模式选择：Strict模式仅允许同站点请求携带Cookie，跨站点场景需使用Lax或None（None模式必须搭配Secure=true）。
• HttpOnly限制：HttpOnly标记的Cookie无法通过前端JS读取，需通过后端API获取后返回给前端。

内容的提问来源于stack exchange，提问作者Sharanya Bajpai