Blazor WASM Core Hosted集成MudBlazor时CSP内联样式错误解决

你遇到的问题是MudBlazor会生成内联样式代码，但你的内容安全策略（CSP）仅允许style-src 'self'，导致浏览器拒绝加载这些内联样式，控件样式失效。以下是几种安全的解决方法：

方案1：添加CSP哈希值（推荐，无需修改业务代码） #

• 从控制台错误里复制给出的哈希值（比如你提供的sha256-ktKK7Zv7htgNiUfk5gyriqVJUMU7emNct5K2m6GIbXs=）
• 找到服务器端项目的_Host.cshtml文件，在<head>标签里修改CSP的meta标签，把哈希值加到style-src指令中：

  <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'sha256-ktKK7Zv7htgNiUfk5gyriqVJUMU7emNct5K2m6GIbXs=';" />
  

• 注意：如果后续MudBlazor版本更新导致内联样式变化，可能需要重新获取新的哈希值替换。

方案2：使用CSP随机数（Nonce），安全性更高 #

这种方法用一次性随机值授权内联样式，比哈希更灵活：

1. 在服务器端的_Host.cshtml中生成随机nonce：

   @{
       var nonce = Guid.NewGuid().ToString("N");
   }
   

2. 修改CSP meta标签，把nonce加入style-src：

   <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'nonce-@nonce';" />
   

3. 把nonce传递给客户端的MudBlazor：
   在_Host.cshtml中添加全局变量：

   <script>window.mudNonce = '@nonce';</script>
   

   然后在Client项目的Program.cs中配置MudServices时使用这个nonce：

   builder.Services.AddMudServices(config =>
   {
       using var js = builder.Services.BuildServiceProvider().GetRequiredService<IJSRuntime>();
       config.StylesheetNonce = js.InvokeAsync<string>("eval", "window.mudNonce").Result;
   });
   

方案3：禁用MudBlazor的内联样式（版本依赖） #

如果你的MudBlazor版本支持，可以直接禁用内联样式生成：
在Client项目的Program.cs中修改注册代码：

builder.Services.AddMudServices(config =>
{
    config.DisableInlineStyles = true;
});

注意：这个功能需要确认你的MudBlazor版本是否包含，建议先查阅对应版本的文档。

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