0

When I use Google Chrome to access my Angular application hosted by a Java Spring Boot application deployed as container in Google Cloud Run, the Angular application is not loading. With Firefox it works.

When I look at the network traffic, following files cannot be loaded and a 403 is returned for them:

  • runtime.07055e28c13b1a74.js

  • polyfills.4e6aad8d16c34bbd.js

  • main.6cd67be9c6d2749b.js

CSS and font files (woff2) are loaded successfully.

I use Okta as IAM (front page is accessible without login) but in my Spring security configuration I have configured to allow access to all JS files:

http.authorizeRequests()
    .antMatchers("/", "/index.html", "/**.js", "/**.css").permitAll()

The application in Google Cloud Run starts successfully. But in the logs of Google Cloud Run I see following warning (one for each of the 3 js files mentioned above):

{
httpRequest: {
latency: "0.011511853s"
protocol: "HTTP/1.1"
referer: "<my-address>"
remoteIp: "<remote-ip>"
requestMethod: "GET"
requestSize: "1178"
requestUrl: "<my-address>/main.6cd67be9c6d2749b.js"
responseSize: "716"
serverIp: "<server-ip>"
status: 403
userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36"
}
insertId: "639f77b8000c61e0d23eef65"
labels: {1}
logName: "projects/original-advice-xxx/logs/run.googleapis.com%2Frequests"
receiveTimestamp: "2022-12-18T20:27:37.049604375Z"
resource: {2}
severity: "WARNING"
spanId: "4738744206884247185"
timestamp: "2022-12-18T20:27:36.811488Z"
trace: "projects/original-advice-xxx/traces/257d4794b443727cf7d37d1a0863e682"
traceSampled: true
}

In console of Google Chrome, following errors are printed:

...-ew.a.run.app/:12          GET https://...-ew.a.run.app/polyfills.4e6aad8d16c34bbd.js net::ERR_ABORTED 403
...-ew.a.run.app/:12          GET https://...-ew.a.run.app/main.6cd67be9c6d2749b.js net::ERR_ABORTED 403
...-ew.a.run.app/:12          GET https://...-ew.a.run.app/runtime.07055e28c13b1a74.js net::ERR_ABORTED 403

When I run the application localy, these 3 files can be loaded successfully in Chrome.

My configuration in Google Cloud Run:

  • Ingress: Allow all traffic
  • Authentication: Allow not authenticated requests (for a public API or website)

I also tried:

gcloud run services add-iam-policy-binding <my-service> --member="allUsers" --role="roles/run.invoker"

Does anyone know why these 3 JS files cannot be loaded correctly by Google Chrome?

lukas99
  • 38
  • 5
  • Have you tried this this [documentation](https://cloud.google.com/run/docs/troubleshooting#unauthorized-client)? – Sarah Remo Dec 20 '22 at 01:02
  • Yes, this documentation led me to ensure the service is invocable by everyone. As mentioned, I already executed the command "gcloud run services add-iam-policy-binding --member="allUsers" --role="roles/run.invoker"". It seems to be a problem related to Java Script files, other files like CSS files are loaded without problems. – lukas99 Dec 21 '22 at 17:36
  • I found a similar question: https://stackoverflow.com/questions/71274768/failed-to-load-resource-the-server-responded-with-a-status-of-403-for-runtim. I found out that the page is loading in Firefox without problems, but Chrome is not working. Maybe it's related to Angular. I can try to update Angular to version 15 (I'm currently using Angular 14). – lukas99 Dec 22 '22 at 14:08

1 Answers1

0

Adding the application domain (where the application runs in Google Cloud Run) to the Spring Boot CORS allowed origins list solved the problem.

  @Bean
  public FilterRegistrationBean<CorsFilter> simpleCorsFilter() {
    var source = new UrlBasedCorsConfigurationSource();
    var config = new CorsConfiguration();
    config.setAllowCredentials(true);
    // also add origins to auth.interceptor.ts and to Okta trusted Origins (Security -> API)
    // also see: https://developer.okta.com/docs/guides/enable-cors/main/
    config.addAllowedOrigin("http://localhost:4200");
    config.addAllowedOrigin("https://xxx-ew.a.run.app");
    config.addAllowedMethod("*");
    config.addAllowedHeader("*");
    source.registerCorsConfiguration("/**", config);
    var bean = new FilterRegistrationBean<>(new CorsFilter(source));
    bean.setOrder(Ordered.HIGHEST_PRECEDENCE);
    return bean;
  }
lukas99
  • 38
  • 5