1. Overview

1.概述

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.

为了优化网络，一些网站允许浏览器在本地存储中缓存CSS或JS等资源。这使得浏览器可以为每一个请求节省一个网络往返的时间。

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.

在本教程中，我们将看到HTTP的Clear-Site-Data响应头如何帮助网站从浏览器中清除本地存储的数据。

2. Clear-Site-Data Header

2.清除网站数据头

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.

就像Cache-Control头一样，Clear-site-Data是一个HTTP响应头。网站可以使用这个头来指示浏览器删除本地存储中的缓存数据。

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.

对于需要认证的网站，Cache-Control 头通常包含在/login 响应中，允许浏览器缓存用户数据。同样，网站在/logout响应中包含Clear-Site-Data标头，以清除属于该用户的任何缓存数据。

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:

由于网站可以在这些类型中的任何一种中存储数据，Clear-Site-Data 允许我们在标题中指定目标存储：。

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标头必须至少包括这些存储类型中的一种。

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.

在下面的章节中，我们将在Spring Security中实现一个/logout 服务，并在响应中包含一个Clear-Site-Data 头。

3. Maven Dependency

3.Maven的依赖性

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:

在我们写一些代码在Spring中添加Clear-Site-Data 头之前，让我们把spring-security-web和spring-security-config依赖项添加到项目中。

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

4. ClearSiteDataHeaderWriter in Spring Security

4.ClearSiteDataHeaderWriter 在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:

我们在前面讨论过，Spring提供了一个CacheControl实用类来在响应中写入Cache-Control头。类似地，Spring Security提供了一个ClearSiteDataHeaderWriter 类来轻松地在HTTP响应中添加头信息。

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SpringSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf()
          .disable()
          .formLogin()
          .loginPage("/login.html")
          .loginProcessingUrl("/perform_login")
          .defaultSuccessUrl("/homepage.html", true)
          .and()
          .logout().logoutUrl("/baeldung/logout")
          .addLogoutHandler(new HeaderWriterLogoutHandler(
            new ClearSiteDataHeaderWriter(
              ClearSiteDataHeaderWriter.Directive.CACHE,
              ClearSiteDataHeaderWriter.Directive.COOKIES,
              ClearSiteDataHeaderWriter.Directive.STORAGE)));
    }
}

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:

在这里，我们用Spring Security实现了一个登录和注销页面。因此，Spring将在响应所有的/baeldung/logout请求时添加一个Clear-Site-Data标头：。

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:

如果我们现在使用curl并向https://localhost:8080/baeldung/logout发送一个请求，我们会得到以下响应头。

{ [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

5.总结

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.

然后我们看到HTTP的Clear-Site-Data响应头是如何让网站强制浏览器清除本地缓存数据的。

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

最后，我们在Spring Security中用ClearSiteDataHeaderWriter 实现了一个注销页面，在控制器的响应中添加了这个头。

As always, the code is available over at GitHub.

一如既往，代码可在GitHub上获得。