Use static CSS in servlet default UI

This commit is contained in:
Daniel Garnier-Moiroux 2024-08-27 17:11:04 +02:00 committed by Rob Winch
parent c5c5cd5ed0
commit 11616a1d78
8 changed files with 81 additions and 557 deletions

View File

@ -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);

View File

@ -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
}

View File

@ -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">

View File

@ -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">

View File

@ -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">

View File

@ -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));
}

View File

@ -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">

View File

@ -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">