PrimeFaces项目配置CSP白名单引入three.js遇异常求助

问题根源 #

同时配置primefaces.CSP=true和primefaces.CSP_POLICY时，PrimeFaces会同时输出默认CSP头与自定义CSP头，导致浏览器规则冲突；仅配置primefaces.CSP_POLICY时，因未启用CSP功能，不会生成任何CSP头。另外硬编码nonce值会和PrimeFaces自动生成的随机nonce不匹配，直接导致three.js被拦截。

正确配置步骤 #

1. 启用CSP并定义完整自定义策略 #

在web.xml中同时启用CSP并配置包含PrimeFaces必要资源、three.js规则的完整策略，避免重复生成头：

<context-param>
    <!-- 启用CSP功能 -->
    <param-name>primefaces.CSP</param-name>
    <param-value>true</param-value>
</context-param>

<context-param>
    <!-- 自定义CSP策略，覆盖核心规则 -->
    <param-name>primefaces.CSP_POLICY</param-name>
    <param-value>
        default-src 'self';
        script-src 'self' 'nonce-${cspNonce}';
        style-src 'self' 'unsafe-inline';
        img-src 'self' data:;
        font-src 'self';
        connect-src 'self';
    </param-value>
</context-param>

2. 正确使用动态Nonce #

不要硬编码nonce值，PrimeFaces会自动生成随机nonce，页面中通过EL表达式引用即可：

<script src="three.js" nonce="#{cspNonce}"></script>

3. 适配three.js的加载来源 #

• 如果three.js是同域资源，'self'规则已允许加载，无需额外添加；
• 如果是外部域名资源，需在script-src中补充完整域名（如https://cdn.example.com），而非仅写文件名。

验证效果 #

启动应用后，通过浏览器开发者工具的「网络」标签查看响应头，确认仅存在一个Content-Security-Policy头且规则正确；同时检查控制台无CSP拦截报错，three.js正常加载。

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