Parcourir la source

Use static CSS in servlet default UI

Daniel Garnier-Moiroux il y a 1 an
Parent
commit
11616a1d78

+ 1 - 4
config/src/main/java/org/springframework/security/config/annotation/web/configurers/DefaultLoginPageConfigurer.java

@@ -75,14 +75,11 @@ public final class DefaultLoginPageConfigurer<H extends HttpSecurityBuilder<H>>
 
 	private DefaultLogoutPageGeneratingFilter logoutPageGeneratingFilter = new DefaultLogoutPageGeneratingFilter();
 
-	private DefaultResourcesFilter defaultResourcesFilter = new DefaultResourcesFilter();
-
 	@Override
 	public void init(H http) {
 		this.loginPageGeneratingFilter.setResolveHiddenInputs(DefaultLoginPageConfigurer.this::hiddenInputs);
 		this.logoutPageGeneratingFilter.setResolveHiddenInputs(DefaultLoginPageConfigurer.this::hiddenInputs);
 		http.setSharedObject(DefaultLoginPageGeneratingFilter.class, this.loginPageGeneratingFilter);
-		http.setSharedObject(DefaultResourcesFilter.class, this.defaultResourcesFilter);
 	}
 
 	private Map<String, String> hiddenInputs(HttpServletRequest request) {
@@ -102,7 +99,7 @@ public final class DefaultLoginPageConfigurer<H extends HttpSecurityBuilder<H>>
 		if (this.loginPageGeneratingFilter.isEnabled() && authenticationEntryPoint == null) {
 			this.loginPageGeneratingFilter = postProcess(this.loginPageGeneratingFilter);
 			http.addFilter(this.loginPageGeneratingFilter);
-			http.addFilter(this.defaultResourcesFilter);
+			http.addFilter(DefaultResourcesFilter.css());
 			LogoutConfigurer<H> logoutConfigurer = http.getConfigurer(LogoutConfigurer.class);
 			if (logoutConfigurer != null) {
 				http.addFilter(this.logoutPageGeneratingFilter);

+ 47 - 152
config/src/test/java/org/springframework/security/config/annotation/web/configurers/DefaultLoginPageConfigurerTests.java

@@ -70,143 +70,6 @@ import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.
 @ExtendWith(SpringTestContextExtension.class)
 public class DefaultLoginPageConfigurerTests {
 
-	public static final String EXPECTED_HTML_HEAD = """
-			<!DOCTYPE html>
-			<html lang="en">
-			  <head>
-			    <meta charset="utf-8">
-			    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-			    <meta name="description" content="">
-			    <meta name="author" content="">
-			    <title>Please sign in</title>
-			    <style>
-			    /* General layout */
-			    body {
-			      font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-			      background-color: #eee;
-			      padding: 40px 0;
-			      margin: 0;
-			      line-height: 1.5;
-			    }
-			\s\s\s\s
-			    h2 {
-			      margin-top: 0;
-			      margin-bottom: 0.5rem;
-			      font-size: 2rem;
-			      font-weight: 500;
-			      line-height: 2rem;
-			    }
-			\s\s\s\s
-			    .content {
-			      margin-right: auto;
-			      margin-left: auto;
-			      padding-right: 15px;
-			      padding-left: 15px;
-			      width: 100%;
-			      box-sizing: border-box;
-			    }
-			\s\s\s\s
-			    @media (min-width: 800px) {
-			      .content {
-			        max-width: 760px;
-			      }
-			    }
-			\s\s\s\s
-			    /* Components */
-			    a,
-			    a:visited {
-			      text-decoration: none;
-			      color: #06f;
-			    }
-			\s\s\s\s
-			    a:hover {
-			      text-decoration: underline;
-			      color: #003c97;
-			    }
-			\s\s\s\s
-			    input[type="text"],
-			    input[type="password"] {
-			      height: auto;
-			      width: 100%;
-			      font-size: 1rem;
-			      padding: 0.5rem;
-			      box-sizing: border-box;
-			    }
-			\s\s\s\s
-			    button {
-			      padding: 0.5rem 1rem;
-			      font-size: 1.25rem;
-			      line-height: 1.5;
-			      border: none;
-			      border-radius: 0.1rem;
-			      width: 100%;
-			    }
-			\s\s\s\s
-			    button.primary {
-			      color: #fff;
-			      background-color: #06f;
-			    }
-			\s\s\s\s
-			    .alert {
-			      padding: 0.75rem 1rem;
-			      margin-bottom: 1rem;
-			      line-height: 1.5;
-			      border-radius: 0.1rem;
-			      width: 100%;
-			      box-sizing: border-box;
-			      border-width: 1px;
-			      border-style: solid;
-			    }
-			\s\s\s\s
-			    .alert.alert-danger {
-			      color: #6b1922;
-			      background-color: #f7d5d7;
-			      border-color: #eab6bb;
-			    }
-			\s\s\s\s
-			    .alert.alert-success {
-			      color: #145222;
-			      background-color: #d1f0d9;
-			      border-color: #c2ebcb;
-			    }
-			\s\s\s\s
-			    .screenreader {
-			      position: absolute;
-			      clip: rect(0 0 0 0);
-			      height: 1px;
-			      width: 1px;
-			      padding: 0;
-			      border: 0;
-			      overflow: hidden;
-			    }
-			\s\s\s\s
-			    table {
-			      width: 100%;
-			      max-width: 100%;
-			      margin-bottom: 2rem;
-			    }
-			\s\s\s\s
-			    .table-striped tr:nth-of-type(2n + 1) {
-			      background-color: #e1e1e1;
-			    }
-			\s\s\s\s
-			    td {
-			      padding: 0.75rem;
-			      vertical-align: top;
-			    }
-			\s\s\s\s
-			    /* Login / logout layouts */
-			    .login-form,
-			    .logout-form {
-			      max-width: 340px;
-			      padding: 0 15px 15px 15px;
-			      margin: 0 auto 2rem auto;
-			      box-sizing: border-box;
-			    }
-			    </style>
-			  </head>
-			""";
-
 	public final SpringTestContext spring = new SpringTestContext(this);
 
 	@Autowired
@@ -227,9 +90,17 @@ public class DefaultLoginPageConfigurerTests {
 		this.mvc.perform(get("/login").sessionAttr(csrfAttributeName, csrfToken))
 				.andExpect((result) -> {
 					CsrfToken token = (CsrfToken) result.getRequest().getAttribute(CsrfToken.class.getName());
-					assertThat(result.getResponse().getContentAsString()).isEqualTo(
-						EXPECTED_HTML_HEAD +
-						"""
+					assertThat(result.getResponse().getContentAsString()).isEqualTo("""
+						<!DOCTYPE html>
+						<html lang="en">
+						  <head>
+						    <meta charset="utf-8">
+						    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+						    <meta name="description" content="">
+						    <meta name="author" content="">
+						    <title>Please sign in</title>
+						    <link href="/default-ui.css" rel="stylesheet" />
+						  </head>
 						  <body>
 						    <div class="content">
 						      <form class="login-form" method="post" action="/login">
@@ -274,9 +145,17 @@ public class DefaultLoginPageConfigurerTests {
 				.sessionAttr(csrfAttributeName, csrfToken))
 				.andExpect((result) -> {
 					CsrfToken token = (CsrfToken) result.getRequest().getAttribute(CsrfToken.class.getName());
-					assertThat(result.getResponse().getContentAsString()).isEqualTo(
-						EXPECTED_HTML_HEAD +
-						"""
+					assertThat(result.getResponse().getContentAsString()).isEqualTo("""
+						<!DOCTYPE html>
+						<html lang="en">
+						  <head>
+						    <meta charset="utf-8">
+						    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+						    <meta name="description" content="">
+						    <meta name="author" content="">
+						    <title>Please sign in</title>
+						    <link href="/default-ui.css" rel="stylesheet" />
+						  </head>
 						  <body>
 						    <div class="content">
 						      <form class="login-form" method="post" action="/login">
@@ -325,9 +204,17 @@ public class DefaultLoginPageConfigurerTests {
 		this.mvc.perform(get("/login?logout").sessionAttr(csrfAttributeName, csrfToken))
 				.andExpect((result) -> {
 					CsrfToken token = (CsrfToken) result.getRequest().getAttribute(CsrfToken.class.getName());
-					assertThat(result.getResponse().getContentAsString()).isEqualTo(
-						EXPECTED_HTML_HEAD +
-						"""
+					assertThat(result.getResponse().getContentAsString()).isEqualTo("""
+						<!DOCTYPE html>
+						<html lang="en">
+						  <head>
+						    <meta charset="utf-8">
+						    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+						    <meta name="description" content="">
+						    <meta name="author" content="">
+						    <title>Please sign in</title>
+						    <link href="/default-ui.css" rel="stylesheet" />
+						  </head>
 						  <body>
 						    <div class="content">
 						      <form class="login-form" method="post" action="/login">
@@ -357,9 +244,9 @@ public class DefaultLoginPageConfigurerTests {
 	@Test
 	public void cssWhenFormLoginConfiguredThenServesCss() throws Exception {
 		this.spring.register(DefaultLoginPageConfig.class).autowire();
-		this.mvc.perform(get("/spring-security/spring-security.css"))
+		this.mvc.perform(get("/default-ui.css"))
 				.andExpect(status().isOk())
-				.andExpect(header().string("content-type", "text/css;charset=utf-8"))
+				.andExpect(header().string("content-type", "text/css;charset=UTF-8"))
 				.andExpect(content().string(containsString("body {")));
 	}
 
@@ -384,9 +271,17 @@ public class DefaultLoginPageConfigurerTests {
 		this.mvc.perform(get("/login").sessionAttr(csrfAttributeName, csrfToken))
 				.andExpect((result) -> {
 					CsrfToken token = (CsrfToken) result.getRequest().getAttribute(CsrfToken.class.getName());
-					assertThat(result.getResponse().getContentAsString()).isEqualTo(
-						EXPECTED_HTML_HEAD +
-						"""
+					assertThat(result.getResponse().getContentAsString()).isEqualTo("""
+						<!DOCTYPE html>
+						<html lang="en">
+						  <head>
+						    <meta charset="utf-8">
+						    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+						    <meta name="description" content="">
+						    <meta name="author" content="">
+						    <title>Please sign in</title>
+						    <link href="/default-ui.css" rel="stylesheet" />
+						  </head>
 						  <body>
 						    <div class="content">
 						      <form class="login-form" method="post" action="/login">
@@ -466,7 +361,7 @@ public class DefaultLoginPageConfigurerTests {
 			.filter((filter) -> filter.getClass().isAssignableFrom(DefaultResourcesFilter.class))
 			.count()).isZero();
 		//@formatter:off
-		this.mvc.perform(get("/spring-security/spring-security.css"))
+		this.mvc.perform(get("/default-ui.css"))
 				.andExpect(status().is3xxRedirection());
 		//@formatter:on
 	}

+ 23 - 139
config/src/test/java/org/springframework/security/config/http/FormLoginBeanDefinitionParserTests.java

@@ -45,143 +45,6 @@ public class FormLoginBeanDefinitionParserTests {
 
 	private static final String CONFIG_LOCATION_PREFIX = "classpath:org/springframework/security/config/http/FormLoginBeanDefinitionParserTests";
 
-	public static final String EXPECTED_HTML_HEAD = """
-			<!DOCTYPE html>
-			<html lang="en">
-			  <head>
-			    <meta charset="utf-8">
-			    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-			    <meta name="description" content="">
-			    <meta name="author" content="">
-			    <title>Please sign in</title>
-			    <style>
-			    /* General layout */
-			    body {
-			      font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-			      background-color: #eee;
-			      padding: 40px 0;
-			      margin: 0;
-			      line-height: 1.5;
-			    }
-			\s\s\s\s
-			    h2 {
-			      margin-top: 0;
-			      margin-bottom: 0.5rem;
-			      font-size: 2rem;
-			      font-weight: 500;
-			      line-height: 2rem;
-			    }
-			\s\s\s\s
-			    .content {
-			      margin-right: auto;
-			      margin-left: auto;
-			      padding-right: 15px;
-			      padding-left: 15px;
-			      width: 100%;
-			      box-sizing: border-box;
-			    }
-			\s\s\s\s
-			    @media (min-width: 800px) {
-			      .content {
-			        max-width: 760px;
-			      }
-			    }
-			\s\s\s\s
-			    /* Components */
-			    a,
-			    a:visited {
-			      text-decoration: none;
-			      color: #06f;
-			    }
-			\s\s\s\s
-			    a:hover {
-			      text-decoration: underline;
-			      color: #003c97;
-			    }
-			\s\s\s\s
-			    input[type="text"],
-			    input[type="password"] {
-			      height: auto;
-			      width: 100%;
-			      font-size: 1rem;
-			      padding: 0.5rem;
-			      box-sizing: border-box;
-			    }
-			\s\s\s\s
-			    button {
-			      padding: 0.5rem 1rem;
-			      font-size: 1.25rem;
-			      line-height: 1.5;
-			      border: none;
-			      border-radius: 0.1rem;
-			      width: 100%;
-			    }
-			\s\s\s\s
-			    button.primary {
-			      color: #fff;
-			      background-color: #06f;
-			    }
-			\s\s\s\s
-			    .alert {
-			      padding: 0.75rem 1rem;
-			      margin-bottom: 1rem;
-			      line-height: 1.5;
-			      border-radius: 0.1rem;
-			      width: 100%;
-			      box-sizing: border-box;
-			      border-width: 1px;
-			      border-style: solid;
-			    }
-			\s\s\s\s
-			    .alert.alert-danger {
-			      color: #6b1922;
-			      background-color: #f7d5d7;
-			      border-color: #eab6bb;
-			    }
-			\s\s\s\s
-			    .alert.alert-success {
-			      color: #145222;
-			      background-color: #d1f0d9;
-			      border-color: #c2ebcb;
-			    }
-			\s\s\s\s
-			    .screenreader {
-			      position: absolute;
-			      clip: rect(0 0 0 0);
-			      height: 1px;
-			      width: 1px;
-			      padding: 0;
-			      border: 0;
-			      overflow: hidden;
-			    }
-			\s\s\s\s
-			    table {
-			      width: 100%;
-			      max-width: 100%;
-			      margin-bottom: 2rem;
-			    }
-			\s\s\s\s
-			    .table-striped tr:nth-of-type(2n + 1) {
-			      background-color: #e1e1e1;
-			    }
-			\s\s\s\s
-			    td {
-			      padding: 0.75rem;
-			      vertical-align: top;
-			    }
-			\s\s\s\s
-			    /* Login / logout layouts */
-			    .login-form,
-			    .logout-form {
-			      max-width: 340px;
-			      padding: 0 15px 15px 15px;
-			      margin: 0 auto 2rem auto;
-			      box-sizing: border-box;
-			    }
-			    </style>
-			  </head>
-			""";
-
 	public final SpringTestContext spring = new SpringTestContext(this);
 
 	@Autowired
@@ -190,7 +53,17 @@ public class FormLoginBeanDefinitionParserTests {
 	@Test
 	public void getLoginWhenAutoConfigThenShowsDefaultLoginPage() throws Exception {
 		this.spring.configLocations(this.xml("Simple")).autowire();
-		String expectedContent = EXPECTED_HTML_HEAD + """
+		String expectedContent = """
+				<!DOCTYPE html>
+				<html lang="en">
+				  <head>
+				    <meta charset="utf-8">
+				    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+				    <meta name="description" content="">
+				    <meta name="author" content="">
+				    <title>Please sign in</title>
+				    <link href="/default-ui.css" rel="stylesheet" />
+				  </head>
 				  <body>
 				    <div class="content">
 				      <form class="login-form" method="post" action="/login">
@@ -226,7 +99,18 @@ public class FormLoginBeanDefinitionParserTests {
 	@Test
 	public void getLoginWhenConfiguredWithCustomAttributesThenLoginPageReflects() throws Exception {
 		this.spring.configLocations(this.xml("WithCustomAttributes")).autowire();
-		String expectedContent = EXPECTED_HTML_HEAD + """
+
+		String expectedContent = """
+				<!DOCTYPE html>
+				<html lang="en">
+				  <head>
+				    <meta charset="utf-8">
+				    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+				    <meta name="description" content="">
+				    <meta name="author" content="">
+				    <title>Please sign in</title>
+				    <link href="/default-ui.css" rel="stylesheet" />
+				  </head>
 				  <body>
 				    <div class="content">
 				      <form class="login-form" method="post" action="/signin">

+ 2 - 3
web/src/main/java/org/springframework/security/web/authentication/ui/DefaultLoginPageGeneratingFilter.java

@@ -35,7 +35,6 @@ import org.springframework.security.core.AuthenticationException;
 import org.springframework.security.web.WebAttributes;
 import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
 import org.springframework.security.web.authentication.rememberme.AbstractRememberMeServices;
-import org.springframework.security.web.util.CssUtils;
 import org.springframework.util.Assert;
 import org.springframework.util.StringUtils;
 import org.springframework.web.filter.GenericFilterBean;
@@ -207,7 +206,7 @@ public class DefaultLoginPageGeneratingFilter extends GenericFilterBean {
 		String contextPath = request.getContextPath();
 
 		return HtmlTemplates.fromTemplate(LOGIN_PAGE_TEMPLATE)
-			.withRawHtml("cssStyle", CssUtils.getCssStyleBlock().indent(4))
+			.withRawHtml("contextPath", contextPath)
 			.withRawHtml("formLogin", renderFormLogin(request, loginError, logoutSuccess, contextPath, errorMsg))
 			.withRawHtml("oneTimeTokenLogin",
 					renderOneTimeTokenLogin(request, loginError, logoutSuccess, contextPath, errorMsg))
@@ -393,7 +392,7 @@ public class DefaultLoginPageGeneratingFilter extends GenericFilterBean {
 			    <meta name="description" content="">
 			    <meta name="author" content="">
 			    <title>Please sign in</title>
-			{{cssStyle}}
+			    <link href="{{contextPath}}/default-ui.css" rel="stylesheet" />
 			  </head>
 			  <body>
 			    <div class="content">

+ 1 - 3
web/src/main/java/org/springframework/security/web/authentication/ui/DefaultLogoutPageGeneratingFilter.java

@@ -27,7 +27,6 @@ import jakarta.servlet.http.HttpServletRequest;
 import jakarta.servlet.http.HttpServletResponse;
 
 import org.springframework.core.log.LogMessage;
-import org.springframework.security.web.util.CssUtils;
 import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
 import org.springframework.security.web.util.matcher.RequestMatcher;
 import org.springframework.util.Assert;
@@ -62,7 +61,6 @@ public class DefaultLogoutPageGeneratingFilter extends OncePerRequestFilter {
 
 	private void renderLogout(HttpServletRequest request, HttpServletResponse response) throws IOException {
 		String renderedPage = HtmlTemplates.fromTemplate(LOGOUT_PAGE_TEMPLATE)
-			.withRawHtml("cssStyle", CssUtils.getCssStyleBlock().indent(4))
 			.withValue("contextPath", request.getContextPath())
 			.withRawHtml("hiddenInputs", renderHiddenInputs(request).indent(8))
 			.render();
@@ -102,7 +100,7 @@ public class DefaultLogoutPageGeneratingFilter extends OncePerRequestFilter {
 			    <meta name="description" content="">
 			    <meta name="author" content="">
 			    <title>Confirm Log Out?</title>
-			{{cssStyle}}
+			    <link href="{{contextPath}}/default-ui.css" rel="stylesheet" />
 			  </head>
 			  <body>
 			    <div class="content">

+ 5 - 6
web/src/main/java/org/springframework/security/web/authentication/ui/DefaultResourcesFilter.java

@@ -83,14 +83,13 @@ public final class DefaultResourcesFilter extends GenericFilterBean {
 	 * default CSS stylesheet.
 	 * <p>
 	 * The created {@link DefaultResourcesFilter} matches requests
-	 * {@code HTTP GET /default-ui.css}, and returns the default
-	 * stylesheet at {@code org/springframework/security/default-ui.css} with
-	 * content-type {@code text/css;charset=UTF-8}.
+	 * {@code HTTP GET /default-ui.css}, and returns the default stylesheet at
+	 * {@code org/springframework/security/default-ui.css} with content-type
+	 * {@code text/css;charset=UTF-8}.
 	 * @return -
 	 */
-	public static DefaultResourcesFilter defaultCss() {
-		return new DefaultResourcesFilter(
-				AntPathRequestMatcher.antMatcher(HttpMethod.GET, "/default-ui.css"),
+	public static DefaultResourcesFilter css() {
+		return new DefaultResourcesFilter(AntPathRequestMatcher.antMatcher(HttpMethod.GET, "/default-ui.css"),
 				new ClassPathResource("org/springframework/security/default-ui.css"),
 				new MediaType("text", "css", StandardCharsets.UTF_8));
 	}

+ 1 - 125
web/src/test/java/org/springframework/security/web/authentication/DefaultLoginPageGeneratingFilterTests.java

@@ -238,131 +238,7 @@ public class DefaultLoginPageGeneratingFilterTests {
 				    <meta name="description" content="">
 				    <meta name="author" content="">
 				    <title>Please sign in</title>
-				    <style>
-				    /* General layout */
-				    body {
-				      font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-				      background-color: #eee;
-				      padding: 40px 0;
-				      margin: 0;
-				      line-height: 1.5;
-				    }
-				\s\s\s\s
-				    h2 {
-				      margin-top: 0;
-				      margin-bottom: 0.5rem;
-				      font-size: 2rem;
-				      font-weight: 500;
-				      line-height: 2rem;
-				    }
-				\s\s\s\s
-				    .content {
-				      margin-right: auto;
-				      margin-left: auto;
-				      padding-right: 15px;
-				      padding-left: 15px;
-				      width: 100%;
-				      box-sizing: border-box;
-				    }
-				\s\s\s\s
-				    @media (min-width: 800px) {
-				      .content {
-				        max-width: 760px;
-				      }
-				    }
-				\s\s\s\s
-				    /* Components */
-				    a,
-				    a:visited {
-				      text-decoration: none;
-				      color: #06f;
-				    }
-				\s\s\s\s
-				    a:hover {
-				      text-decoration: underline;
-				      color: #003c97;
-				    }
-				\s\s\s\s
-				    input[type="text"],
-				    input[type="password"] {
-				      height: auto;
-				      width: 100%;
-				      font-size: 1rem;
-				      padding: 0.5rem;
-				      box-sizing: border-box;
-				    }
-				\s\s\s\s
-				    button {
-				      padding: 0.5rem 1rem;
-				      font-size: 1.25rem;
-				      line-height: 1.5;
-				      border: none;
-				      border-radius: 0.1rem;
-				      width: 100%;
-				    }
-				\s\s\s\s
-				    button.primary {
-				      color: #fff;
-				      background-color: #06f;
-				    }
-				\s\s\s\s
-				    .alert {
-				      padding: 0.75rem 1rem;
-				      margin-bottom: 1rem;
-				      line-height: 1.5;
-				      border-radius: 0.1rem;
-				      width: 100%;
-				      box-sizing: border-box;
-				      border-width: 1px;
-				      border-style: solid;
-				    }
-				\s\s\s\s
-				    .alert.alert-danger {
-				      color: #6b1922;
-				      background-color: #f7d5d7;
-				      border-color: #eab6bb;
-				    }
-				\s\s\s\s
-				    .alert.alert-success {
-				      color: #145222;
-				      background-color: #d1f0d9;
-				      border-color: #c2ebcb;
-				    }
-				\s\s\s\s
-				    .screenreader {
-				      position: absolute;
-				      clip: rect(0 0 0 0);
-				      height: 1px;
-				      width: 1px;
-				      padding: 0;
-				      border: 0;
-				      overflow: hidden;
-				    }
-				\s\s\s\s
-				    table {
-				      width: 100%;
-				      max-width: 100%;
-				      margin-bottom: 2rem;
-				    }
-				\s\s\s\s
-				    .table-striped tr:nth-of-type(2n + 1) {
-				      background-color: #e1e1e1;
-				    }
-				\s\s\s\s
-				    td {
-				      padding: 0.75rem;
-				      vertical-align: top;
-				    }
-				\s\s\s\s
-				    /* Login / logout layouts */
-				    .login-form,
-				    .logout-form {
-				      max-width: 340px;
-				      padding: 0 15px 15px 15px;
-				      margin: 0 auto 2rem auto;
-				      box-sizing: border-box;
-				    }
-				    </style>
+				    <link href="/default-ui.css" rel="stylesheet" />
 				  </head>
 				  <body>
 				    <div class="content">

+ 1 - 125
web/src/test/java/org/springframework/security/web/authentication/ui/DefaultLogoutPageGeneratingFilterTests.java

@@ -73,131 +73,7 @@ public class DefaultLogoutPageGeneratingFilterTests {
 				    <meta name="description" content="">
 				    <meta name="author" content="">
 				    <title>Confirm Log Out?</title>
-				    <style>
-				    /* General layout */
-				    body {
-				      font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-				      background-color: #eee;
-				      padding: 40px 0;
-				      margin: 0;
-				      line-height: 1.5;
-				    }
-				\s\s\s\s
-				    h2 {
-				      margin-top: 0;
-				      margin-bottom: 0.5rem;
-				      font-size: 2rem;
-				      font-weight: 500;
-				      line-height: 2rem;
-				    }
-				\s\s\s\s
-				    .content {
-				      margin-right: auto;
-				      margin-left: auto;
-				      padding-right: 15px;
-				      padding-left: 15px;
-				      width: 100%;
-				      box-sizing: border-box;
-				    }
-				\s\s\s\s
-				    @media (min-width: 800px) {
-				      .content {
-				        max-width: 760px;
-				      }
-				    }
-				\s\s\s\s
-				    /* Components */
-				    a,
-				    a:visited {
-				      text-decoration: none;
-				      color: #06f;
-				    }
-				\s\s\s\s
-				    a:hover {
-				      text-decoration: underline;
-				      color: #003c97;
-				    }
-				\s\s\s\s
-				    input[type="text"],
-				    input[type="password"] {
-				      height: auto;
-				      width: 100%;
-				      font-size: 1rem;
-				      padding: 0.5rem;
-				      box-sizing: border-box;
-				    }
-				\s\s\s\s
-				    button {
-				      padding: 0.5rem 1rem;
-				      font-size: 1.25rem;
-				      line-height: 1.5;
-				      border: none;
-				      border-radius: 0.1rem;
-				      width: 100%;
-				    }
-				\s\s\s\s
-				    button.primary {
-				      color: #fff;
-				      background-color: #06f;
-				    }
-				\s\s\s\s
-				    .alert {
-				      padding: 0.75rem 1rem;
-				      margin-bottom: 1rem;
-				      line-height: 1.5;
-				      border-radius: 0.1rem;
-				      width: 100%;
-				      box-sizing: border-box;
-				      border-width: 1px;
-				      border-style: solid;
-				    }
-				\s\s\s\s
-				    .alert.alert-danger {
-				      color: #6b1922;
-				      background-color: #f7d5d7;
-				      border-color: #eab6bb;
-				    }
-				\s\s\s\s
-				    .alert.alert-success {
-				      color: #145222;
-				      background-color: #d1f0d9;
-				      border-color: #c2ebcb;
-				    }
-				\s\s\s\s
-				    .screenreader {
-				      position: absolute;
-				      clip: rect(0 0 0 0);
-				      height: 1px;
-				      width: 1px;
-				      padding: 0;
-				      border: 0;
-				      overflow: hidden;
-				    }
-				\s\s\s\s
-				    table {
-				      width: 100%;
-				      max-width: 100%;
-				      margin-bottom: 2rem;
-				    }
-				\s\s\s\s
-				    .table-striped tr:nth-of-type(2n + 1) {
-				      background-color: #e1e1e1;
-				    }
-				\s\s\s\s
-				    td {
-				      padding: 0.75rem;
-				      vertical-align: top;
-				    }
-				\s\s\s\s
-				    /* Login / logout layouts */
-				    .login-form,
-				    .logout-form {
-				      max-width: 340px;
-				      padding: 0 15px 15px 15px;
-				      margin: 0 auto 2rem auto;
-				      box-sizing: border-box;
-				    }
-				    </style>
+				    <link href="/context/default-ui.css" rel="stylesheet" />
 				  </head>
 				  <body>
 				    <div class="content">