I need to use a http API

I deployed a website that uses an API that uses http not https and that is blocked by netlify, so is there a way to avoid this issue?

Hi @Moatasim, Thanks for the post.

If I may ask how are you calling your API that is not https with Netlify?
Also if possible kindly provide a code snippet of how you are calling the API for me to help with the debugging.

Thanks.

 var url = "http://colormind.io/api/";
        var data = {
          model : "default",
          input : [[this.r,this.g,this.b],"N","N","N","N"]
        }
        var http = new XMLHttpRequest();
        http.onreadystatechange = function() {
          if(http.readyState == 4 && http.status == 200) {
            var palette = JSON.parse(http.responseText).result;
            
          }
        }
        http.open("POST", url, true);
        http.send(JSON.stringify(data));```

Check out this post:

2 Likes

Hi, @Moatasim. The site colormind.io isn’t hosted at Netlify so Netlify could not be forcing SSL for that site.

Where are you running the code above? Is it in a serverless Function? If so, what is error message in the function logs?

The code run in three cases

  1. onMount() (I am using vue.js for this app)
  2. and 3. onclick event of two buttons

the error logged
“App.vue:114 Mixed Content: The page at ‘https://63fd97849119fb5165458075--color-matched.netlify.app/’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://colormind.io/api/’. This request has been blocked; the content must be served over HTTPS.”

Hi, @Moatasim. That error is coming from the web browser. There is a StackOverflow post about this here:

To summarize that post, if a site uses SSL, all content loaded by the site must also use SSL. This is just how web browsers are designed.

Netlify will enforce SSL for the site and enforcing SSL means other contented loaded by the site must also use SSL. We are not forcing the browser to refuse the non-SSL connection. That is all the browser’s doing. However, we do enforce SSL for all sites and that in turn results in the browser error message.

Do you control that API endpoint? If so, the “best” solution (depending on your definition of “best”) is to add SSL to the API endpoint. If that is done the connections are now more secure and the error will no longer occur.

The other option is to host the site somewhere other than Netlify that allows hosting the site itself without SSL (which Netlify does not allow at this time). If the site doesn’t use SSL then the API calls without SSL will be allowed by the browser.

Note, not using SSL in the year 2023 is strongly discouraged. Modifying non-SSL web responses is trivial to do. There is a website about doing so as a joke below.

https://www.ex-parrot.com/pete/upside-down-ternet.html

If this can be done by someone as a joke, imagine the trouble that can be caused by someone with malicious intent. This is why I say enabling SSL for the API is the “best” solution. Not using SSL is a bad idea and I would never recommend it. If you use SSL that sort of man-in-the-middle attack becomes almost impossible (impossible unless you can crack SSL encryption which isn’t impossible but it is out of the reach of most people on the planet).

To summarize, you have two options here.

Either:

  • Don’t use Netlify to host the site as we will always for SSL to be used.

or:

  • Add SSL to the API endpoint.

You can add SSL to the API endpoint (if you control it) using Let’s Encrypt and certbot for free. There is more documentation about that workflow here:

If there are other questions about this, please let us know.

2 Likes