带键斗篷的角形/Spring靴子403

Question

在本文档之后，我使用KeyCloak11.0.2和Spring Security来保护我的Spring Boot应用程序。

我在application.properties中使用了基本的Keycloak配置：

    keycloak.auth-server-url=http://localhost:8085/auth
    keycloak.realm=cirta
    keycloak.resource=cirta-api
    keycloak.public-client=false

我有一个单独的前端角应用程序，在Keylocak中配置为不同的客户端；但与Spring Boot应用程序的领域相同。从Angular应用程序中，我将在HTTP标头中发送KeyCloak提供的令牌：

'Authorization' : 'Bearer ' + this.securityService.kc.token

Access to XMLHttpRequest at 'http://localhost:8080/api/modePaiements' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

@Override
protected void configure(HttpSecurity http) throws Exception {
    super.configure(http);
    http.authorizeRequests().antMatchers("/api/*").hasRole("app-manager").anyRequest().permitAll();
}

Angular示例应用程序：https://github.com/bilaldekar/kc-ang

请求标题：

Answer 1

在我看来是csrf问题。

将以下内容添加到安全配置中

http.authorizeRequests().antMatchers("/api/*").hasRole("app-manager").anyRequest().permitAll()
                .and().csrf()
                .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());

上面的代码将在名为xsrf-token的cookie中设置CSRF令牌。Angular在默认情况下为CSRF令牌读取此cookie，并在后续请求中添加此cookie。为了确保Angular可以读取它，我们将HTTP only设置为false。这有其自身的安全含义，因为现在可以通过脚本访问CSRF令牌。如果您不喜欢这样做，另一种方法是从响应头中读取x-xsrf-token标记，并使用Angular Interceptor将其发送到后续的请求头中。

apiUrl: '', //Spring Boot API

然后在src文件夹下添加一个proxy.conf.json，内容如下

{
    "/api": {
        "target": "http://localhost:8080",
        "secure": false
    },
    "logLevel": "debug"
}

在Angular.jsonserve命令中添加代理配置

"options": {
    "browserTarget": "kc-ang:build",
    "proxyConfig": "src/proxy.conf.json"
}

现在您会注意到api请求将转到localhost:4200/api/*，并通过上面的配置路由到spring boot应用程序。

如果您的前端和后端在不同的域上，如果您必须支持CORS，那么这就是需要做的

Spring上的安全配置应该允许前端源使用CORS（在本例中是http://localhost:4200):

protected void configure(HttpSecurity http) throws Exception {
    super.configure(http);
    http.authorizeRequests().antMatchers("/api/*").hasRole("app-manager").anyRequest()
            .permitAll()
    .and().csrf()
            .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
    .and().cors();
}

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("http://localhost:4200"));
    configuration.setAllowedMethods(Arrays.asList("GET","POST"));
    configuration.setAllowCredentials(Boolean.TRUE);
    configuration.addAllowedHeader("*");

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/api/*", configuration);
    return source;
}

在Angular上，将environment.ts文件中的apiUrl更新为

apiUrl: '//localhost:8085'

addFournisseur(fournisseur: Fournisseur): Observable<Fournisseur> {
    return this.httpClient.post<Fournisseur>(this.envUrl + '/api/fournisseurs', fournisseur, {withCredentials: true});
  }