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