2

Делаю приложение. Сервер Java и UI React. Уже подключил CORS, но теперь не могу настроить CSRF защиту.

Конфигурация Spring Security:

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .sessionManagement()
        .sessionCreationPolicy(SessionCreationPolicy.IF_REQUIRED);

    http
        .cors().and()
        .csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());

    http
        .rememberMe()
        .key("remember-secret-key")
        .rememberMeParameter("remember")
        .rememberMeCookieName("REMEMBER")
        .tokenValiditySeconds(REMEMBERED_SESSION_TIMEOUT)
        .tokenRepository(persistentTokenRepository());

    http
        .formLogin()
        .usernameParameter("email")
        .passwordParameter("password")
        .successHandler((httpServletRequest, httpServletResponse, authentication) -> {
            log.info("Principal {} logged on successfully", authentication.getName());
            httpServletResponse.setStatus(HttpStatus.OK.value());
        })
        .failureHandler((httpServletRequest, httpServletResponse, e) -> {
            log.info("Login was failed");
            httpServletResponse.setStatus(HttpStatus.UNAUTHORIZED.value());
        });

    http
        .exceptionHandling()
        .authenticationEntryPoint(new LoginUrlAuthenticationEntryPoint("/login") {
            @Override
            public void commence(HttpServletRequest request, HttpServletResponse response, AuthenticationException authException) throws IOException {
                if (authException != null) {
                    response.sendError(HttpStatus.FORBIDDEN.value());
                }
            }
        });

    http
        .logout()
        .invalidateHttpSession(true)
        .logoutSuccessHandler(new HttpStatusReturningLogoutSuccessHandler(HttpStatus.OK));

    http
        .authorizeRequests()
        .anyRequest().authenticated();
}

Для аутентификации в React я разместил такой код:

const authRequester = axios.create({
    baseURL: 'http://localhost:8080/',
    withCredentials: true
});

export const profileAPI = {
    login(email, password, remember = false) {
        let bodyFormData = new FormData();
        bodyFormData.append('email', email);
        bodyFormData.append('password', password);
        bodyFormData.append('remember', String(remember));
        return authRequester.post('login', bodyFormData, {
            headers: {
                'Content-Type': 'multipart/form-data',
                'X-XSRF-TOKEN': getXSRFToken()
            }
        });
    }
}

const getXSRFToken = () => {
    return Cookies.get('XSRF-TOKEN');
}

Возникает любопытный эффект. Вообще, при одном нажатии на кнопку "Вход" делается два запроса, один OPTIONS, второй POST. Так вот именно POST возвращает 403 ошибку:

Request URL: http://localhost:8080/login | Request Method: OPTIONS | Status Code: 200
Request URL: http://localhost:8080/login | Request Method: POST    | Status Code: 403

После первой попытки я нажимаю "Вход" ещё раз, и картина меняется. Мало того, что запросы OPTIONS и POST начинают идти в другом порядке, так ещё и аутентификация проходит успешно. После первого запроса все остальные запросы выглядят вот так:

Request URL: http://localhost:8080/login | Request Method: POST    | Status Code: 200
Request URL: http://localhost:8080/login | Request Method: OPTIONS | Status Code: 200

Во-первых я не понимаю, а почему порядок запросов меняется? Разве смысл OPTIONS не в том, чтобы идти первым и "разведывать обстановку"? Во-вторых, что мне сделать, чтобы первый запрос проходил успешно?

UPD

Запрос Options (при первой аутентификации):

**General**
Request URL: http://localhost:8080/login
Request Method: OPTIONS
Status Code: 200
Remote Address: [::1]:8080
Referrer Policy: strict-origin-when-cross-origin

**Response header**
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: x-xsrf-token
Access-Control-Allow-Methods: POST
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Max-Age: 1800
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Length: 0
Date: Fri, 02 Apr 2021 14:36:29 GMT
Expires: 0
Keep-Alive: timeout=60
Pragma: no-cache
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

**Request headers**
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7
Access-Control-Request-Headers: x-xsrf-token
Access-Control-Request-Method: POST
Cache-Control: no-cache
Connection: keep-alive
Host: localhost:8080
Origin: http://localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

Запрос POST (при первой аутентификации):

**General**
Request URL: http://localhost:8080/login
Request Method: POST Status
Code: 403  Remote Address: [::1]:8080
Referrer Policy: strict-origin-when-cross-origin

**Response headers**
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3000
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Length: 0 Date: Fri, 02 Apr 2021 14:36:29 GMT Expires: 0
Keep-Alive: timeout=60
Pragma: no-cache
Set-Cookie: XSRF-TOKEN=b09ad580-f93a-4a6e-9898-6b46099fef5b; Path=/
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block

**Request headers**
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 353
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryGaSAy1p6Mp8ixURe
Host: localhost:8080
Origin: http://localhost:3000
Pragma: no-cache
Referer: http://localhost:3000/
sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36
X-XSRF-TOKEN: undefined
8
  • А после первой авторизации есть сделать запрос на ресурс с авторизацией, то не дает или дает?
    – lampa
    2 апр 2021 в 13:37
  • @lampa ну вот я первый раз нажимаю "Вход", вылезает 403. Потом ещё раз нажимаю, всё проходит успешно. Тут момент такой, что после самого первого запроса мне не только 403 ошибка возвращается, но и кука XSRF-TOKEN. Поэтому, я так полагаю, следующие запросы и проходят.
    – Zhenyria
    2 апр 2021 в 13:45
  • Т.е. OPTIONS возвращает куку, а потом далее с ней выполняется POST?
    – lampa
    2 апр 2021 в 13:49
  • @lampa нет, в том то и прикол, что OPTIONS сначала проходит и возвращает 200 код (но никаких кук). А потом пытается пройти POST, возвращает 403 и куку. Очень странное поведение.
    – Zhenyria
    2 апр 2021 в 13:51
  • Ну тогда логично, что первый OPTIONS не содержит в себе куки токена и POST запрос идет без токена и сервер возвращает 403, но видимо уже с токеном. И далее POST запрос уже идет с токеном. верно я понимаю?
    – lampa
    2 апр 2021 в 15:26

1 ответ 1

1

Решил проблему, отключив CSRF защиту для эндпоинта /login:

http
        .cors().and()
        .csrf()
        .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
        .ignoringAntMatchers("/login");

Вообще, это мне кажется странным, так как я совершенно случайно наткнулся в интернете на подобный приём, он не является общепринятым и широко известным. Возможно, в моём случае помогло только это, потому что я использовал одновременно CORS и CSRF. Не знаю. Если у кого-то будут более хорошие варианты, прошу высказаться. Но мою задачу этот приём пока что решает.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.