Skip to content

Commit bc8ba7f

Browse files
Kehrlannrwinch
Kehrlann
authored and
rwinch
committed
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.
1 parent 66efb63 commit bc8ba7f

File tree

9 files changed

+536
-167
lines changed

9 files changed

+536
-167
lines changed

‎config/src/test/java/org/springframework/security/config/annotation/web/configurers/DefaultLoginPageConfigurerTests.java

Lines changed: 172 additions & 69 deletions
Large diffs are not rendered by default.

‎config/src/test/java/org/springframework/security/config/http/FormLoginBeanDefinitionParserTests.java

Lines changed: 154 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright 2002-2023 the original author or authors.
2+
* Copyright 2002-2024 the original author or authors.
33
*
44
* Licensed under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License.
@@ -45,6 +45,141 @@ public class FormLoginBeanDefinitionParserTests {
4545

4646
private static final String CONFIG_LOCATION_PREFIX = "classpath:org/springframework/security/config/http/FormLoginBeanDefinitionParserTests";
4747

48+
//@formatter:off
49+
public static final String EXPECTED_HTML_HEAD = " <head>\n"
50+
+ " <meta charset=\"utf-8\">\n"
51+
+ " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n"
52+
+ " <meta name=\"description\" content=\"\">\n"
53+
+ " <meta name=\"author\" content=\"\">\n"
54+
+ " <title>Please sign in</title>\n"
55+
+ " <style>\n"
56+
+ " /* General layout */\n"
57+
+ " body {\n"
58+
+ " font-family: system-ui, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n"
59+
+ " background-color: #eee;\n"
60+
+ " padding: 40px 0;\n"
61+
+ " margin: 0;\n"
62+
+ " line-height: 1.5;\n"
63+
+ " }\n"
64+
+ " \n"
65+
+ " h2 {\n"
66+
+ " margin-top: 0;\n"
67+
+ " margin-bottom: 0.5rem;\n"
68+
+ " font-size: 2rem;\n"
69+
+ " font-weight: 500;\n"
70+
+ " line-height: 2rem;\n"
71+
+ " }\n"
72+
+ " \n"
73+
+ " .content {\n"
74+
+ " margin-right: auto;\n"
75+
+ " margin-left: auto;\n"
76+
+ " padding-right: 15px;\n"
77+
+ " padding-left: 15px;\n"
78+
+ " width: 100%;\n"
79+
+ " box-sizing: border-box;\n"
80+
+ " }\n"
81+
+ " \n"
82+
+ " @media (min-width: 800px) {\n"
83+
+ " .content {\n"
84+
+ " max-width: 760px;\n"
85+
+ " }\n"
86+
+ " }\n"
87+
+ " \n"
88+
+ " /* Components */\n"
89+
+ " a,\n"
90+
+ " a:visited {\n"
91+
+ " text-decoration: none;\n"
92+
+ " color: #06f;\n"
93+
+ " }\n"
94+
+ " \n"
95+
+ " a:hover {\n"
96+
+ " text-decoration: underline;\n"
97+
+ " color: #003c97;\n"
98+
+ " }\n"
99+
+ " \n"
100+
+ " input[type=\"text\"],\n"
101+
+ " input[type=\"password\"] {\n"
102+
+ " height: auto;\n"
103+
+ " width: 100%;\n"
104+
+ " font-size: 1rem;\n"
105+
+ " padding: 0.5rem;\n"
106+
+ " box-sizing: border-box;\n"
107+
+ " }\n"
108+
+ " \n"
109+
+ " button {\n"
110+
+ " padding: 0.5rem 1rem;\n"
111+
+ " font-size: 1.25rem;\n"
112+
+ " line-height: 1.5;\n"
113+
+ " border: none;\n"
114+
+ " border-radius: 0.1rem;\n"
115+
+ " width: 100%;\n"
116+
+ " }\n"
117+
+ " \n"
118+
+ " button.primary {\n"
119+
+ " color: #fff;\n"
120+
+ " background-color: #06f;\n"
121+
+ " }\n"
122+
+ " \n"
123+
+ " .alert {\n"
124+
+ " padding: 0.75rem 1rem;\n"
125+
+ " margin-bottom: 1rem;\n"
126+
+ " line-height: 1.5;\n"
127+
+ " border-radius: 0.1rem;\n"
128+
+ " width: 100%;\n"
129+
+ " box-sizing: border-box;\n"
130+
+ " border-width: 1px;\n"
131+
+ " border-style: solid;\n"
132+
+ " }\n"
133+
+ " \n"
134+
+ " .alert.alert-danger {\n"
135+
+ " color: #6b1922;\n"
136+
+ " background-color: #f7d5d7;\n"
137+
+ " border-color: #eab6bb;\n"
138+
+ " }\n"
139+
+ " \n"
140+
+ " .alert.alert-success {\n"
141+
+ " color: #145222;\n"
142+
+ " background-color: #d1f0d9;\n"
143+
+ " border-color: #c2ebcb;\n"
144+
+ " }\n"
145+
+ " \n"
146+
+ " .screenreader {\n"
147+
+ " position: absolute;\n"
148+
+ " clip: rect(0 0 0 0);\n"
149+
+ " height: 1px;\n"
150+
+ " width: 1px;\n"
151+
+ " padding: 0;\n"
152+
+ " border: 0;\n"
153+
+ " overflow: hidden;\n"
154+
+ " }\n"
155+
+ " \n"
156+
+ " table {\n"
157+
+ " width: 100%;\n"
158+
+ " max-width: 100%;\n"
159+
+ " margin-bottom: 2rem;\n"
160+
+ " }\n"
161+
+ " \n"
162+
+ " .table-striped tr:nth-of-type(2n + 1) {\n"
163+
+ " background-color: #e1e1e1;\n"
164+
+ " }\n"
165+
+ " \n"
166+
+ " td {\n"
167+
+ " padding: 0.75rem;\n"
168+
+ " vertical-align: top;\n"
169+
+ " }\n"
170+
+ " \n"
171+
+ " /* Login / logout layouts */\n"
172+
+ " .login-form,\n"
173+
+ " .logout-form {\n"
174+
+ " max-width: 340px;\n"
175+
+ " padding: 0 15px 15px 15px;\n"
176+
+ " margin: 0 auto 2rem auto;\n"
177+
+ " box-sizing: border-box;\n"
178+
+ " }\n"
179+
+ " </style>\n"
180+
+ " </head>\n";
181+
//@formatter:on
182+
48183
public final SpringTestContext spring = new SpringTestContext(this);
49184

50185
@Autowired
@@ -56,28 +191,20 @@ public void getLoginWhenAutoConfigThenShowsDefaultLoginPage() throws Exception {
56191
// @formatter:off
57192
String expectedContent = "<!DOCTYPE html>\n"
58193
+ "<html lang=\"en\">\n"
59-
+ " <head>\n"
60-
+ " <meta charset=\"utf-8\">\n"
61-
+ " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n"
62-
+ " <meta name=\"description\" content=\"\">\n"
63-
+ " <meta name=\"author\" content=\"\">\n"
64-
+ " <title>Please sign in</title>\n"
65-
+ " <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"
66-
+ " <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n"
67-
+ " </head>\n"
194+
+ EXPECTED_HTML_HEAD
68195
+ " <body>\n"
69-
+ " <div class=\"container\">\n"
70-
+ " <form class=\"form-signin\" method=\"post\" action=\"/login\">\n"
71-
+ " <h2 class=\"form-signin-heading\">Please sign in</h2>\n"
196+
+ " <div class=\"content\">\n"
197+
+ " <form class=\"login-form\" method=\"post\" action=\"/login\">\n"
198+
+ " <h2>Please sign in</h2>\n"
72199
+ " <p>\n"
73-
+ " <label for=\"username\" class=\"sr-only\">Username</label>\n"
74-
+ " <input type=\"text\" id=\"username\" name=\"username\" class=\"form-control\" placeholder=\"Username\" required autofocus>\n"
200+
+ " <label for=\"username\" class=\"screenreader\">Username</label>\n"
201+
+ " <input type=\"text\" id=\"username\" name=\"username\" placeholder=\"Username\" required autofocus>\n"
75202
+ " </p>\n"
76203
+ " <p>\n"
77-
+ " <label for=\"password\" class=\"sr-only\">Password</label>\n"
78-
+ " <input type=\"password\" id=\"password\" name=\"password\" class=\"form-control\" placeholder=\"Password\" required>\n"
204+
+ " <label for=\"password\" class=\"screenreader\">Password</label>\n"
205+
+ " <input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Password\" required>\n"
79206
+ " </p>\n"
80-
+ " <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Sign in</button>\n"
207+
+ " <button type=\"submit\" class=\"primary\">Sign in</button>\n"
81208
+ " </form>\n"
82209
+ "</div>\n"
83210
+ "</body></html>";
@@ -97,28 +224,20 @@ public void getLoginWhenConfiguredWithCustomAttributesThenLoginPageReflects() th
97224
// @formatter:off
98225
String expectedContent = "<!DOCTYPE html>\n"
99226
+ "<html lang=\"en\">\n"
100-
+ " <head>\n"
101-
+ " <meta charset=\"utf-8\">\n"
102-
+ " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n"
103-
+ " <meta name=\"description\" content=\"\">\n"
104-
+ " <meta name=\"author\" content=\"\">\n"
105-
+ " <title>Please sign in</title>\n"
106-
+ " <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"
107-
+ " <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n"
108-
+ " </head>\n"
227+
+ EXPECTED_HTML_HEAD
109228
+ " <body>\n"
110-
+ " <div class=\"container\">\n"
111-
+ " <form class=\"form-signin\" method=\"post\" action=\"/signin\">\n"
112-
+ " <h2 class=\"form-signin-heading\">Please sign in</h2>\n"
229+
+ " <div class=\"content\">\n"
230+
+ " <form class=\"login-form\" method=\"post\" action=\"/signin\">\n"
231+
+ " <h2>Please sign in</h2>\n"
113232
+ " <p>\n"
114-
+ " <label for=\"username\" class=\"sr-only\">Username</label>\n"
115-
+ " <input type=\"text\" id=\"username\" name=\"custom_user\" class=\"form-control\" placeholder=\"Username\" required autofocus>\n"
233+
+ " <label for=\"username\" class=\"screenreader\">Username</label>\n"
234+
+ " <input type=\"text\" id=\"username\" name=\"custom_user\" placeholder=\"Username\" required autofocus>\n"
116235
+ " </p>\n"
117236
+ " <p>\n"
118-
+ " <label for=\"password\" class=\"sr-only\">Password</label>\n"
119-
+ " <input type=\"password\" id=\"password\" name=\"custom_pass\" class=\"form-control\" placeholder=\"Password\" required>\n"
237+
+ " <label for=\"password\" class=\"screenreader\">Password</label>\n"
238+
+ " <input type=\"password\" id=\"password\" name=\"custom_pass\" placeholder=\"Password\" required>\n"
120239
+ " </p>\n"
121-
+ " <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Sign in</button>\n"
240+
+ " <button type=\"submit\" class=\"primary\">Sign in</button>\n"
122241
+ " </form>\n"
123242
+ "</div>\n"
124243
+ "</body></html>";

‎etc/checkstyle/checkstyle-suppressions.xml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,7 @@
4040

4141
<!-- Lambdas that we can't replace with a method reference because a closure is required -->
4242
<suppress files="BearerTokenAuthenticationFilter\.java" checks="SpringLambda"/>
43+
44+
<!-- CSS content -->
45+
<suppress files="CssUtils\.java" checks="SpringLeadingWhitespace"/>
4346
</suppressions>

‎web/src/main/java/org/springframework/security/web/authentication/ui/DefaultLoginPageGeneratingFilter.java

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright 2002-2023 the original author or authors.
2+
* Copyright 2002-2024 the original author or authors.
33
*
44
* Licensed under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License.
@@ -34,6 +34,7 @@
3434
import org.springframework.security.web.WebAttributes;
3535
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
3636
import org.springframework.security.web.authentication.rememberme.AbstractRememberMeServices;
37+
import org.springframework.security.web.util.CssUtils;
3738
import org.springframework.util.Assert;
3839
import org.springframework.util.StringUtils;
3940
import org.springframework.web.filter.GenericFilterBean;
@@ -201,33 +202,30 @@ private String generateLoginPageHtml(HttpServletRequest request, boolean loginEr
201202
sb.append(" <meta name=\"description\" content=\"\">\n");
202203
sb.append(" <meta name=\"author\" content=\"\">\n");
203204
sb.append(" <title>Please sign in</title>\n");
204-
sb.append(" <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" "
205-
+ "rel=\"stylesheet\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" crossorigin=\"anonymous\">\n");
206-
sb.append(" <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" "
207-
+ "rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n");
205+
sb.append(CssUtils.getCssStyleBlock().indent(4));
208206
sb.append(" </head>\n");
209207
sb.append(" <body>\n");
210-
sb.append(" <div class=\"container\">\n");
208+
sb.append(" <div class=\"content\">\n");
211209
if (this.formLoginEnabled) {
212-
sb.append(" <form class=\"form-signin\" method=\"post\" action=\"" + contextPath
210+
sb.append(" <form class=\"login-form\" method=\"post\" action=\"" + contextPath
213211
+ this.authenticationUrl + "\">\n");
214-
sb.append(" <h2 class=\"form-signin-heading\">Please sign in</h2>\n");
212+
sb.append(" <h2>Please sign in</h2>\n");
215213
sb.append(createError(loginError, errorMsg) + createLogoutSuccess(logoutSuccess) + " <p>\n");
216-
sb.append(" <label for=\"username\" class=\"sr-only\">Username</label>\n");
214+
sb.append(" <label for=\"username\" class=\"screenreader\">Username</label>\n");
217215
sb.append(" <input type=\"text\" id=\"username\" name=\"" + this.usernameParameter
218-
+ "\" class=\"form-control\" placeholder=\"Username\" required autofocus>\n");
216+
+ "\" placeholder=\"Username\" required autofocus>\n");
219217
sb.append(" </p>\n");
220218
sb.append(" <p>\n");
221-
sb.append(" <label for=\"password\" class=\"sr-only\">Password</label>\n");
219+
sb.append(" <label for=\"password\" class=\"screenreader\">Password</label>\n");
222220
sb.append(" <input type=\"password\" id=\"password\" name=\"" + this.passwordParameter
223-
+ "\" class=\"form-control\" placeholder=\"Password\" required>\n");
221+
+ "\" placeholder=\"Password\" required>\n");
224222
sb.append(" </p>\n");
225223
sb.append(createRememberMe(this.rememberMeParameter) + renderHiddenInputs(request));
226-
sb.append(" <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Sign in</button>\n");
224+
sb.append(" <button type=\"submit\" class=\"primary\">Sign in</button>\n");
227225
sb.append(" </form>\n");
228226
}
229227
if (this.oauth2LoginEnabled) {
230-
sb.append("<h2 class=\"form-signin-heading\">Login with OAuth 2.0</h2>");
228+
sb.append("<h2>Login with OAuth 2.0</h2>");
231229
sb.append(createError(loginError, errorMsg));
232230
sb.append(createLogoutSuccess(logoutSuccess));
233231
sb.append("<table class=\"table table-striped\">\n");
@@ -244,7 +242,7 @@ private String generateLoginPageHtml(HttpServletRequest request, boolean loginEr
244242
sb.append("</table>\n");
245243
}
246244
if (this.saml2LoginEnabled) {
247-
sb.append("<h2 class=\"form-signin-heading\">Login with SAML 2.0</h2>");
245+
sb.append("<h2>Login with SAML 2.0</h2>");
248246
sb.append(createError(loginError, errorMsg));
249247
sb.append(createLogoutSuccess(logoutSuccess));
250248
sb.append("<table class=\"table table-striped\">\n");

‎web/src/main/java/org/springframework/security/web/authentication/ui/DefaultLogoutPageGeneratingFilter.java

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* Copyright 2002-2023 the original author or authors.
2+
* Copyright 2002-2024 the original author or authors.
33
*
44
* Licensed under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License.
@@ -27,6 +27,7 @@
2727
import jakarta.servlet.http.HttpServletResponse;
2828

2929
import org.springframework.core.log.LogMessage;
30+
import org.springframework.security.web.util.CssUtils;
3031
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
3132
import org.springframework.security.web.util.matcher.RequestMatcher;
3233
import org.springframework.util.Assert;
@@ -69,19 +70,15 @@ private void renderLogout(HttpServletRequest request, HttpServletResponse respon
6970
sb.append(" <meta name=\"description\" content=\"\">\n");
7071
sb.append(" <meta name=\"author\" content=\"\">\n");
7172
sb.append(" <title>Confirm Log Out?</title>\n");
72-
sb.append(" <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css\" "
73-
+ "rel=\"stylesheet\" integrity=\"sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M\" "
74-
+ "crossorigin=\"anonymous\">\n");
75-
sb.append(" <link href=\"https://getbootstrap.com/docs/4.0/examples/signin/signin.css\" "
76-
+ "rel=\"stylesheet\" integrity=\"sha384-oOE/3m0LUMPub4kaC09mrdEhIc+e3exm4xOGxAmuFXhBNF4hcg/6MiAXAf5p0P56\" crossorigin=\"anonymous\"/>\n");
73+
sb.append(CssUtils.getCssStyleBlock().indent(4));
7774
sb.append(" </head>\n");
7875
sb.append(" <body>\n");
79-
sb.append(" <div class=\"container\">\n");
80-
sb.append(" <form class=\"form-signin\" method=\"post\" action=\"" + request.getContextPath()
76+
sb.append(" <div class=\"content\">\n");
77+
sb.append(" <form class=\"logout-form\" method=\"post\" action=\"" + request.getContextPath()
8178
+ "/logout\">\n");
82-
sb.append(" <h2 class=\"form-signin-heading\">Are you sure you want to log out?</h2>\n");
83-
sb.append(renderHiddenInputs(request)
84-
+ " <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\">Log Out</button>\n");
79+
sb.append(" <h2>Are you sure you want to log out?</h2>\n");
80+
sb.append(renderHiddenInputs(request));
81+
sb.append(" <button class=\"primary\" type=\"submit\">Log Out</button>\n");
8582
sb.append(" </form>\n");
8683
sb.append(" </div>\n");
8784
sb.append(" </body>\n");

0 commit comments

Comments
 (0)