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
@En         


        

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

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 4

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 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

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" />