Spring Security - Login page is not loading

Hello, with Spring Security I got the problem, that the access to the login page is not denied, but the form is not loading.

The browser terminal says:

Refused to execute script from 'http://localhost:8080/login' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.


Uncaught Application ROOT-2521314 is already being initialized
initApplication	@	login:2
(anonymous)	@	login:216
(anonymous)	@	login:216



Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
    at login:224
(anonymous)	@	login:224

How to fix that?

That’s my SecurityConfig configure method

	@Override
	protected void configure(HttpSecurity http) throws Exception {

		List<String> roles = new ArrayList<String>();
		for (Role role : roleRepository.findAll()) {
			roles.add(roleRepository.findAll().iterator().next().getRole());
		}

		http.csrf().disable()

			//	.requestCache().requestCache(new CustomRequestCache())

			//	.and()
				.requestCache().requestCache(new CustomRequestCache())
				
				.and().authorizeRequests()
				
				.requestMatchers(SecurityUtils::isFrameworkInternalRequest).permitAll()
		
				.anyRequest().hasAnyAuthority(roles.stream().toArray(String[]::new))
			

				.and().formLogin()
				.loginPage("/login")
				.permitAll()
				.loginProcessingUrl("/login")
				.failureUrl("/login?error")
				.defaultSuccessUrl("/device");



	}

Hi Steven. I do not have an answer to your question per se, I just wanted to point out that your roles loop does not do what you probably wanted it to do.

List<String> roles = new ArrayList<String>();
for (Role role : roleRepository.findAll()) {
	// with this line, the same role string is added to `roles` each time. 
	// it will always use the first item from findAll(), which will always be the same.
	// roles.add(roleRepository.findAll().iterator().next().getRole());
	
	// this should do what you want
	roles.add(role.getRole());
}

Maybe this fixes your issue. maybe not. But it will definitely fix another issue that you did not know you had (permission for certain roles).

I am having the same issue on my project.

TypeError: 'text/html' is not a valid JavaScript MIME type.

Were you able to fix it? I also tried to override public void configure(WebSecurity web) method to ignore patterns (inspired by bakery example application). did not work yet…

I could finally resolve it by ignoring VAADIN requests in WebSecurity. The problem was, that my application does not run in the ROOT context, but in a specific contextPath. So my config ended up like this:

    @Override
    public void configure(WebSecurity web) {
        web.ignoring().antMatchers(
                // Vaadin Flow static resources
                "/VAADIN/**", "/myContext/VAADIN/**",

                // the standard favicon URI
                "/favicon.ico",

                // the robots exclusion standard
                "/robots.txt",

                // web application manifest
                "/manifest.webmanifest",
                "/sw.js",
                "/offline-page.html",

                // (development mode) static resources
                "/frontend/**",

                // (development mode) webjars
                "/webjars/**",

                // (production mode) static resources
                "/frontend-es5/**", "/frontend-es6/**");
    }

I am not sure if this configuration is too much when you just use Vaadin 14.3 (npm mode), but it worx. I think its the first entry that was the issue.