.NET 7(C#)中如何让Angular获取并使用CSP Nonce值？

你已经在.NET 7的Program.cs中完成了加密nonce生成与CSP响应头配置，以下是让Angular获取该nonce的两种简洁可靠方案：

方式一：全局变量传递（贴合官方思路） #

1. 扩展.NET中间件，在返回的HTML页面中注入全局nonce变量：

app.Use(async (context, next) =>
{
    var rng = RandomNumberGenerator.Create();
    var nonceBytes = new byte[32];
    rng.GetBytes(nonceBytes);
    var nonce = Convert.ToBase64String(nonceBytes);
    // 设置CSP响应头
    context.Response.Headers.Add("Content-Security-Policy", $"default-src 'self' 'nonce-{nonce}'");  

    // 拦截HTML响应，注入全局变量
    var originalBodyStream = context.Response.Body;
    using var responseBody = new MemoryStream();
    context.Response.Body = responseBody;

    await next();

    if (context.Response.ContentType?.StartsWith("text/html") == true)
    {
        responseBody.Seek(0, SeekOrigin.Begin);
        var html = await new StreamReader(responseBody).ReadToEndAsync();
        // 在<head>开头插入全局变量脚本
        var modifiedHtml = html.Replace("<head>", $"<head><script>globalThis.cspNonce = '{nonce}';</script>");
        
        responseBody.Seek(0, SeekOrigin.Begin);
        await new StreamWriter(responseBody).WriteAsync(modifiedHtml);
        responseBody.Seek(0, SeekOrigin.Begin);
        
        await responseBody.CopyToAsync(originalBodyStream);
    }
    else
    {
        responseBody.Seek(0, SeekOrigin.Begin);
        await responseBody.CopyToAsync(originalBodyStream);
    }
});

2. 在Angular的main.ts中注入CSP_NONCE令牌：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideCspNonce } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideCspNonce(globalThis.cspNonce)
  ]
});

方式二：Meta标签传递（直观易调试） #

1. 先在Angular的index.html中添加空的meta标签：

<meta name="csp-nonce" content="">

2. 修改.NET中间件，替换meta标签的content值：

app.Use(async (context, next) =>
{
    var rng = RandomNumberGenerator.Create();
    var nonceBytes = new byte[32];
    rng.GetBytes(nonceBytes);
    var nonce = Convert.ToBase64String(nonceBytes);
    context.Response.Headers.Add("Content-Security-Policy", $"default-src 'self' 'nonce-{nonce}'");  

    var originalBodyStream = context.Response.Body;
    using var responseBody = new MemoryStream();
    context.Response.Body = responseBody;

    await next();

    if (context.Response.ContentType?.StartsWith("text/html") == true)
    {
        responseBody.Seek(0, SeekOrigin.Begin);
        var html = await new StreamReader(responseBody).ReadToEndAsync();
        // 替换meta标签的content属性
        var modifiedHtml = html.Replace('<meta name="csp-nonce" content="">', $'<meta name="csp-nonce" content="{nonce}">');
        
        responseBody.Seek(0, SeekOrigin.Begin);
        await new StreamWriter(responseBody).WriteAsync(modifiedHtml);
        responseBody.Seek(0, SeekOrigin.Begin);
        
        await responseBody.CopyToAsync(originalBodyStream);
    }
    else
    {
        responseBody.Seek(0, SeekOrigin.Begin);
        await responseBody.CopyToAsync(originalBodyStream);
    }
});

3. 在Angular中读取meta标签值并注入：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideCspNonce } from '@angular/core';

const nonce = document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content') || '';

bootstrapApplication(AppComponent, {
  providers: [
    provideCspNonce(nonce)
  ]
});

方案对比 #

• 方式一无需操作DOM，性能略优，完全贴合Angular官方示例的传递思路。
• 方式二通过meta标签存储nonce，调试时可直接在浏览器开发者工具中查看，直观性更强。

两种方案都能稳定实现.NET与Angular的nonce同步，可根据自身调试需求和代码习惯选择。

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