Nginx中$ssl_session_id复用异常导致Angular CSP Nonce不匹配问题

你当前的问题核心在于：Nginx中每个请求（包括index.html和各类子请求）都会独立计算$cspNonce为当前请求的$ssl_session_id，当SSL会话复用状态变化时，子请求的Nonce会和index.html中的Nonce不匹配，导致CSP校验失败。

要实现仅在Angular应用重载（加载index.html）时生成新Nonce，后续子请求复用同一Nonce，可以通过Nginx Cookie持久化Nonce+精准控制替换逻辑来解决，同时修正Angular侧的依赖注入代码。

解决方案 #

1. 修改Nginx配置（核心调整） #

调整nginx.conf，通过Cookie存储Nonce，确保同一会话内所有请求复用同一Nonce，仅在返回index.html时生成新Nonce并注入页面：

server{
    listen 0.0.0.0:5443 ssl;
    server_name innocent.csrfexample.com;
    ssl_certificate     /etc/nginx/secureAngularExample.crt;
    ssl_certificate_key /etc/nginx/secureAngularExample.key;
    default_type application/octet-stream;
    error_log /var/log/nginx/error.log debug;

    # 优先从Cookie读取Nonce，无Cookie时用SSL会话ID生成
    set $cspNonce $cookie_csp_nonce;
    if ($cspNonce = "") {
        set $cspNonce $ssl_session_id;
    }

    gzip                    on;
    gzip_comp_level         6;
    gzip_vary               on;
    gzip_min_length         1000;
    gzip_proxied            any;
    gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers            16 8k;
    client_max_body_size    256M;

    # 全局统一CSP头，复用同一Nonce
    add_header 'Content-Security-Policy' "default-src 'self'; script-src 'self' 'nonce-$cspNonce'; style-src 'self' 'nonce-$cspNonce'" always;

    root /usr/share/nginx/html;

    location /assets/ {
        autoindex on;
    }

    location / {
        try_files $uri $uri/index.html /index.html =404;

        # 仅在返回index.html时，设置Cookie并替换页面内的Nonce占位符
        if ($request_uri ~* ^(/index.html)?$) {
            # 写入Cookie，确保后续请求复用Nonce，添加安全属性
            add_header Set-Cookie "csp_nonce=$cspNonce; Path=/; Secure; HttpOnly; SameSite=Strict";
            # 仅对HTML文件执行替换，减少性能开销
            sub_filter_once off;
            sub_filter_types text/html;
            sub_filter NGINX_CSP_NONCE $cspNonce;
        }
    }

    error_page  404              /index.html;
}

关键修改说明：

• 用Cookie持久化Nonce：同一会话内所有请求优先读取Cookie中的Nonce，避免子请求生成新值
• 精准控制替换逻辑：仅在返回index.html时执行sub_filter替换占位符，避免对静态资源做无效操作
• 增强Cookie安全性：添加Secure（仅HTTPS传输）、HttpOnly（防止XSS窃取）、SameSite=Strict（防止CSRF）属性

2. 修正Angular依赖注入代码 #

原app.module.ts中工厂函数的逻辑错误，返回的是InjectionToken创建函数而非实际Nonce值，修正如下：

import { InjectionToken } from '@angular/core';
import { Observable } from 'rxjs';
import { FormsModule } from '@angular/forms';
import { Meta } from '@angular/platform-browser';

// 定义Nonce的注入Token
export const CSP_NONCE = new InjectionToken<string>('CSP_NONCE');

// 工厂函数直接返回从meta标签读取的Nonce字符串
function setCSPNonce(metaService: Meta): string {
  return metaService.getTag("name='CSP_NONCE'")?.content || "";
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,  
  ],
  providers: [
    {
      provide: CSP_NONCE,
      useFactory: setCSPNonce,
      deps: [Meta]
      // 移除multi:true，此处不需要多提供者
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

关键修正说明：

• 提前定义CSP_NONCE注入Token，符合Angular依赖注入规范
• 工厂函数直接返回Nonce字符串，供其他组件/服务注入使用
• 移除错误的multi:true配置，避免依赖注入冲突

效果验证 #

1. 重启Nginx后加载应用，查看index.html的meta标签，确认Nonce已被替换
2. 查看控制台网络请求，所有子请求的CSP头Nonce与index.html中的值完全一致
3. 刷新页面（应用重载），会生成新的Nonce并更新Cookie，后续子请求自动复用新值

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