https associated to an insecure XMLHttpRequest endpoint

0
votes

My website is hosted on a cloud run app : https://ap4-xxxxxxxx.a.run.app/. This website is calling an API which is hosted here https://ap4-xxxxxxxx.a.run.app/api/undefined. But this request is blocked in my browser .

Error message :

Mixed Content: The page at 'https://ap4-xxxxxxxx.a.run.app/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ap4-xxxxxxxx.a.run.app/api/undefined/'. This request has been blocked; the content must be served over HTTPS.

The API https://ap4-xxxxxxxx.a.run.app/api/undefined is working perfectly on my browser or with postman. And the code requesting it explicitly mentionned https :

const request = https://ap4-xxxxxxxx.a.run.app/api/${variable};
axios.get(request)
      .then(result => {
        const PlaceList = result.data.map(
          station => {
            const isFavorite = PlaceId.includes(Place.number);
            return { ...Place, isFavorite: isFavorite }
          }
        );
        this.setState({
          PlaceList: PlaceList,
          isLoading: false
        })
        updateFavPlaceList(PlaceList);
      })

I don't understand what's wrong here. Is my app making an http call instead of https ? I read here (Page loaded over HTTPS but requested an insecure XMLHttpRequest endpoint) that, some https are self signed. Is it the case of cloud run?

I've tried Cors, but it did not help.

Any observation or suggestion would be very much appreciated.

2
reactjswebaxiosgoogle-cloud-runmixed-content

2 Answers

1
votes

It seems you are indeed somewhere making an HTTP:// request in your frontend or make sure your app doesn't issue redirects to http://.

.app domains are in hardcoded HSTS list of your browser. If you type any .app domain, it will be requested as https:// .There's no way to access a .app domain over http:// in a modern browser, even with XHR.

0
votes

So here is a quick fix. I forced my backend (flask) to generate https url. Using the answer from here : Flask url_for generating http URL instead of https

class ReverseProxied(object):
    def __init__(self, app):
        self.app = app

    def __call__(self, environ, start_response):
        scheme = environ.get('HTTP_X_FORWARDED_PROTO')
        environ['wsgi.url_scheme'] = 'https'

app = Flask(__name__)
app.wsgi_app = ReverseProxied(app.wsgi_app)

There might be a better way (maybe forcing the frontend to request https), so feel free to comment on this.