Blazor Server外部库的Content-Security-Policy配置问题

问题描述 #

我在Blazor Server网站中尝试通过Startup.cs的Configure方法添加CSP响应头，配置代码如下：

app.Use(async (context, next) =>
{
  context.Response.Headers.Add("X-Frame-Options", "SAMEORIGIN");               
  context.Response.Headers.Add("X-XSS-Protection", "1; mode=block");
  context.Response.Headers.Add("X-Content-Type-Options", "nosniff");
  context.Response.Headers.Add(
       "Content-Security-Policy",
       "base-uri 'self' 'nonce-8IBTHwOdqNKAWeKl7plt8g=='; " +
       "block-all-mixed-content;" +
       "default-src 'self' 'nonce-8IBTHwOdqNKAWeKl7plt8g=='" +
       "img-src data: https:; " +
       "script-src 'self' 'nonce-8IBTHwOdqNKAWeKl7plt8g=='; " +                    
       "style-src 'self' 'nonce-8IBTHwOdqNKAWeKl7plt8g==';" +
       "font-src 'self' 'nonce-8IBTHwOdqNKAWeKl7plt8g==';" +
       "upgrade-insecure-requests;" +
       "connect-src 'self' 'nonce-8IBTHwOdqNKAWeKl7plt8g==';");
    await next();   });

但本地引入的fontawesome/all.js触发CSP错误：

"all.js:2626 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-rAnd0m'". Either the 'unsafe-inline' keyword, a hash ('sha256-ixVUGs3ai0rMA0pgIVBN0KVlYbQip7/5SGmnUwJPNqE='), or a nonce ('nonce-...') is required to enable inline execution."

我已经在_Host.cshtml的库链接中添加了nonce：

<link href="~/lib/font-awesome/css/fontawesome.css" rel="stylesheet" nonce="8IBTHwOdqNKAWeKl7plt8g==" />
<script src="~/lib/font-awesome/js/all.js" nonce="8IBTHwOdqNKAWeKl7plt8g=="></script>

但问题依然存在：

• 页面渲染后，script标签的nonce被剥离成<script src="/lib/font-awesome/js/all.js" nonce></script>
• 移除"default-src 'self' 'nonce-8IBTHwOdqNKAWeKl7plt8g=='"后错误消失，但此时nonce完全不生效（即使不匹配也能运行）

请问如何在不放松安全策略的前提下正常使用这些库？

解决方案 #

1. 修复CSP配置的语法错误 #

你的default-src行末尾缺少分号，导致它和后续的img-src规则被合并，破坏了整个CSP的解析逻辑。修改后：

"default-src 'self' 'nonce-8IBTHwOdqNKAWeKl7plt8g=='; " +

2. 处理Font Awesome动态生成的内联样式 #

all.js会动态创建内联样式，这类样式不受你给script标签设置的nonce保护（nonce仅对当前脚本的执行生效，不对其动态生成的内容生效）。有两种安全的解决方式：

• 优先方案：改用Font Awesome CSS版本
  直接引入CSS文件代替JS，彻底避免动态内联样式的问题：

  <link href="~/lib/font-awesome/css/all.css" rel="stylesheet" nonce="8IBTHwOdqNKAWeKl7plt8g==" />
  

• 备选方案：添加样式哈希到CSP
  若必须使用JS版本，把错误提示中的哈希值加入style-src规则：

  "style-src 'self' 'nonce-8IBTHwOdqNKAWeKl7plt8g==' 'sha256-ixVUGs3ai0rMA0pgIVBN0KVlYbQip7/5SGmnUwJPNqE=';" +
  

  哈希是针对特定内联样式计算的，不会引入unsafe-inline的安全风险。

3. 解决Blazor Server剥离nonce的问题 #

Blazor Server的HTML渲染会过滤未知属性，导致nonce被剥离。需要通过以下方式处理：

• 首先，在中间件中动态生成随机nonce（硬编码nonce不符合CSP安全规范）并存储：

  app.Use(async (context, next) =>
  {
      var nonce = Convert.ToBase64String(Encoding.UTF8.GetBytes(Guid.NewGuid().ToString()));
      context.Items["CspNonce"] = nonce;
      context.Response.Headers.Add("Content-Security-Policy",
          $"base-uri 'self' 'nonce-{nonce}'; " +
          "block-all-mixed-content;" +
          "default-src 'self'; " +
          "img-src data: https:; " +
          $"script-src 'self' 'nonce-{nonce}'; " +                    
          $"style-src 'self' 'nonce-{nonce}' 'sha256-ixVUGs3ai0rMA0pgIVBN0KVlYbQip7/5SGmnUwJPNqE=';" +
          "font-src 'self';" +
          "upgrade-insecure-requests;" +
          "connect-src 'self';");
      await next();
  });
  

• 然后在_Host.cshtml中通过Context.Items获取nonce，用@Html.Raw输出以避免被过滤：

  @{
      var nonce = Context.Items["CspNonce"] as string;
  }
  <link href="~/lib/font-awesome/css/fontawesome.css" rel="stylesheet" @Html.Raw($"nonce=\"{nonce}\"") />
  <script src="~/lib/font-awesome/js/all.js" @Html.Raw($"nonce=\"{nonce}\"")></script>
  

4. 正确理解default-src的作用 #

default-src是CSP的 fallback规则，仅当未为某类资源指定具体规则时才生效。之前移除它后错误消失，是因为浏览器使用了更宽松的默认行为，但这会降低安全性。正确做法是保留default-src并配置合理值，同时为每个资源类型明确指定规则。

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