如何在Azure托管的Angular中动态替换ngCspNonce的值

针对你不想用unsafe-inline、需在返回index.html前替换ngCspNonce属性值的需求，分两种常见Azure托管场景给出具体操作：

场景1：Azure App Service（Web Apps）托管 #

方案1：Node.js中间件动态生成替换 #

如果你的Angular应用用Node.js托管静态文件，可通过自定义中间件实现：

1. 在项目根目录新建server.js，代码如下：

const express = require('express');
const fs = require('fs');
const path = require('path');
const crypto = require('crypto');

const app = express();
const port = process.env.PORT || 3000;
const appDistPath = path.join(__dirname, 'dist', '你的Angular应用名称');

app.use((req, res, next) => {
  // 生成随机nonce值
  const nonce = crypto.randomBytes(16).toString('hex');
  // 设置CSP响应头
  res.setHeader('Content-Security-Policy', `style-src 'self' 'nonce-${nonce}'; script-src 'self' 'nonce-${nonce}';`);

  // 读取并修改index.html
  const indexPath = path.join(appDistPath, 'index.html');
  fs.readFile(indexPath, 'utf8', (err, data) => {
    if (err) return next(err);
    // 替换ngCspNonce占位符
    const modifiedIndex = data.replace(/ngCspNonce="([^"]*)"/, `ngCspNonce="${nonce}"`);
    res.send(modifiedIndex);
  });
});

// 托管静态资源
app.use(express.static(appDistPath));

app.listen(port, () => {
  console.log(`服务运行在端口 ${port}`);
});

2. 修改package.json的启动脚本：

"scripts": {
  "start": "node server.js",
  "build": "ng build --configuration production"
}

3. 部署到Azure App Service时，选择Node.js runtime即可。

方案2：IIS URL Rewrite模块（Windows环境） #

如果部署在Windows版App Service，用IIS的URL Rewrite和自定义模块实现：

1. 项目根目录新建web.config：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <outboundRules rewriteBeforeCache="true">
        <!-- 替换CSP meta标签中的nonce -->
        <rule name="Update CSP Nonce">
          <match filterByTags="Meta" pattern="http-equiv=&quot;Content-Security-Policy&quot;" />
          <conditions>
            <add input="{RESPONSE_X-Nonce}" pattern="(.+)" />
          </conditions>
          <action type="Rewrite" value="Content-Security-Policy: style-src 'self' 'nonce-{C:1}';" />
        </rule>
        <!-- 替换index.html中的ngCspNonce属性 -->
        <rule name="Replace ngCspNonce">
          <match filterByTags="Any" pattern="ngCspNonce=&quot;[^&quot;]*&quot;" />
          <conditions>
            <add input="{RESPONSE_X-Nonce}" pattern="(.+)" />
          </conditions>
          <action type="Rewrite" value="ngCspNonce=&quot;{C:1}&quot;" />
        </rule>
      </outboundRules>
    </rewrite>
    <modules runAllManagedModulesForAllRequests="true">
      <add name="NonceGenerator" type="NonceGenerator" />
    </modules>
  </system.webServer>
</configuration>

2. 创建C#自定义模块NonceGenerator.cs生成nonce：

using System;
using System.Web;

public class NonceGenerator : IHttpModule
{
    public void Init(HttpApplication context)
    {
        context.PreRequestHandlerExecute += GenerateNonce;
    }

    private void GenerateNonce(object sender, EventArgs e)
    {
        var app = (HttpApplication)sender;
        var nonce = Guid.NewGuid().ToString().Replace("-", string.Empty);
        app.Context.Response.AddHeader("X-Nonce", nonce);
        app.Context.Response.AddHeader("Content-Security-Policy", $"style-src 'self' 'nonce-{nonce}';");
    }

    public void Dispose() { }
}

3. 编译该模块为DLL，上传到App Service的bin目录，配置IIS启用该模块。

场景2：Azure存储账户静态网站托管 #

静态网站本身不支持动态修改文件，需通过Azure Functions做反向代理实现：

1. 创建HTTP触发的Azure Function，代码如下（C#）：

using System;
using System.Net.Http;
using System.Threading.Tasks;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Logging;
using System.Text.RegularExpressions;

public static class NonceProxyFunction
{
    private static readonly HttpClient _httpClient = new HttpClient();

    [FunctionName("NonceProxyFunction")]
    public static async Task<IActionResult> Run(
        [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "{*path}")] HttpRequest req,
        string path,
        ILogger log)
    {
        // 替换为你的静态网站URL
        var staticSiteUrl = $"https://你的存储账户名.z22.web.core.windows.net/{(string.IsNullOrEmpty(path) ? "index.html" : path)}";
        var response = await _httpClient.GetAsync(staticSiteUrl);
        var content = await response.Content.ReadAsStringAsync();

        // 仅处理index.html
        if (string.IsNullOrEmpty(path) || path.EndsWith("index.html"))
        {
            var nonce = Guid.NewGuid().ToString().Replace("-", string.Empty);
            // 替换ngCspNonce属性
            content = Regex.Replace(content, @"ngCspNonce=""[^""]*""", $"ngCspNonce=\"{nonce}\"");
            // 添加CSP响应头
            req.HttpContext.Response.Headers.Add("Content-Security-Policy", $"style-src 'self' 'nonce-{nonce}';");
        }

        return new ContentResult
        {
            Content = content,
            ContentType = response.Content.Headers.ContentType?.ToString(),
            StatusCode = (int)response.StatusCode
        };
    }
}

2. 将用户请求路由到该Azure Function，由它转发请求到静态网站，修改index.html后返回给用户。

注意事项 #

• 确保Angular项目已开启nonce支持：在angular.json的build配置中添加"nonce": true。
• 每个请求的nonce必须唯一，不能复用，避免安全风险。
• 用浏览器开发者工具的Console标签检查是否有CSP报错，验证配置生效。

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