集成Spring Security后页面图片重载闪烁问题排查与解决

我之前也碰到过类似的情况，结合你提供的代码和现象来看，这个图片闪烁问题几乎可以确定是Spring Security默认的缓存控制策略导致的。

问题原因 #

当你没有集成Spring Security时，Spring Boot默认会对静态资源（比如图片、CSS、JS）设置合理的缓存规则，浏览器会缓存这些资源，重载页面时直接从本地缓存读取，不会重新请求，所以不会出现闪烁。

但集成Spring Security后，它默认会给所有响应添加严格的缓存控制头（比如Cache-Control: no-cache, no-store, max-age=0, must-revalidate），这会强制浏览器每次重载页面都重新请求所有静态资源。当图片重新加载时，就会出现短暂的空白然后显示图片，也就是你看到的"闪烁"现象。

虽然你的安全配置里设置了anyRequest().permitAll()，但Spring Security依然会处理这些请求的响应头，缓存规则还是会被修改。

可行的解决办法 #

办法1：让Spring Security忽略静态资源的拦截 #

直接把静态资源路径排除在Spring Security的拦截范围之外，这样这些资源的响应头就会回到Spring Boot默认的缓存策略，浏览器可以正常缓存它们。

修改你的WebSecurity配置类：

@Configuration
@EnableWebSecurity
public class WebSecurity extends WebSecurityConfigurerAdapter {

    @Override
    public void configure(WebSecurity web) throws Exception {
        // 忽略静态资源的拦截，根据你的实际静态资源路径调整
        web.ignoring().antMatchers("/background.jpg", "/main.css", "/**/*.jpg", "/**/*.css");
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
            .anyRequest().permitAll();
    }
}

这里antMatchers里的路径要和你实际的静态资源路径对应，比如如果你的静态资源都放在resources/static下，那么根路径就能直接访问，上面的配置就适用。

办法2：调整Spring Security的缓存控制规则 #

如果你不想忽略静态资源拦截，也可以直接修改Spring Security的缓存控制配置，允许浏览器缓存静态资源。

修改HttpSecurity的配置：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .authorizeRequests()
        .anyRequest().permitAll()
        // 配置缓存控制，允许静态资源被缓存
        .and()
        .headers()
        .cacheControl()
        .maxAge(3600) // 设置缓存有效期，比如1小时，根据需求调整
        .cachePublic();
}

这个配置会给所有响应设置合理的缓存头，浏览器会缓存资源，重载时就不会重新请求了。

办法3：手动给静态资源设置缓存策略（结合Spring MVC） #

你也可以通过Spring MVC的配置来单独给静态资源设置缓存，覆盖Spring Security的默认规则。比如添加一个WebMvcConfigurer配置类：

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/")
                .setCacheControl(CacheControl.maxAge(1, TimeUnit.HOURS).cachePublic());
    }
}

这个配置会给static下的所有静态资源设置1小时的缓存，优先级会高于Spring Security的默认缓存控制。

你提供的相关代码 #

pom.xml #

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>demo2</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>demo2</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.9.RELEASE</version>
<relativePath/>
<!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>

主配置类 #

@SpringBootApplication
public class Demo2Application {
    public static void main(String[] args) {
        SpringApplication.run(Demo2Application.class, args);
    }
}

安全配置类（原始） #

@Configuration
@EnableWebSecurity
public class WebSecurity extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
            .anyRequest().permitAll();
    }
}

HTML页面 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
INDEX PAGE
</body>
</html>

CSS样式 #

body {
    background: url("background.jpg") no-repeat, fixed;
    background-size: cover;
}

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