如何在Angular中访问XSRF cookie值？

Question

在过去的7个小时里，我一直在研究这个问题，但似乎无法取得任何进展。 我试图让我的XSRF-TOKEN在前端（Angular 6）中可用。 然而，它似乎永远无法使用。 当我在网络选项卡中进行分析并在 "Cookie "下查看时，它似乎在那里闪闪发光。 然而，如果我使用Angular的CookieService并试图检索它，则没有任何结果。

需要注意的是。

1. 当在我的本地机器上运行时，我可以把XSRF -TOKEN取出来，并把它放在未来的头请求中。
2. 当前台和后台(Spring-boot)在两个不同的主机上托管，但在同一个域下时，问题就会发生。 例如：前台可以是frontend.home，后台可以是spring-boot。前台可以是frontend.home.com；后台可以是backend.home.com。
3. HttpOnly设置为False。
4. Angular的withCredentials属性也设置为true。

如果有任何关于如何处理这个看似微不足道却又令人沮丧的问题的建议，我将非常感激。

谢谢。

后台。

http.httpBasic()
    .authenticationEntryPoint(new AuthenticationFailureHandler())
    .and()
        .authorizeRequests()
        .antMatchers("List of URL").permitAll()
        .anyRequest().authenticated()
    .and()
        .csrf()
        .ignoringAntMatchers("List of API to ignore CSRF Token")
        .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
    .and()
        .addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class);
http.logout()
    .permitAll()
    .logoutSuccessHandler((new HttpStatusReturningLogoutSuccessHandler(HttpStatus.OK)));
}

@Autowired
private CsrfTokenRepository csrfTokenRepository() {
    HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
    repository.setHeaderName("X-XSRF-TOKEN");
    return repository;
}

前端：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let newHeaders: HttpHeaders = req.headers;

    let csrfToken = this.cookieService.get("XSRF-TOKEN");
    if (csrfToken === null || csrfToken === undefined) {
        newHeaders = newHeaders.append('X-XSRF-TOKEN', 'undefined');
    } else {
        newHeaders = newHeaders.append('X-XSRF-TOKEN', csrfToken);
    }

    const authReq = req.clone({headers: newHeaders, withCredentials: true});
    return next.handle(authReq);
}

另外，当我查看开发者工具时，我看到三个不同的域名：

1. home.com
2. backend.home.com (XSRF cookie只在这里出现，其他地方无法访问)
3. frontend.home.com

Answer 1

根据编辑和评论，你可能需要将CSRF cookie的Cookie Domain改为在 home.com 域，而不是在 backend.home.com 域。您可以通过更改 CookieCsrfTokenRepository:

CookieCsrfTokenRepository repository = CookieCsrfTokenRepository.withHttpOnlyFalse();
repository.setCookieDomain("home.com");

http.httpBasic()
    .authenticationEntryPoint(new AuthenticationFailureHandler())
    .and()
        .authorizeRequests()
        .antMatchers("List of URL").permitAll()
        .anyRequest().authenticated()
    .and()
        .csrf()
        .ignoringAntMatchers("List of API to ignore CSRF Token")
        .csrfTokenRepository(repository)
    .and()
        .addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class);
http.logout()
    .permitAll()
    .logoutSuccessHandler((new HttpStatusReturningLogoutSuccessHandler(HttpStatus.OK)));
}

请看前两行，仓库的设置就像我上面写的那样，然后作为token仓库。