.NET 7中Content-Security-Policy配置异常及正确实现方法

常见问题定位 #

你的问题核心集中在三点：

1. CSP指令拼写错误或不被浏览器识别
2. 默认拦截了内联脚本/样式（Bootstrap组件、页面内联代码均会触发）
3. 外部资源（Bootstrap CDN、字体等）未加入对应白名单

具体修复步骤 #

1. 修正Program.cs中的CSP中间件配置 #

确保指令拼写正确，同时覆盖所有用到的资源来源：

app.Use(async (context, next) =>
{
    context.Response.Headers.Append(
        "Content-Security-Policy",
        "default-src 'self'; " +
        "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net; " + // 兼容Bootstrap JS CDN与临时内联代码
        "style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; " + // 允许Bootstrap样式CDN
        "img-src 'self' data:; " + // 支持本地图片和base64格式图片（弹窗组件常用）
        "font-src 'self' https://cdn.jsdelivr.net; " + // 放行Bootstrap字体资源
        "connect-src 'self'; " + // 允许本地接口请求
        "frame-src 'self'; " + // 支持弹窗框架
        "object-src 'none';" // 禁用插件类资源，提升安全性
    );
    await next();
});

注：'unsafe-inline'和'unsafe-eval'是临时兼容方案，后续可通过提取内联代码到单独文件、或用哈希值替代，移除unsafe前缀以提升安全性。

2. 处理_Layout.cshtml中的内联代码 #

• 优先把内联脚本/样式迁移到wwwroot下的单独文件（比如site.js、site.css），通过<script src="~/js/site.js"></script>引入
• 若必须保留内联代码，可从浏览器控制台的CSP报错信息中复制对应的SHA-256哈希值，添加到script-src或style-src中，例如：

  script-src 'self' 'sha256-abcdef123456...' https://cdn.jsdelivr.net;
  

3. 解决外部资源加载失败 #

确认你使用的Bootstrap CDN域名（如https://cdn.jsdelivr.net）已加入对应指令的白名单：

• 脚本资源加在script-src
• 样式资源加在style-src
• 字体资源加在font-src
• 其他外部资源（如统计脚本）也要对应添加到指令白名单

4. 调试技巧 #

• 打开浏览器开发者工具的Console面板，报错信息会明确指出被拦截的资源、以及需要添加到哪个CSP指令中
• 调试阶段可改用Content-Security-Policy-Report-Only头，只上报错误但不拦截资源，方便排查：

  context.Response.Headers.Append("Content-Security-Policy-Report-Only", "你的CSP规则");
  

最终安全优化建议 #

调试完成后，逐步移除'unsafe-inline'和'unsafe-eval'：

1. 所有内联代码迁移到单独文件
2. 对无法移除的内联代码，使用nonce（随机数）替代unsafe前缀：

   // Program.cs中生成nonce
   var nonce = Guid.NewGuid().ToString("N");
   app.Use(async (context, next) =>
   {
       context.Items["CspNonce"] = nonce;
       context.Response.Headers.Append(
           "Content-Security-Policy",
           $"script-src 'self' 'nonce-{nonce}' https://cdn.jsdelivr.net; " +
           // 其他指令...
       );
       await next();
   });
   

   在_Layout.cshtml中引用nonce：

   <script nonce="@Context.Items["CspNonce"]">
       // 内联脚本内容
   </script>
   

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