Not able to load Css file in html page

Question

I am trying to make a login page using spring security, and have added the .css file in the AntMatcher list for permission. but still, I am getting the following error when trying to load the CSS file.

Exception:

home:6 GET http://localhost:8080/defaultStyle.css net::ERR_ABORTED 404

updating with the changed classes.

WebSecurityConfig class Code:

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity( jsr250Enabled = true,
                         prePostEnabled = true )
public class WebSecurityConfig extends WebSecurityConfigurerAdapter
{

@Autowired
CustomUserDetailsService customUserDetailsService;

@Autowired
private JwtAuthenticationEntryPoint unauthorizedHandler;

@Autowired
private JwtAuthenticationFilter jwtAuthenticationFilter;

@Autowired
private CustomAccessDeniedHandler customAccessDeniedHandler;

@Bean
public AuthenticationManager authenticationManagerBean() throws Exception
{
    return super.authenticationManagerBean();
}

@Override
public void configure( WebSecurity web ) throws Exception
{
    web.ignoring()
       .antMatchers( "/*.css" ) // or better ending with ".{js,html}" or something
       .antMatchers( "/resources/static/**/*" );
}

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

    http.cors().and().csrf().disable().authorizeRequests()

        .antMatchers( "/*", "/admin", "/api/auth/**",
            "/static/**",
            "/css/*.css",
            "/img/**",
            "/favicon.ico",
            "/**/*.png",
            "/**/*.gif",
            "/**/*.svg",
            "/**/*.jpg",
            "/**/*.html",
            "/**/*.css",
            "/**/*.js",
            "/webjars/**" ).permitAll()
        .anyRequest().authenticated()
        .and()
        .formLogin().loginPage( "/home" )
        .loginProcessingUrl( "/login-user" )
        .defaultSuccessUrl( "/dashboard" ).permitAll()
        .and()
        .logout().invalidateHttpSession( true )
        .clearAuthentication( true )
        .logoutRequestMatcher( new AntPathRequestMatcher( "/logout" ) )
        .logoutSuccessUrl( "/login?logout" )
        .permitAll().and()

        .exceptionHandling().accessDeniedHandler( customAccessDeniedHandler ).authenticationEntryPoint( unauthorizedHandler ).and()
        .sessionManagement().sessionCreationPolicy( SessionCreationPolicy.STATELESS );
    http

        .addFilterBefore( jwtAuthenticationFilter, UsernamePasswordAuthenticationFilter.class );
}

@Autowired
public void globalUserDetails( AuthenticationManagerBuilder auth ) throws Exception
{
    auth.userDetailsService( customUserDetailsService )
        .passwordEncoder( passwordEncoder() );
}

@Bean
public PasswordEncoder passwordEncoder()
{
    return new BCryptPasswordEncoder();
}
}

Web Config Class

Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer
{

@Override
public void addResourceHandlers( ResourceHandlerRegistry registry )
{
    registry
        .addResourceHandler( "swagger-ui.html" )
        .addResourceLocations( "classpath:/META-INF/resources/" );

    registry
        .addResourceHandler( "/webjars/**" )
        .addResourceLocations( "classpath:/META-INF/resources/webjars/" );
    registry
        .addResourceHandler( "/static/**" )
        .addResourceLocations( "classpath:/static/" );
    registry.addResourceHandler( "/css/**" )
            .addResourceLocations( "/css/" );
    registry.addResourceHandler( "/img/**" )
            .addResourceLocations( "/img/" );
    registry.addResourceHandler( "/js/**" )
            .addResourceLocations( "/js/" );
}

@Override
public void addCorsMappings( CorsRegistry registry )
{
    registry.addMapping( "/**" )
            .allowedMethods( "POST", "GET", "PUT", "OPTIONS", "DELETE" )
            .allowedHeaders( "X-Auth-Token", "Content-Type" )
            .exposedHeaders( "custom-header1", "custom-header2" )
            .allowCredentials( false )
            .maxAge( 4800 );
}

@Override
public void addViewControllers( ViewControllerRegistry registry )
{
    System.out.println( "Inside MvcConfig addViewControllers() adding View forgot" );
    registry.addViewController( "/admin/home" ).setViewName( "jsp/home" );
    registry.addViewController( "/login" ).setViewName( "/login" );
}
}

New Error

edit

I have updated the question with the modified web security file and changed the exception to new exception I am getting now.

Open the URL to the css in the browser and see whether it is shown there, it might be that you will not find it in the root but rather below some context-root. Maybe something like `http://localhost:8080/myapp/css/defaultStyle.css`. — arnonuem, Jul 01 '19 at 07:46
I checked that.i have put it in root folder where it was working before I applied Security It shows. This application has no explicit mapping for /error, so you are seeing this as a fallback. Mon Jul 01 13:35:13 IST 2019 There was an unexpected error (type=Not Found, status=404). No message available — Shubham Kumar, Jul 01 '19 at 08:07
Try this: @Override public void configure(WebSecurity web) throws Exception { web.ignoring().antMatchers( "/resources/**" ); //make static content available - only for spring mvc applications } — arnonuem, Jul 01 '19 at 08:13
already did that. web.ignoring() .antMatchers("/*.css") // or better ending with ".{js,html}" or something .antMatchers("/resources/static/**/*"); — Shubham Kumar, Jul 01 '19 at 08:15
What happens if you put that file into `src/main/resources/static/css`? — arnonuem, Jul 01 '19 at 08:18
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/195783/discussion-between-majo-and-arnonuem). — Shubham Kumar, Jul 01 '19 at 08:31

score 0 · Answer 1 · answered Jul 01 '19 at 13:36

Please Try Below Code

 http.cors().and().csrf().disable().
            authorizeRequests()
            .antMatchers( "/",
                "/static/**",
                "/img/**",
                "/favicon.ico",
                "/**/*.png",
                "/**/*.gif",
                "/**/*.svg",
                "/**/*.jpg",
                "/**/*.html",
                "/**/*.css",
                "/**/*.js",
                "/webjars/**" ).permitAll()
            .antMatchers( "/api/auth/**" ).permitAll()
            .anyRequest().authenticated()
            .and()
            .formLogin().loginPage( "/home" )
            .loginProcessingUrl("/login")
            .defaultSuccessUrl( "/dashboard").permitAll()
            .and()

Ref 1 Ref 2

I tried your change. after doing some more changes it is now showing a different error. I will add that in the problem statement. — Shubham Kumar, Jul 02 '19 at 05:36
Hello @majo Can You Please update the question with the latest changes in your code — Romil Patel, Jul 02 '19 at 05:41

Not able to load Css file in html page

1 Answers1