JHipster项目intl-tel-input的CSP拦截flags.png问题求助

问题描述 #

在JHipster项目中使用intl-tel-input插件时，本地环境下国家标识图片flags.png可正常加载显示，但部署到外部生产环境后无法显示，控制台提示“flags.png blocked:csp”。直接通过URL访问该图片可正常打开，但应用被CSP规则拦截无法加载。

当前配置 #

SecurityConfiguration.java 代码： #

headers
                    .contentSecurityPolicy(csp ->
                        csp.policyDirectives(
                            jHipsterProperties.getSecurity().getContentSecurityPolicy() + // Corrigir a concatenação
                            "script-src 'self' 'unsafe-inline' 'unsafe-eval' " +
                            "https://www.youtube.com https://www.googleapis.com https://storage.googleapis.com https://cdnjs.cloudflare.com;" +
                            "frame-src 'self' https://www.youtube.com https://youtube.com;" +
                            "img-src 'self' https://img.youtube.com https://cdnjs.cloudflare.com data:;" +
                            "media-src 'self' https://www.youtube.com https://youtube.com;"
                        ))
                    .frameOptions(FrameOptionsConfig::sameOrigin)
                    .referrerPolicy(referrer -> referrer.policy(ReferrerPolicyHeaderWriter.ReferrerPolicy.STRICT_ORIGIN_WHEN_CROSS_ORIGIN))
                    .permissionsPolicy(
                        permissions ->
                            permissions.policy(
                                "camera=(), fullscreen=(self), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), midi=(), payment=(), sync-xhr=()"
                            )
                    ))

HTML 代码： #

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
</head>

解决方案 #

核心问题分析 #

flags.png是通过intl-tel-input的CSS文件作为背景图加载的，当前配置缺失style-src对cdnjs域名的许可，导致浏览器加载外部CSS后，拦截了其中引用的图片资源；另外CSP指令拼接可能存在语法或重复定义问题，也会影响规则生效。

具体修复步骤 #

1. 补充style-src指令：在CSP配置中新增style-src规则，允许加载cdnjs的样式文件，同时保留'unsafe-inline'（intl-tel-input的CSS可能包含内联样式）
2. 确保CSP指令语法正确：检查默认CSP与自定义规则的拼接，避免重复定义相同指令（可通过打印jHipsterProperties.getSecurity().getContentSecurityPolicy()的值确认默认规则）
3. 修改后的SecurityConfiguration.java配置：

headers
    .contentSecurityPolicy(csp ->
        csp.policyDirectives(
            jHipsterProperties.getSecurity().getContentSecurityPolicy() +
            "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.youtube.com https://www.googleapis.com https://storage.googleapis.com https://cdnjs.cloudflare.com;" +
            "frame-src 'self' https://www.youtube.com https://youtube.com;" +
            "img-src 'self' https://img.youtube.com https://cdnjs.cloudflare.com data:;" +
            "media-src 'self' https://www.youtube.com https://youtube.com;" +
            "style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com;" // 新增style-src规则
        ))
    .frameOptions(FrameOptionsConfig::sameOrigin)
    .referrerPolicy(referrer -> referrer.policy(ReferrerPolicyHeaderWriter.ReferrerPolicy.STRICT_ORIGIN_WHEN_CROSS_ORIGIN))
    .permissionsPolicy(
        permissions ->
            permissions.policy(
                "camera=(), fullscreen=(self), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), midi=(), payment=(), sync-xhr=()"
            )
    ))

4. 额外排查步骤：
   • 开启CSP报告模式（Content-Security-Policy-Report-Only），获取详细的拦截日志，确认具体拦截原因
   • 清除生产环境浏览器缓存，避免旧CSP规则残留

内容的提问来源于stack exchange，提问作者JackmanBR - Paulo Guerra