Angular集成ag-grid部署Nginx后因CSP导致样式异常求助

问题根源 #

AG-Grid会动态创建<style>标签处理媒体查询等样式逻辑，你的CSP规则style-src 'self'禁止了所有内联样式（包括动态生成的），因此触发报错导致样式错乱。

解决方案：使用Nonce授权动态样式 #

无需放宽CSP策略或修改AG-Grid源码，通过以下步骤实现合规的样式授权：

1. 调整Nginx配置，注入Nonce

修改Nginx的CSP配置，生成随机Nonce并同步到响应头和页面中：

# 生成随机Nonce（依赖ngx_http_sub_module模块，需确保Nginx已编译该模块）
set $csp_nonce "";
if ($request_method = GET) {
    set $csp_nonce "nonce-$(openssl rand -hex 16)";
}

# 更新CSP头，将Nonce添加到style-src和script-src规则中
add_header Content-Security-Policy "object-src 'none';script-src 'self' '$csp_nonce';script-src-elem 'self' '$csp_nonce';style-src 'self' '$csp_nonce';base-uri 'self';" always;

# 将Nonce注入到Angular入口页面的<head>中
sub_filter '<head>' '<head><meta name="csp-nonce" content="$csp_nonce">';
sub_filter_once on;

2. 配置Angular传递Nonce给AG-Grid

在Angular的main.ts中，读取页面中的Nonce并传递给AG-Grid：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

// 获取页面元标签中的Nonce值
const nonceMeta = document.querySelector('meta[name="csp-nonce"]') as HTMLMetaElement;
const nonce = nonceMeta?.content;

// 传递Nonce给AG-Grid，动态生成的<style>标签会自动带上该Nonce属性
if (nonce) {
    (window as any).__ag_grid_csp_nonce = nonce;
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

方案原理 #

AG-Grid官方支持通过全局变量__ag_grid_csp_nonce指定Nonce，动态创建的样式标签会自动添加nonce属性，符合CSP规则中style-src 'self' 'nonce-xxx'的授权要求，既保持了严格的安全策略，又避免了修改源码的维护负担。

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