Angular+ASP项目CSP自动化实现问询：动态Nonce或哈希策略

我正在为Angular+ASP.NET项目实现内容安全策略（CSP），由于需要运行动态JS文件，尝试为script-src配置"strict-dynamic"。目前已通过静态nonce完成实现（显然不符合最佳实践），具体步骤为：

• 在startup.cs的CSP策略中添加script-src 'strict-dynamic' 'nonce-RandomNumber'；
• 执行dotnet publish -c Release -o publish发布项目；
• 修改publish/ClientApp/index.html，为所有打包脚本添加nonce=RandomNumber。

该方案可正常运行，现咨询以下问题：

1. 如何将上述流程自动化并完成项目发布？
2. 如何实现基于动态nonce的自动化流程，或改为自动读取Angular编译后的打包哈希并更新startup.cs中的CSP策略？

问题1：自动化现有静态nonce流程 #

方法1：使用MSBuild目标（推荐） #

直接在ASP.NET项目的.csproj文件中添加自定义MSBuild目标，让发布流程自动完成脚本标签的nonce注入：

1. 打开项目的.csproj文件，插入以下配置：

<Target Name="AddNonceToScripts" AfterTargets="Publish">
  <PropertyGroup>
    <NonceValue>RandomNumber</NonceValue>
    <IndexHtmlPath>$(PublishDir)ClientApp\index.html</IndexHtmlPath>
  </PropertyGroup>
  <Exec Command="powershell -Command &quot;(Get-Content '$(IndexHtmlPath)') -replace '&lt;script src=', '&lt;script nonce=&quot;$(NonceValue)&quot; src=' | Set-Content '$(IndexHtmlPath)'&quot;" />
</Target>

2. 之后只需执行dotnet publish -c Release -o publish，MSBuild会在发布完成后自动修改index.html中的所有脚本标签，添加上指定的nonce属性。

方法2：使用Shell脚本 #

如果偏好脚本方式，可写一个整合发布与修改步骤的脚本：

• Windows批处理（publish-with-nonce.bat）：

@echo off
set NONCE=RandomNumber
dotnet publish -c Release -o publish
powershell -Command "(Get-Content publish\ClientApp\index.html) -replace '<script src=', '<script nonce=&quot;%NONCE%&quot; src=' | Set-Content publish\ClientApp\index.html"

• Linux/macOS Bash脚本（publish-with-nonce.sh）：

#!/bin/bash
NONCE="RandomNumber"
dotnet publish -c Release -o publish
sed -i '' "s/<script src=/<script nonce=\"$NONCE\" src=/g" publish/ClientApp/index.html

运行对应脚本即可一键完成发布流程。

问题2：动态nonce或基于打包哈希的CSP实现 #

方案A：动态Nonce（最佳实践） #

动态nonce的核心是每次请求生成唯一值，同时同步到CSP头和页面脚本标签：

1. 在ASP.NET后端生成动态nonce：
   修改startup.cs，通过中间件动态生成nonce并设置CSP头：

app.Use(async (context, next) =>
{
    // 生成16字节随机数转Base64作为nonce，保证唯一性
    var nonceBytes = new byte[16];
    RandomNumberGenerator.Fill(nonceBytes);
    var nonce = Convert.ToBase64String(nonceBytes);
    
    context.Items["CspNonce"] = nonce;
    context.Response.Headers.Add("Content-Security-Policy", $"script-src 'strict-dynamic' 'nonce-{nonce}'");
    
    await next();
});

2. 改造Angular入口页面为Razor视图：
   将ClientApp/index.html改为Index.cshtml，从HttpContext中读取nonce注入脚本标签：

<script nonce="@Context.Items["CspNonce"]" src="main.[hash].js"></script>
<script nonce="@Context.Items["CspNonce"]" src="polyfills.[hash].js"></script>
<!-- 其他打包脚本同理 -->

3. 调整Angular发布路径：
   在angular.json中设置outputPath为ASP.NET项目的wwwroot目录，让编译后的文件直接发布到静态资源目录：

"architect": {
  "build": {
    "options": {
      "outputPath": "../wwwroot",
      // 其他配置...
    },
    "configurations": {
      "production": {
        // 生产环境配置...
      }
    }
  }
}

之后直接运行dotnet publish，Angular会自动编译到wwwroot，后端会在每次请求时生成动态nonce并同步到CSP头和脚本标签。

方案B：使用打包哈希（Subresource Integrity） #

利用Angular打包生成的文件哈希，结合'strict-dynamic'实现可信脚本验证：

1. 开启Angular资源完整性校验：
   在angular.json的生产环境配置中启用subresourceIntegrity：

"configurations": {
  "production": {
    "subresourceIntegrity": true,
    // 其他配置...
  }
}

开启后，Angular编译后的脚本标签会自动带上integrity属性，例如：

<script src="main.abc123.js" integrity="sha256-xxx..." crossorigin="anonymous"></script>

2. 简化CSP策略：
   在startup.cs中无需硬编码哈希，'strict-dynamic'会信任由带integrity属性的初始脚本加载的动态脚本：

// startup.cs中的CSP配置
context.Response.Headers.Add("Content-Security-Policy", "script-src 'strict-dynamic'");

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