Angular 4生产构建CSS遭Chrome/Firefox的CSP拦截，IE正常求解决

看起来你遇到的是**内容安全策略（CSP）**导致的问题——Chrome和Firefox对CSP的执行标准更严格，而IE（尤其是旧版本）对CSP的支持较弱，所以没触发拦截。下面给你几个可行的解决方案，从快速验证到生产环境最优解都有：

一、先确认问题根源：Spring Boot的CSP配置 #

首先检查你的Spring Boot应用是否主动配置了CSP响应头，可能是通过以下方式：

• Spring Security的HttpSecurity配置中设置了contentSecurityPolicy
• 自定义Filter添加了Content-Security-Policy头
• 第三方依赖自动注入了CSP规则

如果是默认没配置但仍出现拦截，大概率是Angular生产构建后的内联样式/脚本，被浏览器的默认CSP或Spring Boot的隐式安全策略拦截了。

二、解决方案 #

方案1：临时放宽CSP规则（快速验证，不推荐长期使用） #

如果只是想快速确认问题，可以暂时调整CSP规则允许内联样式。比如在Spring Security的配置中修改：

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .headers()
                .contentSecurityPolicy("default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline';");
    }
}

或者在application.properties中添加（适配支持的Spring Boot版本）：

spring.security.headers.content-security-policy=default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline';

⚠️ 注意：'unsafe-inline'会降低页面安全性，只建议用于临时测试，生产环境尽量避免。

方案2：Angular构建时提取内联样式（推荐） #

Angular生产构建默认可能会把部分样式内联到index.html中，这是触发CSP拦截的核心原因。我们可以修改Angular的构建配置，将内联样式提取到单独的CSS文件：

1. 打开项目根目录的angular.json
2. 找到projects -> [你的项目名] -> architect -> build -> options
3. 添加或修改extractCss为true：

"options": {
  "extractCss": true,
  // 其他原有配置...
}

4. 重新执行生产构建：ng build --prod
5. 将新构建的静态资源替换到Spring Boot的src/main/resources/static目录下

这样Angular会把所有内联样式提取为独立的.css文件，既避免触发CSP内联拦截，也符合前端资源优化的最佳实践。

方案3：使用Nonce实现安全的内联内容允许（生产环境最优解） #

如果必须保留内联样式/脚本，推荐用**Nonce（一次性随机值）**来安全地允许内联内容，替代风险较高的unsafe-inline：

步骤1：Spring Boot中生成并注入Nonce

创建一个Filter，生成随机Nonce并注入到请求和CSP头中：

@Component
public class NonceFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse res = (HttpServletResponse) response;
        
        // 生成随机Nonce
        String nonce = UUID.randomUUID().toString().replace("-", "");
        req.setAttribute("nonce", nonce);
        
        // 设置CSP头，允许带该Nonce的内联样式和脚本
        String cspPolicy = String.format("default-src 'self'; style-src 'self' 'nonce-%s'; script-src 'self' 'nonce-%s';", nonce, nonce);
        res.setHeader("Content-Security-Policy", cspPolicy);
        
        chain.doFilter(request, response);
    }
}

步骤2：修改Angular的index.html，注入Nonce

如果你的Spring Boot使用Thymeleaf作为模板引擎，把index.html放到src/main/resources/templates目录下，修改内联标签的属性：

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>Your App</title>
  <base href="/">
  <!-- 给内联样式添加nonce属性 -->
  <style nonce="[[${nonce}]]">
    /* Angular生成的内联样式内容 */
  </style>
  <!-- 其他资源引入... -->
</head>
<body>
  <app-root></app-root>
  <!-- 内联脚本也添加nonce属性 -->
  <script nonce="[[${nonce}]]">
    // 内联脚本内容
  </script>
</body>
</html>

如果是纯静态资源，也可以通过Filter动态修改index.html的内容，插入生成的Nonce值。

三、为什么IE能正常加载？ #

IE（尤其是IE11及以下）对CSP的支持非常有限，大部分情况下不会强制执行严格的CSP规则，所以即使存在内联样式/脚本，也不会触发拦截。但这不是长久之计，毕竟IE已被淘汰，还是要针对现代浏览器解决问题。

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