Spring Boot应用多浏览器出现CSP阻止favicon.ico加载错误求助

嘿，这个问题我之前帮好几个开发者排查过，咱们一步步来拆解哈～

先搞懂错误的本质 #

浏览器会自动请求页面的favicon.ico（就是标签栏上的小图标），默认路径是当前域名的根目录，也就是你的http://localhost:8080/favicon.ico。你看到的错误，核心原因是**内容安全策略（CSP）**的限制：

• 你的页面（可能是Spring Boot返回的HTML，或是你配置的CSP响应头）设置了default-src指令，但这个指令没有允许加载当前域名（http://localhost:8080）下的资源。
• CSP的default-src是所有资源类型的默认规则，如果没有单独给图片资源设置img-src，浏览器就会用default-src来判断是否允许加载favicon.ico（它属于图片资源）。
• 另外，如果你的项目里压根没放favicon.ico文件，请求会返回404，但浏览器的错误提示可能优先显示CSP拦截的问题，不过核心还是规则限制。

解决方案分这几种情况 #

1. 调整CSP规则，允许加载当前域名资源

如果是你手动在HTML里加了CSP meta标签，或者在Spring Boot里配置了CSP响应头，把'self'加入规则即可（'self'代表当前域名）：

• 用meta标签设置CSP：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:;">

这里额外加了data:是为了支持base64格式的图标（如果需要的话）。

• 在Spring Boot用Filter配置CSP头：

@Configuration
public class CspConfig {
    @Bean
    public FilterRegistrationBean<CspFilter> cspFilterRegistration() {
        FilterRegistrationBean<CspFilter> registration = new FilterRegistrationBean<>();
        registration.setFilter(new CspFilter());
        registration.addUrlPatterns("/*");
        return registration;
    }

    static class CspFilter implements Filter {
        @Override
        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
            HttpServletResponse response = (HttpServletResponse) res;
            response.setHeader("Content-Security-Policy", "default-src 'self'; img-src 'self' data:;");
            chain.doFilter(req, res);
        }
    }
}

2. 在Spring Boot项目中添加favicon.ico文件

就算CSP允许了，没有图标文件还是会返回404，建议补上：
把favicon.ico文件放到src/main/resources/static或者src/main/resources/public目录下，Spring Boot会自动把它作为静态资源对外提供，浏览器就能正常加载了。

3. 如果用了Spring Security，检查默认CSP配置

Spring Security默认可能会添加比较严格的CSP头，这时候需要在Security配置里调整规则：

@Configuration
@EnableWebSecurity
public class WebSecurityConfig {
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .headers(headers -> headers
                .contentSecurityPolicy(csp -> csp
                    .policyDirectives("default-src 'self'; img-src 'self' data:;")
                )
            );
        return http.build();
    }
}

临时测试方案（不推荐长期用）

如果你只是想快速验证其他功能，不想处理CSP或图标，可以在HTML里加个空的link标签阻止浏览器自动请求：

<link rel="icon" href="data:,">

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