Not sure if this is the best forum to ask these types of questions. I apologize if not.
While attempting to retrieve a token from Cloud Run metadata server, Firefox is blocking me with the error, “Blocked loading mixed active content”
the endpoint I’m hitting is http://metadata.google.internal/computeMetadata/v1/instance/service-accounts/default/identity?audience=xxx.a.run.app
where xxx.a.run.app is my active backend app in Cloud Run.
I am able to do the same call in the Cloud Shell successfully. Have successfully tested this configuration locally using Mockoon to imitate the response from the metadata server. So the issue only occurs once I’ve pushed the source out to Cloud Run.
From what I’ve researched, this issue is apparently due to sending an HTTP request from an HTTPS site. So I tried changing the metadata server endpoint to HTTPS but the request is rejected indicating that HTTPS is not available. It’s super difficult for me to believe Google didn’t consider this caveat for the frontend to backend authentication.
I wouldn’t mind using the libraries instead but the only existing frontend example I see in the Cloud Run documentation is for node.js. Nothing specifically for Angular. Hoping someone has an easy workaround.
front-end: Angular (no auth)
back-end: Spring (no auth)
Want to experiment with Google Cloud auth which is actually the whole purpose of both apps (Google Auth POC). I love the idea of just letting Google handle most of the auth. But proving it out doesn’t seem to be as easy as it should be 
Hi @jayflesher85 ,
Welcome to Google Cloud Community!
It sounds like you are trying to make an HTTP request from an HTTPS site, and this is causing a mixed content error in your browser. This is a security feature designed to prevent an attacker from being able to read or modify the communication between your browser and the server.
One potential solution to this problem is to use a secure connection (HTTPS) for both your frontend and backend. If you are using Cloud Run, you can enable HTTPS by enabling the “Require TLS” option in the Cloud Run console. This will ensure that all traffic to your Cloud Run service is encrypted.
Alternatively, you can use the Cloud Run client libraries to make secure requests to your Cloud Run service. These libraries handle the details of authenticating and making HTTPS requests to your Cloud Run service, so you don’t have to worry about it. The libraries are available for a variety of languages, including Angular.
For example, in Angular, you can use the @google-cloud/functions-framework package to make HTTPS requests to your Cloud Run service. Here’s an example of how you might use it:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { CloudFunction, EventContext } from '@google-cloud/functions-framework';
@Injectable({
providedIn: 'root'
})
export class MyService {
@CloudFunction()
public async getData(data: any, context: EventContext) {
// Use the HttpClient to make an HTTPS request to your Cloud Run service
const response = await this.http.get('https://your-service-name.a.run.app').toPromise();
return response;
}
constructor(private http: HttpClient) {}
}
Thanks
1 Like
CloudFunction and EventContext do not resolve as exported members from functions-framework (3.1.3). 
I found a better way to protect my backend service using Google Recaptcha. This allows me to keep it open to public since the backend will require a valid recaptcha token before processing the request. Thanks for the feedback and help!
