如何通过Apache httpd.conf与mod_cspnonce替换Angular index.html的CSP Nonce值

问题根源 #

mod_substitute和mod_sed无法直接解析Apache环境变量%{CSP_NONCE}e，这两个模块在输出过滤阶段处理文本时，会把变量语法当成字面量输出，导致替换失败。

可行解决方案 #

方案1：使用mod_include（服务器端包含） #

这是最可靠的方案，SSI指令可直接读取Apache环境变量：

1. 启用mod_include：确保httpd.conf中加载该模块（LoadModule include_module modules/mod_include.so）
2. 配置Apache处理HTML文件为SSI：

   # 保留.html后缀的配置
   AddHandler server-parsed .html
   AddOutputFilter INCLUDES .html
   
   # 改用.shtml后缀的配置（可选）
   # AddType text/html .shtml
   # AddOutputFilter INCLUDES .shtml
   

3. 修改index.html占位符：将CSP_NONCE替换为SSI输出指令

   <script src="https://../example1.js" nonce="<!--#echo var="CSP_NONCE" -->"></script>
   <script src="https://../example2.js" nonce="<!--#echo var="CSP_NONCE" -->"></script>
   <script src="https://../example3.js" nonce="<!--#echo var="CSP_NONCE" -->"></script>
   

4. 允许目标路径使用SSI：

   <Location />
       Options +Includes
   </Location>
   

方案2：使用mod_substitute（Apache 2.4.13+） #

2.4.13及以上版本的mod_substitute支持通过${VAR}引用环境变量：

<Location />
    AddOutputFilterByType SUBSTITUTE text/html
    # 确保CSP_NONCE环境变量可被Substitute访问
    PassEnv CSP_NONCE
    # 使用${CSP_NONCE}引用变量完成替换
    Substitute "s|CSP_NONCE|${CSP_NONCE}|i"
</Location>

额外注意事项（针对Angular应用） #

• 确保Angular构建时不修改/转义占位符：在angular.json的build选项中，禁用index.html压缩或配置保留注释：

  "build": {
    "options": {
      "index": {
        "input": "src/index.html",
        "output": "index.html",
        "minify": false
      }
    }
  }
  

• 验证变量有效性：可临时添加Header echo CSP_NONCE到配置中，查看响应头是否输出正确nonce值，确认mod_cspnonce已正确设置变量。

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