Spring Security不允许加载js

Question

我之前没有使用过 Spring Security，所以我是新来的。

我有一个加载js的页面，我已经设置了每个人都可以访问带有js的包，但仍然不跳过

@Configuration
public class MvcConfig implements WebMvcConfigurer {

    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/welcome").setViewName("welcome");
        registry.addViewController("/").setViewName("welcome");
        registry.addViewController("/hello").setViewName("hello");
        registry.addViewController("/admin").setViewName("admin");
        registry.addViewController("/login").setViewName("login");
        registry.addViewController("/registration").setViewName("registration");
    }
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
                .addResourceHandler("/static/**")
                .addResourceLocations("classpath:/static/");
    }

}

这是 Spring Security 配置文件

@Configuration
@EnableWebSecurity
@EnableMethodSecurity
public class WebSecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
                .csrf().disable()
                .authorizeHttpRequests((requests) -> requests
                        .requestMatchers("/", "/welcome", "/registration", "/admin", "/resources/**", "/add", "/listOfUsers" ).permitAll()

                        .anyRequest().authenticated()
                )
                .formLogin((form) -> form
                        .loginPage("/login")
                        .permitAll()
                )
                .logout((logout) -> logout.permitAll());

        return http.build();
    }

    @Bean
    public UserDetailsService userDetailsService() {
        return new MyUserDetailsService();
    }

    @Bean
    public AuthenticationProvider authenticationProvider(){
        DaoAuthenticationProvider provider = new DaoAuthenticationProvider();
        provider.setUserDetailsService(userDetailsService());
        provider.setPasswordEncoder(passwordEncoder());
        return provider;
    }

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

控制器文件

@RestController
public class BackendController {
    @Autowired
    private UserRepository userRepository;

    private PasswordEncoder passwordEncoder;


  
    @PostMapping("/add")
    public void processFormData(@RequestBody String jsonUser) throws JsonProcessingException {
        User user = jsonStringToUser(jsonUser);  // Получаю объект User из json
        user.setPassword(passwordEncoder.encode(user.getPassword()));
        System.out.println(user);
        userRepository.save(user);
    }
   
    @GetMapping("/listOfUsers")
    public String listOfUsers() throws JsonProcessingException {
        List<User> users = userRepository.findAll();
        return usersToJson(users);  
    }
   
    private User jsonStringToUser(String jsonUser) throws JsonProcessingException {
        ObjectMapper objectMapper = new ObjectMapper();
        User user = objectMapper.readValue(jsonUser, User.class);
        return user;
    }
   
    private String usersToJson(List<User> users) throws JsonProcessingException {
        ObjectMapper objectMapper = new ObjectMapper();
        String jsonUsers = objectMapper.writeValueAsString(users);
        return jsonUsers;
    }
}

js文件

function submitForm() {
    var firstName = document.getElementById("firstName").value;
    var secondName = document.getElementById("secondName").value;
    var phoneNumber = document.getElementById("phoneNumber").value;
    var email = document.getElementById("email").value;
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var role;
    if (document.getElementById('role_student').checked) {
        role = document.getElementById('role_student').value;
    }
    else{
        role = document.getElementById('role_teacher').value;
    }


    fetch('/add', {
        method: 'POST',
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json'
        },

        body: JSON.stringify({firstName: firstName, secondName: secondName, phoneNumber: phoneNumber,
                                email: email, username: username, password: password, role: role})
    })
    .then(response => response.json())
    .then(data => {

        console.log(data);

    })
    .catch(error => {
        console.error('Error:', error);
    });

}

async function getListOfUsers(){
    let response = await fetch("/listOfUsers");
    let users = await response.json();
    let list = document.querySelector('.listOfUsers');

    for(key in users){
        list.innerHTML += `
            <tr>
                <th>${users[key].firstName}</th>
                <th>${users[key].secondName}</th>
                <th>${users[key].phoneNumber}</th>
                <th>${users[key].email}</th>
                <th>${users[key].username}</th>
                <th>${users[key].password}</th>
                <th>${users[key].role}</th>
             </tr>
        `;
    }

}

getListOfUsers();

如果我使用邮递员将请求毒害到REST控制器地址，那么一切正常，但是如果您通过浏览器打开页面，那么js只会给出状态302并且不会加载

Answer 1

在安全过滤器bean中，尝试使用更新的方法禁用

csrf

，并在

formLogin()

方法之前设置

logout()

和

authorizeHttpRequests()

方法：

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
                .csrf(AbstractHttpConfigurer::disable)
                .formLogin((form) -> form
                        .loginPage("/login")
                        .permitAll()
                )
                .logout((logout) -> logout.permitAll())
                .authorizeHttpRequests((requests) -> requests
                        .requestMatchers("/", "/welcome", "/registration", "/admin", "/resources/**", "/add", "/listOfUsers" ).permitAll()
                        .anyRequest().authenticated()
                );

        return http.build();
    }

这应该可以解决您的问题。