External CSS file doesn't work if I turn on auth with Spring Security.
#EnableWebSecurity
#Configuration
class SecurityConfig {
#Bean
fun security(http:HttpSecurity):SecurityFilterChain{
http
.formLogin()
.loginPage("/")
.failureUrl("/")
.and()
.logout()
.logoutSuccessUrl("/")
.and()
.authorizeHttpRequests()
.requestMatchers("/","/about_us").permitAll()
.anyRequest().authenticated()
return http.build();
}
}
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>BigBroHelp</title>
<link rel="stylesheet" type="text/css" href="../../static/css/final_form.css">
<link th:href="#{/css/start_page/final_form.css}" rel="stylesheet">
<link th:href="#{https://fonts.googleapis.com/css2?family=Jost:wght#500&display=swap}" rel="stylesheet">
<link th:href="#{/img/ответы_нейро_бошка.png}" rel="icon" type="image/png" style="width: 1000px">
<script th:src="#{/js/start_page/validation_counter.js}"></script>
</head>
<body id="body">
<div class="main">
<input type="checkbox" id="chk" aria-hidden="true">
<div class="signup">
<form>
<label for="chk" aria-hidden="true" id="reg_label">Регистрация</label>
<p id="count">0</p>
<input type="text" name="txt" placeholder="Логин" required="" id="reg_input_login" onclick="count()">
<!-- <input type="email" name="email" placeholder="Почта" required="">-->
<input type="password" name="pswd" placeholder="Пароль" required="">
<button onclick="count()">Зарегистрироваться</button>
</form>
</div>
<div class="login">
<form>
<label for="chk" aria-hidden="true">Войти</label>
<input type="email" name="email" placeholder="Логин" required="">
<input type="password" name="pswd" placeholder="Пароль" required="">
<button>Войти</button>
</form>
</div>
</div>
<div class="bigBro">
<div class="modal">
<h1>
Big Bro Help<br>
</h1>
<a class="btn" id="about_us" th:href="#{/about_us}">О проекте </a><br>
</div>
</div>
</body>
</html>
#EnableWebSecurity
#Configuration
class SecurityConfig {
#Bean
fun security(http:HttpSecurity):SecurityFilterChain{
http
.authorizeHttpRequests()
.anyRequest().permitAll()
return http.build();
}
}
If I leave any request permitAll an external CSS file works. But if I turn on auth, css file doesn't work.
Spring Boot version 3.0.2 (Spring Security 6.0.1)
Thymeleaf version 3.1.1
Ensure Spring Security does not require authentication for your CSS like this:
#Bean
fun security(http:HttpSecurity):SecurityFilterChain{
http
.formLogin()
.loginPage("/")
.failureUrl("/")
.and()
.logout()
.logoutSuccessUrl("/")
.and()
.authorizeHttpRequests()
.requestMatchers("/","/about_us").permitAll()
.requestMatchers(PathRequest.toStaticResources().atCommonLocations()).permitAll()
.anyRequest().authenticated()
return http.build();
}
Notice this added line:
.requestMatchers(PathRequest.toStaticResources().atCommonLocations()).permitAll()
Related
I am lost with something 'stupid'.
I am building my first spring application and I am trying to access css and jpg ressources files.
I rode many pages/forum and everyone's answer is "spring uses automatically what is in /static folder"
But I fail, and fail and fail again to include css and picture on my page. I tried so many things, now I feel totally lost (it's suppose to be an easy thing to do)
I use a WebSecurityConfigurerAdapter:
#Configuration
#EnableGlobalMethodSecurity(prePostEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter{
#Autowired
private UtilisateurUserDetailsService userService;
#Override
protected void configure(HttpSecurity http) throws Exception {
// #formatter:off
http.authorizeRequests()
.antMatchers("/","/index","/page1","/open/**", "/static/**", "/css/**", "/img/**").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.defaultSuccessUrl("/secure/page1")
.failureUrl("/login?error=true")
.permitAll()
.and()
.logout()
.logoutUrl("/logout")
.logoutSuccessUrl("/index")
.permitAll();
// #formatter:on
}
#Override
public void configure(WebSecurity web) throws Exception {
web.ignoring().antMatchers("/static/**");
}
#Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.userDetailsService(userService);
}
#Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
}
In my application.property I have:
spring.resources.static-locations=classpath:static
There is my project arborescence:
And this is my index.html file:
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>My Quotes</title>
<link th:href="#{/css/main.css}" rel="stylesheet" >
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div th:if="${param.logout}" class="alert alert-info">Deconnected</div>
<div class="form-group">
<h1>Bienvenue dans MyQuotes</h1>
<div class="form-group">
<div class="button-group" sec:authorize="!isFullyAuthenticated()">
<a th:href="#{/login}" class="btn btn-outline-success topright">login</a>
</div>
<div class="button-group" sec:authorize="isFullyAuthenticated()">
<a th:href="#{/logout}" class="btn btn-outline-warning topright">logout</a>
</div>
</br> <span>Ici vous pouvez enregistrer et retrouver toutes vos
meilleurs citations et celles de vos amis </span> </br> </br> <a
th:href="#{/open/search}" class="btn btn-outline-warning">chercher
une quote</a>
</div>
</div>
</div>
<img th:src="#{img/img.jpg}"/>
</body>
</html>
Do someone can spot what I am doing wrong or what I am missing ?
Update your code to refer CSS as below and it should work.
<link th:href="#{/css/main.css}" rel="stylesheet" >
You can find more details here
I open my localhost app in
Chrome - working perfectly
Edge - working but some css not supported
Mozilla Firefox version 53.0.3 (32-bit) - White screen.
Now why it's become white screen on Mozilla? Any ideas? Here is my codes:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="http://localhost:2001/assets/material.indigo-pink.min.css">
<script src="http://localhost:2001/assets/material.min.js"></script>
<style>
.remove-padding{
padding:0px;
}
</style>
<title>Population</title>
</head>
<body>
<dialog class="mdl-dialog remove-padding">
<div class="mdl-card mdl-shadow--6dp">
<form method="post" action="http://localhost:2001/login/process">
<div class="mdl-card__title mdl-color--primary mdl-color-text--white">
<h2 class="mdl-card__title-text">Login</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="email" required id="email" name="email" value="" />
<label class="mdl-textfield__label" for="email">Email</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="password" required id="userpass" name="password" />
<label class="mdl-textfield__label" for="userpass">Password</label>
</div>
</div>
<div class="mdl-card__actions mdl-card--border" style="text-align: right;">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Sign In
</button>
</div>
</form>
</div>
</dialog>
<script>
var dialog = document.querySelector('dialog');
dialog.showModal();
</script>
</body>
</html>
I have tried styling my form submit button, but it isn't responding to any CSS styling. I tried using its class individually and also id individually and even both the class and id together, but nothing is working. I've attached the code:
HTML/PHP
if ($_POST['submit']) {
$member_username = "username";
$member_password = "pass****";
$username = $_POST['username'];
$password = $_POST['password'];
if ($username == $member_username && $password == $member_password) {
$_SESSION['username'] = $username;
header('Location: secret.php');
} else {
echo 'Incorrect username or password';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel=stylesheet />
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<title>Topaz</title>
</head>
<body>
<div class="index">
<div class="indexcontainer">
<h1>Topaz</h1>
<div class="indexform">
<form action="index.php" method="POST">
<input class="textbox" type="text" name="username" placeholder="Username" /><br /><br /><br />
<input class="textbox" type="password" name="password" placeholder="Password" /><br /><br /><br />
<input class="submit" id="submit" type="submit" name="submit" value="Login" />
</form>
</div>
</div>
</div>
</body>
</html>
CSS
.submit {
width: 200px;
}
#submit {
width: 200px;
}
Its probably just relative pathing to the style sheet, hit F12 (for chrome, though may need to enable dev console, google if needed) and see whether the network panel or console panel show a 404 error for one or more files.
The actual css applies fine
<!DOCTYPE html>
<html>
<head>
<!--
<link href="style.css" rel="stylesheet" />
-->
<style>
.submit{width:200px; color:red;}
</style>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<title>Topaz</title>
</head>
<body>
<div class="index">
<div class="indexcontainer">
<h1>Topaz</h1>
<div class="indexform">
<form action="index.php" method="POST">
<input class="textbox" type="text" name="username" placeholder="Username" />
<br />
<br />
<br />
<input class="textbox" type="password" name="password" placeholder="Password" />
<br />
<br />
<br />
<input class="submit" id="submit" type="submit" name="submit" value="Login" />
</form>
</div>
</div>
</div>
</body>
</html>
Ensure that "style.css" is on the same level as the php or html file that is actually being hit, or use relative pathing.
Also its good form to validate your html and css, as unrelated syntax mistakes can break styling.
For html: https://validator.w3.org/
For css: https://jigsaw.w3.org/css-validator/
But these likely wont be able to pickup on pathing issues, just syntax, so ensure you use the developer console for whatever browser your using.
You can try to add an inline style to have precedent over the external style sheet. Just use the tag and then put in the in the head tag area.
<style>
.submit {
width: 200px;
}
#submit {
width: 200px;
}
</style>
I have a simple Spring MVC 4.x (tiles) scenario. Where in response to a URI a form is displayed, however, Bootstrap styling is not kicking in:
JSP:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<br/><br/><br/>
<form:form modelAttribute="car" method="post">
<div class="form-group">
<label for="title">Make</label>
<form:input path="make"/>
</div>
<div class="form-group">
<label for="isbn">Model (Long Label)</label>
<form:input path="model"/>
</div>
<div class="form-group">
<label for="isbn">Color</label>
<form:input path="color"/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form:form>
Rendered HTML:
<body>
<div class="container">
<div class="row">
<div class="header">
</div>
<div id="main-content-container">
<!-- main body -->
<br/><br/><br/>
<form id="car" action="/libms/carsx" method="post">
<div class="form-group">
<label for="title">Make</label>
<input id="make" name="make" type="text" value=""/>
</div>
<div class="form-group">
<label for="isbn">Model (Long Label)</label>
<input id="model" name="model" type="text" value=""/>
</div>
<div class="form-group">
<label for="isbn">Color</label>
<input id="color" name="color" type="text" value=""/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="footer">
</div>
</div>
</div>
</body>
Looks like this on screen:
I have verified if Spring's form:form is removed and <form> is used instead, the styling kicks in.
You need to include jquery and bootstrap on your page. For example:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
You may also want to make of use some other bootstrap elements such as cssClass.
For example:
<form:form modelAttribute="car" method="post">
...can be changed to:
<form:form modelAttribute="car" cssClass="form-horizontal" method="post">
And:
<label for="title">Make</label>
...can be changed to:
<label for="title" class="col-sm-2 control-label">Make</label>
And:
<form:input path="make"/>
...can be changed to:
<div class="col-sm-2">
<form:input path="make" cssClass="form-control"/>
</div>
As you mention, the Spring form functionality also kicks in since you're including the Spring form taglib as well.
Have you Included Bootstrap in your jsp page Like
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<title>Products</title>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Products</h1>
<p>Add products</p>
</div>
</div>
....
I can't see it in your page
I'm starting to play with javascript for the first time and I turned the index.html of a steroids project into a simple login form but the content is going below the header. I've also tried the <ionic-header-bar><ionic-content> tags but none works. What am I missing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width">
<title>Gestor de Mesas</title>
<link rel="stylesheet" href="/components/ionic/css/ionic.min.css" />
<link rel="stylesheet" href="/stylesheets/application.css" />
<script src="/javascripts/onerror.js"></script>
<script src="/javascripts/console.log.js"></script>
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/cordova.js"></script>
<script src="/components/steroids-js/steroids.js"></script>
<script src="/javascripts/application.js"></script>
</head>
<body class="content">
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Lembrar?
</li>
</div>
<button class="button button-positive">
Entrar
</button>
</ion-content>
</body>
</html>
Try adding Class "has-header" to your tag. It'll solve the issue. This is because :
ion-header-bar is positioned absolutely. and hence your lower content goes behind it. .has-header class defines top : 44px, which will move your content down with the required space.