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:
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
- onMount() (I am using vue.js for this app)
- 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.