.NET 6应用中如何优雅白名单内联样式规避CSP拦截？

方案一：用ASP.NET Core原生实现Nonce绑定 #

不用额外依赖，直接靠框架自带能力搞定：

1. 注册Nonce生成中间件与CSP头
   在Program.cs里添加中间件，自动生成每个请求唯一的nonce，同时设置CSP头允许带该nonce的内联样式：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
// 注册HttpContext访问器，后续Razor页面要用到
builder.Services.AddHttpContextAccessor();

var app = builder.Build();

// 生成Nonce并设置CSP的中间件
app.Use(async (context, next) =>
{
    // 生成16字节的随机Nonce，转成Base64格式
    var nonce = Convert.ToBase64String(RandomNumberGenerator.GetBytes(16));
    context.Items["CspNonce"] = nonce;
    
    // 配置CSP规则，允许自身资源和带该nonce的内联样式
    context.Response.Headers.ContentSecurityPolicy = 
        $"default-src 'self'; style-src 'self' 'nonce-{nonce}';";
    
    await next();
});

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();

app.Run();

2. 在Razor页面中引用Nonce
   在需要动态样式的Razor页面里，给<style>标签加上nonce属性，从HttpContext.Items里取生成好的nonce：

@inject IHttpContextAccessor HttpContextAccessor

<style nonce="@HttpContextAccessor.HttpContext.Items["CspNonce"]">
    .dynamic-box {
        color: @Model.TextColor;
        padding: @Model.PaddingSize;
    }
</style>

方案二：用第三方包简化配置（推荐） #

用NetEscapades.AspNetCore.SecurityHeaders这个包，它已经封装好了CSP和nonce的处理逻辑，不用自己写中间件：

1. 安装包
   打开NuGet包管理器或者用CLI命令安装：

dotnet add package NetEscapades.AspNetCore.SecurityHeaders

2. 配置CSP与Nonce
   在Program.cs里注册服务并启用安全头中间件：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddHttpContextAccessor();
// 配置安全头，启用带Nonce的CSP
builder.Services.AddSecurityHeaders(options =>
{
    options.AddContentSecurityPolicy(policy =>
    {
        policy.DefaultSources(s => s.Self())
              .StyleSources(s => s.Self().Nonce()); // 允许带Nonce的内联样式
    });
});

var app = builder.Build();

// 启用安全头中间件，自动生成Nonce并设置CSP
app.UseSecurityHeaders();

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapRazorPages();

app.Run();

3. 在Razor页面中使用Nonce
   这个包会把生成的nonce存在HttpContext.Items["Nonce"]里，直接引用就行：

@inject IHttpContextAccessor HttpContextAccessor

<style nonce="@HttpContextAccessor.HttpContext.Items["Nonce"]">
    .dynamic-element {
        background: @Model.BgColor;
        font-size: @Model.FontSize;
    }
</style>

两种方案都不用手动实现哈希或nonce生成逻辑，配置好后框架/包会自动为每个请求生成唯一值并绑定到CSP头，完美解决动态内联样式被拦截的问题。

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