1. Overview

For network optimization, some websites allow browsers to cache resources like CSS or JS in local storage. This allows browsers to save a network round trip for every request.

So caching resources is vital for improving the load time of web pages. Equally important is to clear the cached data once it’s not required. For example, if a user logs out of a website, browsers should remove all session data from the cache.

There are two main problems with browsers caching data longer than it’s required:

  • Modern websites use a rich set of CSS and JS files that consume a lot of browser memory
  • Websites that cache sensitive data like session cookies are prone to phishing attacks

In this tutorial, we’ll see how HTTP’s Clear-Site-Data response header helps websites in clearing locally stored data from the browsers.

2. Clear-Site-Data Header

Just like the Cache-Control header, Clear-Site-Data is an HTTP response header. Websites can use this header to instruct browsers to remove the data cached in local storage.

For websites that require authentication, the Cache-Control header is generally included in the /login response and allows browsers to cache user data. Similarly, websites include the Clear-Site-Data header in the /logout response to clear any cached data that belongs to this user.

At this point, it’s important to understand that browsers usually categorize local storage into different types:

  • Local Storage
  • Session Storage
  • Cookies

Since websites can store data in any one of these types, Clear-Site-Data allows us to specify the target storage in the header:

  • cache – to remove locally cached data and includes both private and shared browser caches
  • cookies – to remove data stored in browser cookies
  • storage – to clear local and session storage of the browser
  • executionContexts – this switch tells the browser to reload the browser tab for that URL
  • * (asterisk) – removes data from all of the above storage areas

As a result, the Clear-Site-Data header must include at least one of these storage types:

Clear-Site-Data: "cache", "cookies", "storage", "executionContexts"

In the following sections, we’ll implement a /logout service in Spring Security and include a Clear-Site-Data header in the response.

3. Maven Dependency

Before we write some code to add Clear-Site-Data header in Spring, let’s add the spring-security-web and spring-security-config dependencies to the project:

<dependency>
    <groupId>org.springframework.security</groupId>
    <artifactId>spring-security-web</artifactId>
    <version>6.1.5</version>
</dependency>
<dependency>
    <groupId>org.springframework.security</groupId>
    <artifactId>spring-security-config</artifactId>
    <version>6.1.5</version>
</dependency>

4. ClearSiteDataHeaderWriter in Spring Security

We discussed earlier that Spring provides a CacheControl utility class to write Cache-Control headers in the response. Similarly, Spring Security provides a ClearSiteDataHeaderWriter class to add the header in the HTTP response easily:

@Configuration
@EnableWebSecurity
@EnableMethodSecurity
public class SpringSecurityConfig {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http.csrf(AbstractHttpConfigurer::disable)
            .formLogin(httpSecurityFormLoginConfigurer ->
                    httpSecurityFormLoginConfigurer.loginPage("/login")
                            .loginProcessingUrl("/perform_login")
                            .defaultSuccessUrl("/homepage", true))
            .logout(httpSecurityLogoutConfigurer ->
                    httpSecurityLogoutConfigurer.logoutUrl("/baeldung/logout")
                            .addLogoutHandler(new HeaderWriterLogoutHandler(new ClearSiteDataHeaderWriter(CACHE, COOKIES, STORAGE))));
        return http.build();
    }
}

Here, we implemented a login and logout page with Spring Security. As a result, Spring will add a Clear-Site-Data header in response to all /baeldung/logout requests*:*

Clear-Site-Data: "cache", "cookies", "storage"

If we now use curl and send a request to https://localhost:8080/baeldung/logout, we’ll get the following headers in response:

{ [5 bytes data]
< HTTP/1.1 302
< Clear-Site-Data: "cache", "cookies", "storage"
< X-Content-Type-Options: nosniff
< X-XSS-Protection: 1; mode=block
< Cache-Control: no-cache, no-store, max-age=0, must-revalidate
< Pragma: no-cache
< Expires: 0
< Strict-Transport-Security: max-age=31536000 ; includeSubDomains
< X-Frame-Options: DENY
< Location: https://localhost:8080/login.html?logout
< Content-Length: 0
< Date: Tue, 17 Mar 2020 17:12:23 GMT

5. Conclusion

In this article, we studied the impact of browsers caching critical user data even when it’s not required. For example, browsers should not cache data after a user has logged out of the website.

We then saw how HTTP’s Clear-Site-Data response header allows websites to force browsers to clear locally cached data.

Finally, we implemented a logout page in Spring Security with ClearSiteDataHeaderWriter to add this header in the controller’s response.

As always, the code is available over at GitHub.