HTTPS communication with EC2 Instance - angularjs

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

Related

Setup TLS authentication with GCP app engine using X.509 certificate

I have a client that uses TLS authentication using X.509 certificates. The Client makes API calls to my GCP app engine, which acts as a REST server.
The app engine has Identity Aware Proxy enabled, but the client is unable to use that to authenticate via that. Therefore, I made a API gateway for the client to make HTTPS requests. But it is unable to make HTTPS requests without authenticating with X.509 certificates.
I am able to upload a cert.pem to the client. I generated the certificate in Google cloud shell using openssl. But I do not know where do I put this certificate in the GCP. Is it in App Engine->Settings->SSL certificates OR in the .yaml config file for the API gateway OR do I have to set up a load balancer?
API Gateway, App Engine, and HTTP load balancers do not support client authorization with X.509 certificates.
You must implement client X.509 authentication in your application or web server on a service you manage and deploy such as Compute Engine.

how to serve a content over https

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).

What further steps do I need to allow my static site hosted on s3 to make https requests to my server on elastic beanstalk?

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.

How to query API from within HTTPS encrypted ReactJS page?

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)

Reactjs app deployment on AWS E2 with wildcard SSL certificate

I have developed a reactjs app with .net core web API as backend. I have hosted the app on windows server on IIS with http which was working perfectly without any issue but when I tried to host the same using a wild card SSL certificate it gives this error in console of the chrome :
"Failed to load resource: net::ERR_SPDY_PROTOCOL_ERROR".
error
I have also done some configuration regarding nginx on server as well which was described in some URL.
You can deploy your reactJS application in using AWS CloudFront, and can use route 53 to redirect AWS Cloudfront url to your domain. SSL can also be easily configured once this is done

Resources