In an effort to move a web platform to HTTPS, I ran into a problem. Here is the setup that I am using:
Python Flask-based http server is served by gunicorn
Nginx directs SSL-encrypted HTTPS traffic to the http server
The http server serves a ReactJS page
Independent Python Flask-based API server is served by gunicorn
Now I am making PUT and GET requests from the ReactJS page into the API server. Because the ReactJS page is proxied via HTTPS, of course any request is fully encrypted. Thus, the API server receives encrypted requests.
My question is, how can I query an API server from within an HTTPS ReactJS page?
If I got it right question is "how to override browser security that blocks me from sending requests by http:// from within page hosted at https://".
The answer is: no way to do that.
If it is not possible to enable SSL for API server you may use your own server act as secure proxy. So finally it'd look like ReactJS -> HTTPS -> your server -> HTTP -> API server
UPD similar case sending request from https to http from chrome extension (spoiler: no workarounds available)
Related
I have a https frontend which is making requests to the backend. After adding ssl certificate my requests are getting blocked. I cannot make my backend api https. What should i do?
FYI:
The frontend server is react, the backend is express and i am running nginx.
In order to make https requests to the backend server, i just set it as a subdomain and it all worked.
So basically I have an http Api and I can't change it to https for business reasons
and an https client that needs to stay https for the payment gateway integration and authentication
the api calls fall down due to CORS and mixed origin, I thought of two solutions
one: proxy the api calls from the client so the client will be https but the api would read its coming from http, not sure if its doable or how can I do it and need help with it
two: wrap the backend with an https api but I think that might slow the web app
which would be better ? if one, how to implement it
I am facing problem when I call an api end point url from a https page. I have hosted my front-end code in aws s3 bucket and a third party ssl certificate is deployed .so my react code is served over https. And my back-end is deployed inside a single instance application of elastic bean stalk. while I am trying to call my back-end url from my front-end application, it is throwing the below error.
Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ''. This request has been blocked; the content must be served over HTTPS.
Can anyone help me to resolve this issue.
Thanks.
You need to setup your ELB (AWS Elastic Beanstalk) application to use SSL/HTTPS
https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https.html
You can set this up with Route53 and AWS Certificate Manager (ACM).
I have my java spring project running successfully on AWS EC2 instance uploaded via elastic bean stalk but its endpoint is of the form http://...........
Now i have uploaded my angular project on firebase.
I could have uploaded it on AWS itself but it requires geolocation() which requires HTTPS connection. when i connect my angular app to aws instance via endpoint it shows
Mixed Content: The page at 'https://aspertime-a3b60.firebaseapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://aspertime-env.x2enfd8jmj.ap-south1.elasticbeanstalk.com/employee/login?username=123&password=123'. This request has been blocked; the content must be served over HTTPS.
i have tried many times to solve this problem.
-
So as we discussed in the comment, follow these steps
Create a Certificate from AWS ACM
Verify the certificate by adding an entry to your DNS provider
Create Load balancer with https listener
Place Load balancer on the top of Elastic beanstalk
Update web-app to point New TLS endpoint
My current stack is pretty simple:
Backend: Django 2.1.1, python 3.6 I am running it on elastic beanstalk with an application load balancer. I have port 80 listening for HTTP and port 443 listenin for HTTPS with my ssl certificate selected. I did not select an SSL policy as I have no idea what these do.
Frontend: React, mainly using axios to do requests (axios.get, axios.put, etc). I have this hosted on two s3 buckets, mainsite.com, where all my static files are, and www.mainsite.com, which redirects HTTP to that site. I also have 2 cloudfront distributions which redirect HTTP to HTTPs, using the same certificate as the one I used for my load balancer. I then created 2 record sets and set the alias to the cloud distribution. When I try to do any request, I see in the console:
xhr.js:173 Mixed Content:
The page at 'https://fakesite.net/login'
was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
'http://myenv-env.randomletters.us-east-1.elasticbeanstalk.com/rest-auth/login/'.
This request has been blocked; the content must be served over HTTPS.
What else do I need to configure? Do I need to change code, or is it all aws related.