Resolving Mixed Content Issue in AWS Elastic Beanstalk with Angular App

Question

I am facing a mixed content issue with my Angular app, which is hosted on Namecheap with SSL enabled, and my API, which is hosted on AWS Elastic Beanstalk with a MongoDB database. The Angular app is served over HTTPS, and I have recently renewed the SSL certificate. However, some resources on the website, including images and API calls, are still being loaded over HTTP, leading to a mixed content warning in the browser console.

Here is the error message:
"polyfills.2b570766fece3f272584.js:1 Mixed Content: The page at 'https://vincentgaleano.com/#/media/web-development' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://galeanoapi-env-1.apjrsd3pue.us-east-1.elasticbeanstalk.com/api/web-dev'. This request has been blocked; the content must be served over HTTPS."

I have already updated my Angular app to use HTTPS links for all resources and have redeployed it, but the issue persists.

Could you please guide me on how to resolve this mixed content issue and ensure that all resources on my Angular app are loaded securely over HTTPS? Are there any specific configurations or settings I need to update on AWS Elastic Beanstalk or Namecheap to address this issue?

Answer

Hello.

You are facing a mixed content issue with your Angular application, which is hosted on your own domain even though you enabled SSL encryption for your application.

As you know, the cause of the mixed content error is because your application loaded over HTTPS requested contents from HTTP endpoint 'http://*.us-east-1.elasticbeanstalk.com/api/web-dev'.

Since accessing HTTP contents from HTTPS-loaded workloads isn't considered as secure, the request had been blocked.

You shared that you have already updated your Angular app to use HTTPS links for all resources and have redeployed it, but the issue persists as you said.

I would like to recommend you to refer documents from AWS Elastic Beanstalk and see If you can get some help first:

'Configuring HTTPS for your Elastic Beanstalk environment [1]'

'Configuring your Elastic Beanstalk environment's load balancer to terminate HTTPS [2]'

Documents above I shared provide ways to configure HTTPS for EB environments, Load Balancers for EB environments' EC2 instances.

If you want to have professional assistance from AWS, I would like to recommend you to open a support case via AWS Premium Support [3].

Regards, 
Myungsup Kwak

References: 
[1] Configuring HTTPS for your Elastic Beanstalk environment 
https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https.html 
[2] Configuring your Elastic Beanstalk environment's load balancer to terminate HTTPS 
https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/configuring-https-elb.html 
[3] AWS Premium Support 
https://support.aws.amazon.com/#/contacts/aws-account-support

Resolving Mixed Content Issue in AWS Elastic Beanstalk with Angular App

Relevant content