Angular 2/Spring Security CSRF 实现问题答案

【问题标题】：Angular 2/Spring Security CSRF implementation problemsAngular 2/Spring Security CSRF 实现问题
【发布时间】：2016-12-20 02:55:37
【问题描述】：

我正在尝试在 Spring Boot API 之上构建一个 Angular 2 页面。我已经配置了 CORS（我相信是正确的），但是我被 Spring Security 的 CSRF 保护阻止了。

据我了解，Angular 2 handles CSRF automatically 从 RC2 开始，我在 RC4 上。服务器正在发送 XSRF 令牌以响应来自客户端的 POST，如下所示：

我假设 Angular 2 没有接受它？我知道 CORS 正在工作，因为当我将 .ignoringAntMatchers("/urlhere/") 放在 .csrf() 的末尾进行测试时，请求通过了，所以CORS 没有阻止它。这是我的 HttpSecurity 配置方法：

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

    http
        .authorizeRequests()
            .antMatchers("/auth/**", "/signup/**").permitAll()
            .and()
        .headers() 
            .and()
        .exceptionHandling()
            .and()
        .cors()
            .and()
        .csrf()
            .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());

}

我在客户端的登录过程包含一个方法，该方法首先发送凭据，然后使用 JWT 令牌检索凭据。两种方法如下：

sendCredentials(model) {
   let tokenUrl = 'http://localhost:8080/user/login';
   let headers1 = new Headers({'Content-Type': 'application/json'});

   return this.http.post(tokenUrl, JSON.stringify(model), {headers: headers1});
}

sendToken(token){
   let userUrl = 'http://localhost:8080/rest/user/users';
   let headers2 = new Headers({'Authorization': 'Bearer '+token});

   return this.http.get(userUrl, {headers:headers2});
}

为了满足 CSRF 保护的要求，我缺少什么？是客户端吗？还是我需要将 /login/ 添加到我的 antMatchers 列表中？

【问题讨论】：

标签： java angular spring-boot spring-security

【解决方案1】：

我知道已经晚了，但是我遇到了同样的问题并设法解决了它。角度 http 请求中的问题：

return this.http.post(tokenUrl, JSON.stringify(model), {headers: headers1});

你需要调整它来发送这样的：

return this.http.post(tokenUrl, JSON.stringify(model), {headers: headers1, withCredentials: true});

您必须将withCredentials: true 添加到您的所有http 请求中。为什么你需要它？每次您向 Spring（服务器）发送 http 请求（OPTIONS、POST 等）时，它都会生成新的 XSRF-TOKEN 并将其发送给客户端，withCredentials: true 将在浏览器中保存这个新的 XSRF-TOKEN，稍后用于新的 http 请求，因此，如果您的某个 http 请求没有 withCredentials: true，它将简单地忽略新的 XSRF-TOKEN 并使用旧的（过期的）XSRF-TOKEN 进行 http 请求。

【讨论】：

感谢您的回答！它添加到知识库中，因此我将其标记为已回答。