Nginx为Angular配置nonce模式CSP时脚本被拦截问题排查

两个异常场景本质都是Nginx指令作用域配置错误、CSP规则不全导致的：

• CSP头配置在server块外不生效：Nginx的add_header、sub_filter指令有严格的块级作用域，写在配置顶层（http块外）的指令不会被Nginx加载执行，因此网络层看不到CSP响应头。此时style标签带nonce是Angular运行时未被CSP拦截，正常执行DOM注入逻辑的结果，和Nginx配置无关。
  
• CSP头配置在server块内触发报错：
  1. sub_filter替换规则未放在实际处理响应的location/server作用域下，Nginx不会对返回的index.html做字符串替换，提前埋入的random-csp-nonce占位符无法被替换为请求对应的nonce值，因此style标签拿不到合法nonce。
  2. CSP规则缺失script-src配置：Angular运行时依赖内联脚本初始化、动态加载打包的JS资源，仅配置style-src的nonce规则时，浏览器会直接拦截所有脚本执行，Angular连给动态style注入nonce的逻辑都无法运行。
     
     
     

分Angular侧和Nginx侧两部分改造：

Angular侧配置 #

• 1. 注入CSP nonce令牌：在根模块（app.module.ts）中添加CSP_NONCE提供者，让Angular自动给所有动态创建的style、script标签绑定当前页面的nonce值：

import { NgModule, CSP_NONCE } from '@angular/core';

@NgModule({
  // 原有declarations、imports、bootstrap等配置保持不变
  providers: [
    {
      provide: CSP_NONCE,
      useFactory: () => {
        const nonceMeta = document.querySelector('meta[name="csp-nonce"]');
        return nonceMeta?.getAttribute('content') || '';
      }
    }
  ]
})
export class AppModule { }

• 2. 修改入口index.html：在head标签最前面添加nonce占位符meta标签，占位符字符串后续要和Nginx替换规则保持一致：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="csp-nonce" content="random-csp-nonce">
  <base href="/">
  <title>Angular应用</title>
  <!-- 其余原有首屏资源配置保持不变 -->
</head>
<body>
  <app-root></app-root>
</body>
</html>

• 3. 构建配置调整：如果构建后首屏内联的关键样式没有自动带上nonce，在angular.json对应项目的构建配置中，关闭关键样式内联选项：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "options": {
            "optimization": {
              "scripts": true,
              "styles": {
                "minify": true,
                "inlineCritical": false
              },
              "fonts": true
            }
          }
        }
      }
    }
  }
}

Nginx侧配置 #

所有响应头、内容替换指令必须放在http/server/location的有效作用域内，参考配置如下：

http {
  // 原有基础配置（mime类型引入、连接数配置等）保持不变
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  sendfile on;
  // gzip压缩配置
  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   1100;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  server {
    listen 80;
    http2_max_field_size 64k;
    http2_max_header_size 512k;
    root /usr/share/nginx/html;
    index index.html;

    // 安全响应头，加always参数保证非200响应也会携带头
    add_header X-Frame-Options "SAMEORIGIN" always;
    // CSP规则必须覆盖script-src，nonce值和替换后的请求id保持一致
    add_header Content-Security-Policy "default-src 'self'; img-src 'self' data:; script-src 'self' 'nonce-$request_id'; style-src 'self' 'nonce-$request_id';" always;

    // 内容替换规则，开启全类型替换、多次替换
    sub_filter_once off;
    sub_filter_types *;
    sub_filter random-csp-nonce $request_id;

    location / {
      try_files $uri $uri/ /index.html;
    }
  }
}

• 配置校验：修改完配置后先执行nginx -t检查语法，确认无报错后执行nginx -s reload重载配置生效。
• 生产环境注意：$request_id仅适合测试环境使用，生产环境建议通过Nginx njs模块生成加密安全的16位以上随机nonce，保证每个请求的nonce唯一不可预测，避免CSP被绕过。

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