I'm building a Spring MVC application with Spring Security and Bootstrap in my HTML files (thymeleaf templates). The Spring Security part is based on the Spring Guide for Spring Security and combined with a Spring Boot application server.
After enabling Spring Security the bootstrap css file won't load with the error message:
Refused to execute script from 'http://localhost:8080/js/bootstrap.min.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
The error message above comes from the chrome developer console.
What I've tried:
permit
callMy dir structure:
/main
|-> /java
| BootStart.java
|-> /security
|SecurityConfiguration.java
|-> /resources
|-> /static
|-> /css /** bootstrap location */
|-> /js
|-> /fonts
|-> /templates
| /user
| sample.html
BootStart.java is the java file that gets picked up by Spring Boot.
BootStart.java:
@EnableAutoConfiguration
@ComponentScan
public class BootStart {
public static void main(String[] args) {
SpringApplication.run(BootStart.class, args);
}
}
SecurityConfiguration.java:
@Configuration
@EnableWebSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.formLogin()
.loginPage("/login")
.permitAll()
.and()
.logout()
.permitAll();
http
.authorizeRequests()
.antMatchers("/", "/resources/static/**").permitAll()
.anyRequest().authenticated();
}
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth
.inMemoryAuthentication()
.withUser("user").password("password").roles("USER");
}
}
Sample.html:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" th:href="@{/css/bootstrap.css}" href="../../css/bootstrap.min.css"/>
<link rel="stylesheet" th:href="@{/css/bootstrap-theme.css}" href="../../css/bootstrap-theme.min.css"/>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div class="alert alert-danger" role="alert">!Basic template!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Currently I'm using the following dependencies in my pom:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-core</artifactId>
<version>3.2.4.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-web</artifactId>
<version>3.2.4.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-config</artifactId>
<version>3.2.4.RELEASE</version>
</dependency>
How must I configure Spring Security that I can load css/ js files from my /static resources directory?
Please check this answer by other with similar question.
If you place js files in /js/
dir, there should not that kind of MIME error.
And, for javascript files, it is better to disable security for them:
@Override
public void configure(WebSecurity web) throws Exception {
web.ignoring().antMatchers("/the_js_path/**");
}
I had the same error too with the same folder structure, it was on the css file.
All I did is added /css/**
in antMatcher() as below:
@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
httpSecurity
.authorizeRequests()
.antMatchers("/css/**").permitAll() //Adding this line solved it
.anyRequest().fullyAuthenticated()
.and()
.formLogin()
.loginPage("/login").permitAll()
.loginProcessingUrl("/sign-in")
.defaultSuccessUrl("/home")
.failureUrl("/error")
.and()
.logout()
.logoutSuccessUrl("/logout")
.permitAll()
.and()
.csrf().disable();
}
In your case just add /js/**
in the antMatcher() and then use permitAll()
I used this to resolved my problem, you may try this
@Override
public void configure(WebSecurity web) throws Exception {
web.ignoring().antMatchers("/resources/**");
}
Hope it help.
I had this problem, and struggled for a while. I had created a route which should match every "unmatched" route, and send index.html
.
@Controller
public class DefaultPageController {
@Autowired
private LogService logService;
@GetMapping("/*")
public String defaultPage(Model model){
logService.saveLog(Log.LogType.INFO, null, "Default route");
return "index";
}
}
The problem was, that it overrode the route /file.js
, and didn't send the static files, but always index.html
.
So the solution was only to customize the route.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With