Spring security does not allow CSS or JS resources to be loaded

Question

The resource is under src/main/resources/static/css or src/main/resources/static/js, I'm using spring boot, and the class of security is:

@Configuration
@EnableWebMvcSecurity
@EnableGlobalAuthentication
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
//      http.authorizeRequests().antMatchers("/", "/index", "/quizStart")
//              .permitAll().anyRequest().authenticated();
//      http.formLogin().loginPage("/login").permitAll().and().logout()
//              .permitAll();
    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth)
            throws Exception {
        auth.inMemoryAuthentication().withUser("test").password("test")
                .roles("USER");
    }
}

It works well (resources can be loaded) when I access "/index" from browser, however, if I uncomment the four lines in the class, resources can not be loaded, the four lines means:

    http.authorizeRequests().antMatchers("/", "/index", "/quizStart")
            .permitAll().anyRequest().authenticated();
    http.formLogin().loginPage("/login").permitAll().and().logout()
            .permitAll();

Could anyone help with this ? Thanks in advance.

Answer 1

You probably want to make sure to have your directory containing those items set as permitAll.

Here's an excerpt from my spring security context file. Under the resources directory, I have js, css, and images folders which are given permissions by this line.

<security:intercept-url pattern="/resources/**" access="permitAll" />

Answer 2

For some reason, this did not work for me:

http.authorizeRequests().antMatchers("/resources/**").permitAll();

I had to add this:

http.authorizeRequests().antMatchers("/resources/**").permitAll().anyRequest().permitAll();

Also, this line has to be after the code which restrics access.

Answer 3

Add following

@Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/resources/**").anyRequest();
    }

Answer 4

you can also use directly like "/*.js" for specific file or "/resources/**" for directory

 http.authorizeRequests()
                .antMatchers("/", "/login", "/logout", "/error").permitAll()
                .antMatchers("/resources/**").permitAll()
                .antMatchers("/*.js").permitAll()
                .antMatchers("/api/**").authenticated()

Answer 5

I had the same problem and the permitAll() solution didn't work for me. I added the following @Overridemethod to my WebSecurityConfigclass.

@Override
public void configure(WebSecurity web) throws Exception {
    web
            .ignoring()
            .antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/img/**", "/icon/**");
}

Good Luck!

Answer 6

I had the same problem and changing access to "permitAll" didn't help. I created a new http pattern where I set security to "none" and then I was able to download the css and js files without authentication.

<http pattern="/resources/**" security="none" />

Answer 7

This finally worked for me. The /home (which will bring up the login page) and error messages do not need authentication. All the resources are permitAll, and the /main url is authenticated. Any other url (eg. /users /customers etc..) would need to be added as isAuthenticated()

  <security:intercept-url pattern="/home" access="isAnonymous()"/>
  <security:intercept-url pattern="/error*" access="isAnonymous()"/>      
  <security:intercept-url pattern="/main" access="isAuthenticated()"/>
  <security:intercept-url pattern="/css/**" access="permitAll" />     
  <security:intercept-url pattern="/js/**" access="permitAll" />
  <security:intercept-url pattern="/fonts/**" access="permitAll" />
  <security:intercept-url pattern="/images/**" access="permitAll" />