如何在Apache+mod_cspnonce部署的Angular应用index.html中替换CSP nonce值？

你已经通过Apache配置成功生成并在CSP响应头中注入了nonce，接下来要在Angular的index.html中同步这个nonce，有两种可行方案：

方案一：使用Apache的mod_substitute替换HTML内容 #

1. 先启用mod_substitute模块（未启用时执行）：

   a2enmod substitute
   

2. 在Apache配置中添加替换规则，将index.html里的占位符替换为实际nonce值：

   # 保留已有的CSP头配置
   Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'nonce-%{CSP_NONCE}e'"
   
   # 针对index.html启用内容替换
   <Location "/">
       AddOutputFilterByType SUBSTITUTE text/html
       Substitute "s|ngCspNonce=\"CSP_NONCE\"|ngCspNonce=\"%{CSP_NONCE}e\"|ni"
   </Location>
   

3. 保持index.html中的app标签占位符与替换规则匹配：

   <app ngCspNonce="CSP_NONCE"></app>
   

4. 重启Apache使配置生效。

方案二：通过Angular SSR注入nonce #

如果你的应用使用Angular服务器端渲染（SSR），可直接在服务端获取Apache传递的nonce并注入模板：

1. 在服务端代码（如server.ts）中，从请求头或环境变量获取CSP_NONCE值并替换模板占位符：

   import { renderModule } from '@angular/platform-server';
   import { AppServerModule } from './src/main.server';
   import { readFileSync } from 'fs';
   import { join } from 'path';
   
   const template = readFileSync(join(__dirname, '..', 'browser', 'index.html')).toString();
   
   export function app(req, res) {
     const nonce = req.headers['x-csp-nonce'];
     const html = template.replace('ngCspNonce="CSP_NONCE"', `ngCspNonce="${nonce}"`);
     renderModule(AppServerModule, {
       document: html,
       url: req.url,
     }).then((renderedHtml) => {
       res.setHeader('Content-Security-Policy', `default-src 'self'; script-src 'self' 'nonce-${nonce}'`);
       res.send(renderedHtml);
     });
   }
   

2. 配置Apache将生成的nonce通过请求头传递给SSR服务：

   RequestHeader set X-CSP-NONCE "%{CSP_NONCE}e"
   

关键注意事项 #

• 确保nonce每个请求唯一，mod_cspnonce已实现此特性，需避免缓存替换后的index.html，否则nonce会固定，失去CSP安全作用。
• 若使用CDN或静态缓存，需配置缓存策略排除index.html。

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