HTTP request to an API has been blocked from an HTTPS website

Question

I am facing problem to call web service which is hosted over HTTP and I am calling web service from HTTPS domain.

web service's .htaccess

RewriteEngine On 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule ^(.*)$ %{ENV:BASE}index.php [QSA,L]

I got following error in console when I am trying to calling web.

angular.min.js:93 Mixed Content: The page at https://www.<my-domain.com>/#/ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint http://<api url goes here>. This request has been blocked; the content must be served over HTTPS.

Note

Web service is hosted in AWS server which is HTTP only and my website is hosted to other hosting provider.

Solution

As a work around, I am proxying the web service:

1. My SSL Hosting (Angular Project + Newly created proxy web service)

2. AWS (Old Web service + MySql Database)

From angularJS i call newly created proxy (that just uses cURL). This cURL code passes request to AWS server over HTTP.

Comments

[Admin]

Well, it's fairly simple. You aren't allowed to load http in an https website. If that hoster cant go implement SSL, go to another hoster :)

[Admin]

Because all internal and external resources such as JavaScripts, Images, CSS etc MUST to be loaded over HTTPS...

[Admin]

it is not possible using htaccess or from anything?

[Admin]

Absolutely not possible... your site is either SSL or its not... everything must be HTTPS in order for SSL to be secure.

[Stephen Ostermiller]

While this makes it work, it introduces a security hole. The API data can be modified in transit over HTTP. Your website will then display hacked data. This is known as a "mixed content vulnerability". Here is an article that explains why this type of vulnerability is serious: whitehatsec.com/blog/why-is-passive-mixed-content-so-serious