Home Explore Help
Register Sign In
github
/
spring-security
mirror of https://github.com/spring-projects/spring-security
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Inline CSS for default login and logout page

- Remove the dependency on Bootstrap CSS. Results in faster load times, no failures
  in air-gapped or offline scenarios, and no dependency on an external CDN that may
  go away some day.
Daniel Garnier-Moiroux 1 year ago
parent
66efb63dba
commit
bc8ba7f3b7
9 changed files with 536 additions and 167 deletions
Split View Show Diff Stats
  1. 172 69
      config/src/test/java/org/springframework/security/config/annotation/web/configurers/DefaultLoginPageConfigurerTests.java
  2. 154 35
      config/src/test/java/org/springframework/security/config/http/FormLoginBeanDefinitionParserTests.java
  3. 3 0
      etc/checkstyle/checkstyle-suppressions.xml
  4. 13 15
      web/src/main/java/org/springframework/security/web/authentication/ui/DefaultLoginPageGeneratingFilter.java
  5. 8 11
      web/src/main/java/org/springframework/security/web/authentication/ui/DefaultLogoutPageGeneratingFilter.java
  6. 12 15
      web/src/main/java/org/springframework/security/web/server/ui/LoginPageGeneratingWebFilter.java
  7. 7 9
      web/src/main/java/org/springframework/security/web/server/ui/LogoutPageGeneratingWebFilter.java
  8. 165 0
      web/src/main/java/org/springframework/security/web/util/CssUtils.java
  9. 2 13
      web/src/test/java/org/springframework/security/web/authentication/ui/DefaultLogoutPageGeneratingFilterTests.java

+ 172 - 69
config/src/test/java/org/springframework/security/config/annotation/web/configurers/DefaultLoginPageConfigurerTests.java
View File 

@@ -1,5 +1,5 @@
 
 /*
 
- * Copyright 2002-2023 the original author or authors.
 
+ * Copyright 2002-2024 the original author or authors.
 
  *
 
  * Licensed under the Apache License, Version 2.0 (the "License");
 
  * you may not use this file except in compliance with the License.
 
@@ -67,6 +67,141 @@ import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.
 
 @ExtendWith(SpringTestContextExtension.class)
 
 public class DefaultLoginPageConfigurerTests {
 
 
+	//@formatter:off
 
+	public static final String EXPECTED_HTML_HEAD = "  <head>\n"
 
+			+ "    <meta charset=\"utf-8\">\n"
 
+			+ "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n"
 
+			+ "    <meta name=\"description\" content=\"\">\n"
 
+			+ "    <meta name=\"author\" content=\"\">\n"
 
+			+ "    <title>Please sign in</title>\n"
 
+			+ "    <style>\n"
 
+			+ "    /* General layout */\n"
 
+			+ "    body {\n"
 
+			+ "      font-family: system-ui, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n"
 
+			+ "      background-color: #eee;\n"
 
+			+ "      padding: 40px 0;\n"
 
+			+ "      margin: 0;\n"
 
+			+ "      line-height: 1.5;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    h2 {\n"
 
+			+ "      margin-top: 0;\n"
 
+			+ "      margin-bottom: 0.5rem;\n"
 
+			+ "      font-size: 2rem;\n"
 
+			+ "      font-weight: 500;\n"
 
+			+ "      line-height: 2rem;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    .content {\n"
 
+			+ "      margin-right: auto;\n"
 
+			+ "      margin-left: auto;\n"
 
+			+ "      padding-right: 15px;\n"
 
+			+ "      padding-left: 15px;\n"
 
+			+ "      width: 100%;\n"
 
+			+ "      box-sizing: border-box;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    @media (min-width: 800px) {\n"
 
+			+ "      .content {\n"
 
+			+ "        max-width: 760px;\n"
 
+			+ "      }\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    /* Components */\n"
 
+			+ "    a,\n"
 
+			+ "    a:visited {\n"
 
+			+ "      text-decoration: none;\n"
 
+			+ "      color: #06f;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    a:hover {\n"
 
+			+ "      text-decoration: underline;\n"
 
+			+ "      color: #003c97;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    input[type=\"text\"],\n"
 
+			+ "    input[type=\"password\"] {\n"
 
+			+ "      height: auto;\n"
 
+			+ "      width: 100%;\n"
 
+			+ "      font-size: 1rem;\n"
 
+			+ "      padding: 0.5rem;\n"
 
+			+ "      box-sizing: border-box;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    button {\n"
 
+			+ "      padding: 0.5rem 1rem;\n"
 
+			+ "      font-size: 1.25rem;\n"
 
+			+ "      line-height: 1.5;\n"
 
+			+ "      border: none;\n"
 
+			+ "      border-radius: 0.1rem;\n"
 
+			+ "      width: 100%;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    button.primary {\n"
 
+			+ "      color: #fff;\n"
 
+			+ "      background-color: #06f;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    .alert {\n"
 
+			+ "      padding: 0.75rem 1rem;\n"
 
+			+ "      margin-bottom: 1rem;\n"
 
+			+ "      line-height: 1.5;\n"
 
+			+ "      border-radius: 0.1rem;\n"
 
+			+ "      width: 100%;\n"
 
+			+ "      box-sizing: border-box;\n"
 
+			+ "      border-width: 1px;\n"
 
+			+ "      border-style: solid;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    .alert.alert-danger {\n"
 
+			+ "      color: #6b1922;\n"
 
+			+ "      background-color: #f7d5d7;\n"
 
+			+ "      border-color: #eab6bb;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    .alert.alert-success {\n"
 
+			+ "      color: #145222;\n"
 
+			+ "      background-color: #d1f0d9;\n"
 
+			+ "      border-color: #c2ebcb;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    .screenreader {\n"
 
+			+ "      position: absolute;\n"
 
+			+ "      clip: rect(0 0 0 0);\n"
 
+			+ "      height: 1px;\n"
 
+			+ "      width: 1px;\n"
 
+			+ "      padding: 0;\n"
 
+			+ "      border: 0;\n"
 
+			+ "      overflow: hidden;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    table {\n"
 
+			+ "      width: 100%;\n"
 
+			+ "      max-width: 100%;\n"
 
+			+ "      margin-bottom: 2rem;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    .table-striped tr:nth-of-type(2n + 1) {\n"
 
+			+ "      background-color: #e1e1e1;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    td {\n"
 
+			+ "      padding: 0.75rem;\n"
 
+			+ "      vertical-align: top;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    /* Login / logout layouts */\n"
 
+			+ "    .login-form,\n"
 
+			+ "    .logout-form {\n"
 
+			+ "      max-width: 340px;\n"
 
+			+ "      padding: 0 15px 15px 15px;\n"
 
+			+ "      margin: 0 auto 2rem auto;\n"
 
+			+ "      box-sizing: border-box;\n"
 
+			+ "    }\n"
 
+			+ "    </style>\n"
 
+			+ "  </head>\n";
 
+	//@formatter:on
 
+
 
 	public final SpringTestContext spring = new SpringTestContext(this);
 
 
 	@Autowired
 
@@ -89,29 +224,21 @@ public class DefaultLoginPageConfigurerTests {
 
 					CsrfToken token = (CsrfToken) result.getRequest().getAttribute(CsrfToken.class.getName());
 
 					assertThat(result.getResponse().getContentAsString()).isEqualTo("<!DOCTYPE html>\n"
 
 						+ "<html lang=\"en\">\n"
 
-						+ "  <head>\n"
 
-						+ "    <meta charset=\"utf-8\">\n"
 
-						+ "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n"
 
-						+ "    <meta name=\"description\" content=\"\">\n"
 
-						+ "    <meta name=\"author\" content=\"\">\n"
 
-						+ "    <title>Please sign in</title>\n"
 
-						+ "    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\n"
 
-						+ "    <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n"
 
-						+ "  </head>\n"
 
+						+ EXPECTED_HTML_HEAD
 
 						+ "  <body>\n"
 
-						+ "     <div class=\"container\">\n"
 
-						+ "      <form class=\"form-signin\" method=\"post\" action=\"/login\">\n"
 
-						+ "        <h2 class=\"form-signin-heading\">Please sign in</h2>\n"
 
+						+ "     <div class=\"content\">\n"
 
+						+ "      <form class=\"login-form\" method=\"post\" action=\"/login\">\n"
 
+						+ "        <h2>Please sign in</h2>\n"
 
 						+ "        <p>\n"
 
-						+ "          <label for=\"username\" class=\"sr-only\">Username</label>\n"
 
-						+ "          <input type=\"text\" id=\"username\" name=\"username\" class=\"form-control\" placeholder=\"Username\" required autofocus>\n"
 
+						+ "          <label for=\"username\" class=\"screenreader\">Username</label>\n"
 
+						+ "          <input type=\"text\" id=\"username\" name=\"username\" placeholder=\"Username\" required autofocus>\n"
 
 						+ "        </p>\n"
 
 						+ "        <p>\n"
 
-						+ "          <label for=\"password\" class=\"sr-only\">Password</label>\n"
 
-						+ "          <input type=\"password\" id=\"password\" name=\"password\" class=\"form-control\" placeholder=\"Password\" required>\n"
 
+						+ "          <label for=\"password\" class=\"screenreader\">Password</label>\n"
 
+						+ "          <input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Password\" required>\n"
 
 						+ "        </p>\n"
 
 						+ "<input name=\"" + token.getParameterName() + "\" type=\"hidden\" value=\"" + token.getToken() + "\" />\n"
 
-						+ "        <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Sign in</button>\n"
 
+						+ "        <button type=\"submit\" class=\"primary\">Sign in</button>\n"
 
 						+ "      </form>\n"
 
 						+ "</div>\n"
 
 						+ "</body></html>");
 
@@ -138,28 +265,20 @@ public class DefaultLoginPageConfigurerTests {
 
 					CsrfToken token = (CsrfToken) result.getRequest().getAttribute(CsrfToken.class.getName());
 
 					assertThat(result.getResponse().getContentAsString()).isEqualTo("<!DOCTYPE html>\n"
 
 						+ "<html lang=\"en\">\n"
 
-						+ "  <head>\n"
 
-						+ "    <meta charset=\"utf-8\">\n"
 
-						+ "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n"
 
-						+ "    <meta name=\"description\" content=\"\">\n"
 
-						+ "    <meta name=\"author\" content=\"\">\n"
 
-						+ "    <title>Please sign in</title>\n"
 
-						+ "    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\n"
 
-						+ "    <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n"
 
-						+ "  </head>\n"
 
+						+ EXPECTED_HTML_HEAD
 
 						+ "  <body>\n"
 
-						+ "     <div class=\"container\">\n"
 
-						+ "      <form class=\"form-signin\" method=\"post\" action=\"/login\">\n"
 
-						+ "        <h2 class=\"form-signin-heading\">Please sign in</h2>\n"
 
+						+ "     <div class=\"content\">\n"
 
+						+ "      <form class=\"login-form\" method=\"post\" action=\"/login\">\n"
 
+						+ "        <h2>Please sign in</h2>\n"
 
 						+ "<div class=\"alert alert-danger\" role=\"alert\">Bad credentials</div>        <p>\n"
 
-						+ "          <label for=\"username\" class=\"sr-only\">Username</label>\n"
 
-						+ "          <input type=\"text\" id=\"username\" name=\"username\" class=\"form-control\" placeholder=\"Username\" required autofocus>\n"
 
+						+ "          <label for=\"username\" class=\"screenreader\">Username</label>\n"
 
+						+ "          <input type=\"text\" id=\"username\" name=\"username\" placeholder=\"Username\" required autofocus>\n"
 
 						+ "        </p>\n" + "        <p>\n"
 
-						+ "          <label for=\"password\" class=\"sr-only\">Password</label>\n"
 
-						+ "          <input type=\"password\" id=\"password\" name=\"password\" class=\"form-control\" placeholder=\"Password\" required>\n"
 
+						+ "          <label for=\"password\" class=\"screenreader\">Password</label>\n"
 
+						+ "          <input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Password\" required>\n"
 
 						+ "        </p>\n"
 
 						+ "<input name=\"" + token.getParameterName() + "\" type=\"hidden\" value=\"" + token.getToken() + "\" />\n"
 
-						+ "        <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Sign in</button>\n"
 
+						+ "        <button type=\"submit\" class=\"primary\">Sign in</button>\n"
 
 						+ "      </form>\n"
 
 						+ "</div>\n"
 
 						+ "</body></html>");
 
@@ -190,29 +309,21 @@ public class DefaultLoginPageConfigurerTests {
 
 					CsrfToken token = (CsrfToken) result.getRequest().getAttribute(CsrfToken.class.getName());
 
 					assertThat(result.getResponse().getContentAsString()).isEqualTo("<!DOCTYPE html>\n"
 
 						+ "<html lang=\"en\">\n"
 
-						+ "  <head>\n"
 
-						+ "    <meta charset=\"utf-8\">\n"
 
-						+ "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n"
 
-						+ "    <meta name=\"description\" content=\"\">\n"
 
-						+ "    <meta name=\"author\" content=\"\">\n"
 
-						+ "    <title>Please sign in</title>\n"
 
-						+ "    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\n"
 
-						+ "    <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n"
 
-						+ "  </head>\n"
 
+						+ EXPECTED_HTML_HEAD
 
 						+ "  <body>\n"
 
-						+ "     <div class=\"container\">\n"
 
-						+ "      <form class=\"form-signin\" method=\"post\" action=\"/login\">\n"
 
-						+ "        <h2 class=\"form-signin-heading\">Please sign in</h2>\n"
 
+						+ "     <div class=\"content\">\n"
 
+						+ "      <form class=\"login-form\" method=\"post\" action=\"/login\">\n"
 
+						+ "        <h2>Please sign in</h2>\n"
 
 						+ "<div class=\"alert alert-success\" role=\"alert\">You have been signed out</div>        <p>\n"
 
-						+ "          <label for=\"username\" class=\"sr-only\">Username</label>\n"
 
-						+ "          <input type=\"text\" id=\"username\" name=\"username\" class=\"form-control\" placeholder=\"Username\" required autofocus>\n"
 
+						+ "          <label for=\"username\" class=\"screenreader\">Username</label>\n"
 
+						+ "          <input type=\"text\" id=\"username\" name=\"username\" placeholder=\"Username\" required autofocus>\n"
 
 						+ "        </p>\n"
 
 						+ "        <p>\n"
 
-						+ "          <label for=\"password\" class=\"sr-only\">Password</label>\n"
 
-						+ "          <input type=\"password\" id=\"password\" name=\"password\" class=\"form-control\" placeholder=\"Password\" required>\n"
 
+						+ "          <label for=\"password\" class=\"screenreader\">Password</label>\n"
 
+						+ "          <input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Password\" required>\n"
 
 						+ "        </p>\n"
 
 						+ "<input name=\"" + token.getParameterName() + "\" type=\"hidden\" value=\"" + token.getToken() + "\" />\n"
 
-						+ "        <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Sign in</button>\n"
 
+						+ "        <button type=\"submit\" class=\"primary\">Sign in</button>\n"
 
 						+ "      </form>\n"
 
 						+ "</div>\n"
 
 						+ "</body></html>");
 
@@ -243,30 +354,22 @@ public class DefaultLoginPageConfigurerTests {
 
 					CsrfToken token = (CsrfToken) result.getRequest().getAttribute(CsrfToken.class.getName());
 
 					assertThat(result.getResponse().getContentAsString()).isEqualTo("<!DOCTYPE html>\n"
 
 						+ "<html lang=\"en\">\n"
 
-						+ "  <head>\n"
 
-						+ "    <meta charset=\"utf-8\">\n"
 
-						+ "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n"
 
-						+ "    <meta name=\"description\" content=\"\">\n"
 
-						+ "    <meta name=\"author\" content=\"\">\n"
 
-						+ "    <title>Please sign in</title>\n"
 
-						+ "    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\n"
 
-						+ "    <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n"
 
-						+ "  </head>\n"
 
+						+ EXPECTED_HTML_HEAD
 
 						+ "  <body>\n"
 
-						+ "     <div class=\"container\">\n"
 
-						+ "      <form class=\"form-signin\" method=\"post\" action=\"/login\">\n"
 
-						+ "        <h2 class=\"form-signin-heading\">Please sign in</h2>\n"
 
+						+ "     <div class=\"content\">\n"
 
+						+ "      <form class=\"login-form\" method=\"post\" action=\"/login\">\n"
 
+						+ "        <h2>Please sign in</h2>\n"
 
 						+ "        <p>\n"
 
-						+ "          <label for=\"username\" class=\"sr-only\">Username</label>\n"
 
-						+ "          <input type=\"text\" id=\"username\" name=\"username\" class=\"form-control\" placeholder=\"Username\" required autofocus>\n"
 
+						+ "          <label for=\"username\" class=\"screenreader\">Username</label>\n"
 
+						+ "          <input type=\"text\" id=\"username\" name=\"username\" placeholder=\"Username\" required autofocus>\n"
 
 						+ "        </p>\n"
 
 						+ "        <p>\n"
 
-						+ "          <label for=\"password\" class=\"sr-only\">Password</label>\n"
 
-						+ "          <input type=\"password\" id=\"password\" name=\"password\" class=\"form-control\" placeholder=\"Password\" required>\n"
 
+						+ "          <label for=\"password\" class=\"screenreader\">Password</label>\n"
 
+						+ "          <input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Password\" required>\n"
 
 						+ "        </p>\n"
 
 						+ "<p><input type='checkbox' name='remember-me'/> Remember me on this computer.</p>\n"
 
 						+ "<input name=\"" + token.getParameterName() + "\" type=\"hidden\" value=\"" + token.getToken() + "\" />\n"
 
-						+ "        <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Sign in</button>\n"
 
+						+ "        <button type=\"submit\" class=\"primary\">Sign in</button>\n"
 
 						+ "      </form>\n"
 
 						+ "</div>\n"
 
 						+ "</body></html>");

+ 154 - 35
config/src/test/java/org/springframework/security/config/http/FormLoginBeanDefinitionParserTests.java
View File 

@@ -1,5 +1,5 @@
 
 /*
 
- * Copyright 2002-2023 the original author or authors.
 
+ * Copyright 2002-2024 the original author or authors.
 
  *
 
  * Licensed under the Apache License, Version 2.0 (the "License");
 
  * you may not use this file except in compliance with the License.
 
@@ -45,6 +45,141 @@ public class FormLoginBeanDefinitionParserTests {
 
 
 	private static final String CONFIG_LOCATION_PREFIX = "classpath:org/springframework/security/config/http/FormLoginBeanDefinitionParserTests";
 
 
+	//@formatter:off
 
+	public static final String EXPECTED_HTML_HEAD = "  <head>\n"
 
+			+ "    <meta charset=\"utf-8\">\n"
 
+			+ "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n"
 
+			+ "    <meta name=\"description\" content=\"\">\n"
 
+			+ "    <meta name=\"author\" content=\"\">\n"
 
+			+ "    <title>Please sign in</title>\n"
 
+			+ "    <style>\n"
 
+			+ "    /* General layout */\n"
 
+			+ "    body {\n"
 
+			+ "      font-family: system-ui, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n"
 
+			+ "      background-color: #eee;\n"
 
+			+ "      padding: 40px 0;\n"
 
+			+ "      margin: 0;\n"
 
+			+ "      line-height: 1.5;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    h2 {\n"
 
+			+ "      margin-top: 0;\n"
 
+			+ "      margin-bottom: 0.5rem;\n"
 
+			+ "      font-size: 2rem;\n"
 
+			+ "      font-weight: 500;\n"
 
+			+ "      line-height: 2rem;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    .content {\n"
 
+			+ "      margin-right: auto;\n"
 
+			+ "      margin-left: auto;\n"
 
+			+ "      padding-right: 15px;\n"
 
+			+ "      padding-left: 15px;\n"
 
+			+ "      width: 100%;\n"
 
+			+ "      box-sizing: border-box;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    @media (min-width: 800px) {\n"
 
+			+ "      .content {\n"
 
+			+ "        max-width: 760px;\n"
 
+			+ "      }\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    /* Components */\n"
 
+			+ "    a,\n"
 
+			+ "    a:visited {\n"
 
+			+ "      text-decoration: none;\n"
 
+			+ "      color: #06f;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    a:hover {\n"
 
+			+ "      text-decoration: underline;\n"
 
+			+ "      color: #003c97;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    input[type=\"text\"],\n"
 
+			+ "    input[type=\"password\"] {\n"
 
+			+ "      height: auto;\n"
 
+			+ "      width: 100%;\n"
 
+			+ "      font-size: 1rem;\n"
 
+			+ "      padding: 0.5rem;\n"
 
+			+ "      box-sizing: border-box;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    button {\n"
 
+			+ "      padding: 0.5rem 1rem;\n"
 
+			+ "      font-size: 1.25rem;\n"
 
+			+ "      line-height: 1.5;\n"
 
+			+ "      border: none;\n"
 
+			+ "      border-radius: 0.1rem;\n"
 
+			+ "      width: 100%;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    button.primary {\n"
 
+			+ "      color: #fff;\n"
 
+			+ "      background-color: #06f;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    .alert {\n"
 
+			+ "      padding: 0.75rem 1rem;\n"
 
+			+ "      margin-bottom: 1rem;\n"
 
+			+ "      line-height: 1.5;\n"
 
+			+ "      border-radius: 0.1rem;\n"
 
+			+ "      width: 100%;\n"
 
+			+ "      box-sizing: border-box;\n"
 
+			+ "      border-width: 1px;\n"
 
+			+ "      border-style: solid;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    .alert.alert-danger {\n"
 
+			+ "      color: #6b1922;\n"
 
+			+ "      background-color: #f7d5d7;\n"
 
+			+ "      border-color: #eab6bb;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    .alert.alert-success {\n"
 
+			+ "      color: #145222;\n"
 
+			+ "      background-color: #d1f0d9;\n"
 
+			+ "      border-color: #c2ebcb;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    .screenreader {\n"
 
+			+ "      position: absolute;\n"
 
+			+ "      clip: rect(0 0 0 0);\n"
 
+			+ "      height: 1px;\n"
 
+			+ "      width: 1px;\n"
 
+			+ "      padding: 0;\n"
 
+			+ "      border: 0;\n"
 
+			+ "      overflow: hidden;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    table {\n"
 
+			+ "      width: 100%;\n"
 
+			+ "      max-width: 100%;\n"
 
+			+ "      margin-bottom: 2rem;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    .table-striped tr:nth-of-type(2n + 1) {\n"
 
+			+ "      background-color: #e1e1e1;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    td {\n"
 
+			+ "      padding: 0.75rem;\n"
 
+			+ "      vertical-align: top;\n"
 
+			+ "    }\n"
 
+			+ "    \n"
 
+			+ "    /* Login / logout layouts */\n"
 
+			+ "    .login-form,\n"
 
+			+ "    .logout-form {\n"
 
+			+ "      max-width: 340px;\n"
 
+			+ "      padding: 0 15px 15px 15px;\n"
 
+			+ "      margin: 0 auto 2rem auto;\n"
 
+			+ "      box-sizing: border-box;\n"
 
+			+ "    }\n"
 
+			+ "    </style>\n"
 
+			+ "  </head>\n";
 
+	//@formatter:on
 
+
 
 	public final SpringTestContext spring = new SpringTestContext(this);
 
 
 	@Autowired
 
@@ -56,28 +191,20 @@ public class FormLoginBeanDefinitionParserTests {
 
 		// @formatter:off
 
 		String expectedContent = "<!DOCTYPE html>\n"
 
 				+ "<html lang=\"en\">\n"
 
-				+ "  <head>\n"
 
-				+ "    <meta charset=\"utf-8\">\n"
 
-				+ "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n"
 
-				+ "    <meta name=\"description\" content=\"\">\n"
 
-				+ "    <meta name=\"author\" content=\"\">\n"
 
-				+ "    <title>Please sign in</title>\n"
 
-				+ "    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\n"
 
-				+ "    <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n"
 
-				+ "  </head>\n"
 
+				+ EXPECTED_HTML_HEAD
 
 				+ "  <body>\n"
 
-				+ "     <div class=\"container\">\n"
 
-				+ "      <form class=\"form-signin\" method=\"post\" action=\"/login\">\n"
 
-				+ "        <h2 class=\"form-signin-heading\">Please sign in</h2>\n"
 
+				+ "     <div class=\"content\">\n"
 
+				+ "      <form class=\"login-form\" method=\"post\" action=\"/login\">\n"
 
+				+ "        <h2>Please sign in</h2>\n"
 
 				+ "        <p>\n"
 
-				+ "          <label for=\"username\" class=\"sr-only\">Username</label>\n"
 
-				+ "          <input type=\"text\" id=\"username\" name=\"username\" class=\"form-control\" placeholder=\"Username\" required autofocus>\n"
 
+				+ "          <label for=\"username\" class=\"screenreader\">Username</label>\n"
 
+				+ "          <input type=\"text\" id=\"username\" name=\"username\" placeholder=\"Username\" required autofocus>\n"
 
 				+ "        </p>\n"
 
 				+ "        <p>\n"
 
-				+ "          <label for=\"password\" class=\"sr-only\">Password</label>\n"
 
-				+ "          <input type=\"password\" id=\"password\" name=\"password\" class=\"form-control\" placeholder=\"Password\" required>\n"
 
+				+ "          <label for=\"password\" class=\"screenreader\">Password</label>\n"
 
+				+ "          <input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Password\" required>\n"
 
 				+ "        </p>\n"
 
-				+ "        <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Sign in</button>\n"
 
+				+ "        <button type=\"submit\" class=\"primary\">Sign in</button>\n"
 
 				+ "      </form>\n"
 
 				+ "</div>\n"
 
 				+ "</body></html>";
 
@@ -97,28 +224,20 @@ public class FormLoginBeanDefinitionParserTests {
 
 		// @formatter:off
 
 		String expectedContent = "<!DOCTYPE html>\n"
 
 				+ "<html lang=\"en\">\n"
 
-				+ "  <head>\n"
 
-				+ "    <meta charset=\"utf-8\">\n"
 
-				+ "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n"
 
-				+ "    <meta name=\"description\" content=\"\">\n"
 
-				+ "    <meta name=\"author\" content=\"\">\n"
 
-				+ "    <title>Please sign in</title>\n"
 
-				+ "    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\n"
 
-				+ "    <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n"
 
-				+ "  </head>\n"
 
+				+ EXPECTED_HTML_HEAD
 
 				+ "  <body>\n"
 
-				+ "     <div class=\"container\">\n"
 
-				+ "      <form class=\"form-signin\" method=\"post\" action=\"/signin\">\n"
 
-				+ "        <h2 class=\"form-signin-heading\">Please sign in</h2>\n"
 
+				+ "     <div class=\"content\">\n"
 
+				+ "      <form class=\"login-form\" method=\"post\" action=\"/signin\">\n"
 
+				+ "        <h2>Please sign in</h2>\n"
 
 				+ "        <p>\n"
 
-				+ "          <label for=\"username\" class=\"sr-only\">Username</label>\n"
 
-				+ "          <input type=\"text\" id=\"username\" name=\"custom_user\" class=\"form-control\" placeholder=\"Username\" required autofocus>\n"
 
+				+ "          <label for=\"username\" class=\"screenreader\">Username</label>\n"
 
+				+ "          <input type=\"text\" id=\"username\" name=\"custom_user\" placeholder=\"Username\" required autofocus>\n"
 
 				+ "        </p>\n"
 
 				+ "        <p>\n"
 
-				+ "          <label for=\"password\" class=\"sr-only\">Password</label>\n"
 
-				+ "          <input type=\"password\" id=\"password\" name=\"custom_pass\" class=\"form-control\" placeholder=\"Password\" required>\n"
 
+				+ "          <label for=\"password\" class=\"screenreader\">Password</label>\n"
 
+				+ "          <input type=\"password\" id=\"password\" name=\"custom_pass\" placeholder=\"Password\" required>\n"
 
 				+ "        </p>\n"
 
-				+ "        <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Sign in</button>\n"
 
+				+ "        <button type=\"submit\" class=\"primary\">Sign in</button>\n"
 
 				+ "      </form>\n"
 
 				+ "</div>\n"
 
 				+ "</body></html>";

+ 3 - 0
etc/checkstyle/checkstyle-suppressions.xml
View File 

@@ -40,4 +40,7 @@
 
 
 	<!-- Lambdas that we can't replace with a method reference because a closure is required -->
 
 	<suppress files="BearerTokenAuthenticationFilter\.java" checks="SpringLambda"/>
 
+
 
+	<!-- CSS content -->
 
+	<suppress files="CssUtils\.java" checks="SpringLeadingWhitespace"/>
 
 </suppressions>

+ 13 - 15
web/src/main/java/org/springframework/security/web/authentication/ui/DefaultLoginPageGeneratingFilter.java
View File 

@@ -1,5 +1,5 @@
 
 /*
 
- * Copyright 2002-2023 the original author or authors.
 
+ * Copyright 2002-2024 the original author or authors.
 
  *
 
  * Licensed under the Apache License, Version 2.0 (the "License");
 
  * you may not use this file except in compliance with the License.
 
@@ -34,6 +34,7 @@ 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;
 
@@ -201,33 +202,30 @@ public class DefaultLoginPageGeneratingFilter extends GenericFilterBean {
 
 		sb.append("    <meta name=\"description\" content=\"\">\n");
 
 		sb.append("    <meta name=\"author\" content=\"\">\n");
 
 		sb.append("    <title>Please sign in</title>\n");
 
-		sb.append("    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" "
 
-				+ "rel=\"stylesheet\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\n");
 
-		sb.append("    <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" "
 
-				+ "rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n");
 
+		sb.append(CssUtils.getCssStyleBlock().indent(4));
 
 		sb.append("  </head>\n");
 
 		sb.append("  <body>\n");
 
-		sb.append("     <div class=\"container\">\n");
 
+		sb.append("     <div class=\"content\">\n");
 
 		if (this.formLoginEnabled) {
 
-			sb.append("      <form class=\"form-signin\" method=\"post\" action=\"" + contextPath
 
+			sb.append("      <form class=\"login-form\" method=\"post\" action=\"" + contextPath
 
 					+ this.authenticationUrl + "\">\n");
 
-			sb.append("        <h2 class=\"form-signin-heading\">Please sign in</h2>\n");
 
+			sb.append("        <h2>Please sign in</h2>\n");
 
 			sb.append(createError(loginError, errorMsg) + createLogoutSuccess(logoutSuccess) + "        <p>\n");
 
-			sb.append("          <label for=\"username\" class=\"sr-only\">Username</label>\n");
 
+			sb.append("          <label for=\"username\" class=\"screenreader\">Username</label>\n");
 
 			sb.append("          <input type=\"text\" id=\"username\" name=\"" + this.usernameParameter
 
-					+ "\" class=\"form-control\" placeholder=\"Username\" required autofocus>\n");
 
+					+ "\" placeholder=\"Username\" required autofocus>\n");
 
 			sb.append("        </p>\n");
 
 			sb.append("        <p>\n");
 
-			sb.append("          <label for=\"password\" class=\"sr-only\">Password</label>\n");
 
+			sb.append("          <label for=\"password\" class=\"screenreader\">Password</label>\n");
 
 			sb.append("          <input type=\"password\" id=\"password\" name=\"" + this.passwordParameter
 
-					+ "\" class=\"form-control\" placeholder=\"Password\" required>\n");
 
+					+ "\" placeholder=\"Password\" required>\n");
 
 			sb.append("        </p>\n");
 
 			sb.append(createRememberMe(this.rememberMeParameter) + renderHiddenInputs(request));
 
-			sb.append("        <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Sign in</button>\n");
 
+			sb.append("        <button type=\"submit\" class=\"primary\">Sign in</button>\n");
 
 			sb.append("      </form>\n");
 
 		}
 
 		if (this.oauth2LoginEnabled) {
 
-			sb.append("<h2 class=\"form-signin-heading\">Login with OAuth 2.0</h2>");
 
+			sb.append("<h2>Login with OAuth 2.0</h2>");
 
 			sb.append(createError(loginError, errorMsg));
 
 			sb.append(createLogoutSuccess(logoutSuccess));
 
 			sb.append("<table class=\"table table-striped\">\n");
 
@@ -244,7 +242,7 @@ public class DefaultLoginPageGeneratingFilter extends GenericFilterBean {
 
 			sb.append("</table>\n");
 
 		}
 
 		if (this.saml2LoginEnabled) {
 
-			sb.append("<h2 class=\"form-signin-heading\">Login with SAML 2.0</h2>");
 
+			sb.append("<h2>Login with SAML 2.0</h2>");
 
 			sb.append(createError(loginError, errorMsg));
 
 			sb.append(createLogoutSuccess(logoutSuccess));
 
 			sb.append("<table class=\"table table-striped\">\n");

+ 8 - 11
web/src/main/java/org/springframework/security/web/authentication/ui/DefaultLogoutPageGeneratingFilter.java
View File 

@@ -1,5 +1,5 @@
 
 /*
 
- * Copyright 2002-2023 the original author or authors.
 
+ * Copyright 2002-2024 the original author or authors.
 
  *
 
  * Licensed under the Apache License, Version 2.0 (the "License");
 
  * you may not use this file except in compliance with the License.
 
@@ -27,6 +27,7 @@ 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;
 
@@ -69,19 +70,15 @@ public class DefaultLogoutPageGeneratingFilter extends OncePerRequestFilter {
 
 		sb.append("    <meta name=\"description\" content=\"\">\n");
 
 		sb.append("    <meta name=\"author\" content=\"\">\n");
 
 		sb.append("    <title>Confirm Log Out?</title>\n");
 
-		sb.append("    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" "
 
-				+ "rel=\"stylesheet\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" "
 
-				+ "crossorigin=\"anonymous\">\n");
 
-		sb.append("    <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" "
 
-				+ "rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n");
 
+		sb.append(CssUtils.getCssStyleBlock().indent(4));
 
 		sb.append("  </head>\n");
 
 		sb.append("  <body>\n");
 
-		sb.append("     <div class=\"container\">\n");
 
-		sb.append("      <form class=\"form-signin\" method=\"post\" action=\"" + request.getContextPath()
 
+		sb.append("     <div class=\"content\">\n");
 
+		sb.append("      <form class=\"logout-form\" method=\"post\" action=\"" + request.getContextPath()
 
 				+ "/logout\">\n");
 
-		sb.append("        <h2 class=\"form-signin-heading\">Are you sure you want to log out?</h2>\n");
 
-		sb.append(renderHiddenInputs(request)
 
-				+ "        <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Log Out</button>\n");
 
+		sb.append("        <h2>Are you sure you want to log out?</h2>\n");
 
+		sb.append(renderHiddenInputs(request));
 
+		sb.append("        <button class=\"primary\" type=\"submit\">Log Out</button>\n");
 
 		sb.append("      </form>\n");
 
 		sb.append("    </div>\n");
 
 		sb.append("  </body>\n");

+ 12 - 15
web/src/main/java/org/springframework/security/web/server/ui/LoginPageGeneratingWebFilter.java
View File 

@@ -1,5 +1,5 @@
 
 /*
 
- * Copyright 2002-2023 the original author or authors.
 
+ * Copyright 2002-2024 the original author or authors.
 
  *
 
  * Licensed under the Apache License, Version 2.0 (the "License");
 
  * you may not use this file except in compliance with the License.
 
@@ -31,6 +31,7 @@ import org.springframework.http.server.reactive.ServerHttpResponse;
 
 import org.springframework.security.web.server.csrf.CsrfToken;
 
 import org.springframework.security.web.server.util.matcher.ServerWebExchangeMatcher;
 
 import org.springframework.security.web.server.util.matcher.ServerWebExchangeMatchers;
 
+import org.springframework.security.web.util.CssUtils;
 
 import org.springframework.util.Assert;
 
 import org.springframework.util.MultiValueMap;
 
 import org.springframework.web.server.ServerWebExchange;
 
@@ -97,14 +98,10 @@ public class LoginPageGeneratingWebFilter implements WebFilter {
 
 		page.append("    <meta name=\"description\" content=\"\">\n");
 
 		page.append("    <meta name=\"author\" content=\"\">\n");
 
 		page.append("    <title>Please sign in</title>\n");
 
-		page.append("    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" "
 
-				+ "rel=\"stylesheet\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" "
 
-				+ "crossorigin=\"anonymous\">\n");
 
-		page.append("    <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" "
 
-				+ "rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n");
 
+		page.append(CssUtils.getCssStyleBlock().indent(4));
 
 		page.append("  </head>\n");
 
 		page.append("  <body>\n");
 
-		page.append("     <div class=\"container\">\n");
 
+		page.append("     <div class=\"content\">\n");
 
 		page.append(formLogin(queryParams, contextPath, csrfTokenHtmlInput));
 
 		page.append(oauth2LoginLinks(queryParams, contextPath, this.oauth2AuthenticationUrlToClientName));
 
 		page.append("    </div>\n");
 
@@ -120,21 +117,21 @@ public class LoginPageGeneratingWebFilter implements WebFilter {
 
 		boolean isError = queryParams.containsKey("error");
 
 		boolean isLogoutSuccess = queryParams.containsKey("logout");
 
 		StringBuilder page = new StringBuilder();
 
-		page.append("      <form class=\"form-signin\" method=\"post\" action=\"" + contextPath + "/login\">\n");
 
-		page.append("        <h2 class=\"form-signin-heading\">Please sign in</h2>\n");
 
+		page.append("      <form class=\"login-form\" method=\"post\" action=\"" + contextPath + "/login\">\n");
 
+		page.append("        <h2>Please sign in</h2>\n");
 
 		page.append(createError(isError));
 
 		page.append(createLogoutSuccess(isLogoutSuccess));
 
 		page.append("        <p>\n");
 
-		page.append("          <label for=\"username\" class=\"sr-only\">Username</label>\n");
 
+		page.append("          <label for=\"username\" class=\"screenreader\">Username</label>\n");
 
 		page.append("          <input type=\"text\" id=\"username\" name=\"username\" "
 
-				+ "class=\"form-control\" placeholder=\"Username\" required autofocus>\n");
 
+				+ "placeholder=\"Username\" required autofocus>\n");
 
 		page.append("        </p>\n" + "        <p>\n");
 
-		page.append("          <label for=\"password\" class=\"sr-only\">Password</label>\n");
 
+		page.append("          <label for=\"password\" class=\"screenreader\">Password</label>\n");
 
 		page.append("          <input type=\"password\" id=\"password\" name=\"password\" "
 
-				+ "class=\"form-control\" placeholder=\"Password\" required>\n");
 
+				+ "placeholder=\"Password\" required>\n");
 
 		page.append("        </p>\n");
 
 		page.append(csrfTokenHtmlInput);
 
-		page.append("        <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Sign in</button>\n");
 
+		page.append("        <button class=\"primary\" type=\"submit\">Sign in</button>\n");
 
 		page.append("      </form>\n");
 
 		return page.toString();
 
 	}
 
@@ -146,7 +143,7 @@ public class LoginPageGeneratingWebFilter implements WebFilter {
 
 		}
 
 		boolean isError = queryParams.containsKey("error");
 
 		StringBuilder sb = new StringBuilder();
 
-		sb.append("<div class=\"container\"><h2 class=\"form-signin-heading\">Login with OAuth 2.0</h2>");
 
+		sb.append("<div class=\"content\"><h2>Login with OAuth 2.0</h2>");
 
 		sb.append(createError(isError));
 
 		sb.append("<table class=\"table table-striped\">\n");
 
 		for (Map.Entry<String, String> clientAuthenticationUrlToClientName : oauth2AuthenticationUrlToClientName

+ 7 - 9
web/src/main/java/org/springframework/security/web/server/ui/LogoutPageGeneratingWebFilter.java
View File 

@@ -1,5 +1,5 @@
 
 /*
 
- * Copyright 2002-2023 the original author or authors.
 
+ * Copyright 2002-2024 the original author or authors.
 
  *
 
  * Licensed under the Apache License, Version 2.0 (the "License");
 
  * you may not use this file except in compliance with the License.
 
@@ -29,6 +29,7 @@ import org.springframework.http.server.reactive.ServerHttpResponse;
 
 import org.springframework.security.web.server.csrf.CsrfToken;
 
 import org.springframework.security.web.server.util.matcher.ServerWebExchangeMatcher;
 
 import org.springframework.security.web.server.util.matcher.ServerWebExchangeMatchers;
 
+import org.springframework.security.web.util.CssUtils;
 
 import org.springframework.web.server.ServerWebExchange;
 
 import org.springframework.web.server.WebFilter;
 
 import org.springframework.web.server.WebFilterChain;
 
@@ -78,17 +79,14 @@ public class LogoutPageGeneratingWebFilter implements WebFilter {
 
 		page.append("    <meta name=\"description\" content=\"\">\n");
 
 		page.append("    <meta name=\"author\" content=\"\">\n");
 
 		page.append("    <title>Confirm Log Out?</title>\n");
 
-		page.append("    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" "
 
-				+ "rel=\"stylesheet\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\n");
 
-		page.append("    <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" "
 
-				+ "rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n");
 
+		page.append(CssUtils.getCssStyleBlock().indent(4));
 
 		page.append("  </head>\n");
 
 		page.append("  <body>\n");
 
-		page.append("     <div class=\"container\">\n");
 
-		page.append("      <form class=\"form-signin\" method=\"post\" action=\"" + contextPath + "/logout\">\n");
 
-		page.append("        <h2 class=\"form-signin-heading\">Are you sure you want to log out?</h2>\n");
 
+		page.append("     <div class=\"content\">\n");
 
+		page.append("      <form class=\"logout-form\" method=\"post\" action=\"" + contextPath + "/logout\">\n");
 
+		page.append("        <h2>Are you sure you want to log out?</h2>\n");
 
 		page.append(csrfTokenHtmlInput);
 
-		page.append("        <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Log Out</button>\n");
 
+		page.append("        <button class=\"primary\" type=\"submit\">Log Out</button>\n");
 
 		page.append("      </form>\n");
 
 		page.append("    </div>\n");
 
 		page.append("  </body>\n");

+ 165 - 0
web/src/main/java/org/springframework/security/web/util/CssUtils.java
View File 

@@ -0,0 +1,165 @@
 
+/*
 
+ * Copyright 2002-2024 the original author or authors.
 
+ *
 
+ * Licensed under the Apache License, Version 2.0 (the "License");
 
+ * you may not use this file except in compliance with the License.
 
+ * You may obtain a copy of the License at
 
+ *
 
+ *      https://www.apache.org/licenses/LICENSE-2.0
 
+ *
 
+ * Unless required by applicable law or agreed to in writing, software
 
+ * distributed under the License is distributed on an "AS IS" BASIS,
 
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 
+ * See the License for the specific language governing permissions and
 
+ * limitations under the License.
 
+ */
 
+
 
+package org.springframework.security.web.util;
 
+
 
+/**
 
+ * Provides common CSS classes and styles, valid across Servlet and Reactive stacks.
 
+ *
 
+ * @author Daniel Garnier-Moiroux
 
+ * @since 6.4
 
+ */
 
+public final class CssUtils {
 
+
 
+	private CssUtils() {
 
+	}
 
+
 
+	/**
 
+	 * Generates the CSS used by all Spring Security default pages, such as login or
 
+	 * logout pages.
 
+	 * @return the {@code <style>} block containing the common CSS
 
+	 */
 
+	public static String getCssStyleBlock() {
 
+		return """
 
+				<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;
 
+				}
 
+
 
+				h2 {
 
+				  margin-top: 0;
 
+				  margin-bottom: 0.5rem;
 
+				  font-size: 2rem;
 
+				  font-weight: 500;
 
+				  line-height: 2rem;
 
+				}
 
+
 
+				.content {
 
+				  margin-right: auto;
 
+				  margin-left: auto;
 
+				  padding-right: 15px;
 
+				  padding-left: 15px;
 
+				  width: 100%;
 
+				  box-sizing: border-box;
 
+				}
 
+
 
+				@media (min-width: 800px) {
 
+				  .content {
 
+				    max-width: 760px;
 
+				  }
 
+				}
 
+
 
+				/* Components */
 
+				a,
 
+				a:visited {
 
+				  text-decoration: none;
 
+				  color: #06f;
 
+				}
 
+
 
+				a:hover {
 
+				  text-decoration: underline;
 
+				  color: #003c97;
 
+				}
 
+
 
+				input[type="text"],
 
+				input[type="password"] {
 
+				  height: auto;
 
+				  width: 100%;
 
+				  font-size: 1rem;
 
+				  padding: 0.5rem;
 
+				  box-sizing: border-box;
 
+				}
 
+
 
+				button {
 
+				  padding: 0.5rem 1rem;
 
+				  font-size: 1.25rem;
 
+				  line-height: 1.5;
 
+				  border: none;
 
+				  border-radius: 0.1rem;
 
+				  width: 100%;
 
+				}
 
+
 
+				button.primary {
 
+				  color: #fff;
 
+				  background-color: #06f;
 
+				}
 
+
 
+				.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;
 
+				}
 
+
 
+				.alert.alert-danger {
 
+				  color: #6b1922;
 
+				  background-color: #f7d5d7;
 
+				  border-color: #eab6bb;
 
+				}
 
+
 
+				.alert.alert-success {
 
+				  color: #145222;
 
+				  background-color: #d1f0d9;
 
+				  border-color: #c2ebcb;
 
+				}
 
+
 
+				.screenreader {
 
+				  position: absolute;
 
+				  clip: rect(0 0 0 0);
 
+				  height: 1px;
 
+				  width: 1px;
 
+				  padding: 0;
 
+				  border: 0;
 
+				  overflow: hidden;
 
+				}
 
+
 
+				table {
 
+				  width: 100%;
 
+				  max-width: 100%;
 
+				  margin-bottom: 2rem;
 
+				}
 
+
 
+				.table-striped tr:nth-of-type(2n + 1) {
 
+				  background-color: #e1e1e1;
 
+				}
 
+
 
+				td {
 
+				  padding: 0.75rem;
 
+				  vertical-align: top;
 
+				}
 
+
 
+				/* 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>
 
+				""";
 
+	}
 
+
 
+}

+ 2 - 13
web/src/test/java/org/springframework/security/web/authentication/ui/DefaultLogoutPageGeneratingFilterTests.java
View File 

@@ -1,5 +1,5 @@
 
 /*
 
- * Copyright 2002-2023 the original author or authors.
 
+ * Copyright 2002-2024 the original author or authors.
 
  *
 
  * Licensed under the Apache License, Version 2.0 (the "License");
 
  * you may not use this file except in compliance with the License.
 
@@ -39,18 +39,7 @@ public class DefaultLogoutPageGeneratingFilterTests {
 
 	public void doFilterWhenNoHiddenInputsThenPageRendered() throws Exception {
 
 		MockMvc mockMvc = MockMvcBuilders.standaloneSetup(new Object()).addFilter(this.filter).build();
 
 		mockMvc.perform(get("/logout"))
 
-			.andExpect(content().string("<!DOCTYPE html>\n" + "<html lang=\"en\">\n" + "  <head>\n"
 
-					+ "    <meta charset=\"utf-8\">\n"
 
-					+ "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n"
 
-					+ "    <meta name=\"description\" content=\"\">\n" + "    <meta name=\"author\" content=\"\">\n"
 
-					+ "    <title>Confirm Log Out?</title>\n"
 
-					+ "    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\n"
 
-					+ "    <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n"
 
-					+ "  </head>\n" + "  <body>\n" + "     <div class=\"container\">\n"
 
-					+ "      <form class=\"form-signin\" method=\"post\" action=\"/logout\">\n"
 
-					+ "        <h2 class=\"form-signin-heading\">Are you sure you want to log out?</h2>\n"
 
-					+ "        <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Log Out</button>\n"
 
-					+ "      </form>\n" + "    </div>\n" + "  </body>\n" + "</html>"))
 
+			.andExpect(content().string(containsString("Are you sure you want to log out?")))
 
 			.andExpect(content().contentType("text/html;charset=UTF-8"));
 
 	}