咨询：如何使Content Security Policy Nonce在Angular AG Grid中生效

以下是针对AG Grid无法识别Angular设置的CSP Nonce的修复方案：

1. 利用AG Grid内置的CSP Nonce配置项 #

AG Grid提供了专门的cspNonce配置参数，可直接将你的Nonce传递给AG Grid，让它动态创建的脚本/样式自动带上Nonce：

• 在组件中获取Angular根元素上的ngCspNonce值，传入AG Grid的配置：

  import { Component, OnInit, ElementRef } from '@angular/core';
  import { GridOptions } from 'ag-grid-angular';
  
  @Component({
    selector: 'app-your-grid-component',
    templateUrl: './your-grid.component.html'
  })
  export class YourGridComponent implements OnInit {
    gridOptions: GridOptions = {};
  
    constructor(private elRef: ElementRef) {}
  
    ngOnInit(): void {
      // 从根应用元素获取ngCspNonce属性值
      const rootNonce = document.querySelector('[ngCspNonce]')?.getAttribute('ngCspNonce');
      if (rootNonce) {
        this.gridOptions.cspNonce = rootNonce;
      }
    }
  }
  

• 如果你的Nonce是通过服务生成并全局存储的，也可以直接从服务中获取后赋值给gridOptions.cspNonce。

2. 确保CSP策略包含必要指令 #

检查你的CSP响应头或meta标签，确保包含以下指令（替换{{ nonce }}为实际的Nonce值）：

Content-Security-Policy: 
  script-src 'nonce-{{ nonce }}' 'strict-dynamic';
  style-src 'nonce-{{ nonce }}' 'unsafe-inline';

注：AG Grid部分主题样式可能需要'unsafe-inline'，如果你的Nonce能覆盖所有样式注入，也可以尝试移除'unsafe-inline'，但部分旧版本AG Grid可能仍需要它。

3. 全局挂载Nonce（备选方案） #

如果上述配置不生效，可以将Nonce挂载到全局window对象，让AG Grid的内部逻辑能读取到：

• 在index.html中添加：

  <script nonce="{{ nonce }}">
    window.CSP_NONCE = '{{ nonce }}';
  </script>
  

• 然后在AG Grid初始化前，通过自定义DOM监听，给所有新创建的script和style标签添加Nonce：

  ngAfterViewInit(): void {
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        mutation.addedNodes.forEach(node => {
          if (node instanceof HTMLScriptElement || node instanceof HTMLStyleElement) {
            node.nonce = window.CSP_NONCE;
          }
        });
      });
    });
  
    observer.observe(document.body, { childList: true, subtree: true });
  }
  

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