Why Blocked loading mixed active content?

Question

Today I spotted the error

Blocked loading mixed active content "http://ip-api.com/json/?callback=jQuery2240797948164524662_1471014635124&_=1471014635125"

in firefox.

Here is my code

function getCurrentWeather(){
  $.getJSON("http://ip-api.com/json/?callback=?", function(data) {
      var lat=data["lat"];
      var lon=data["lon"];
      updateWeatherDisplay(lat,lon);         
      updateAddress(data["city"],", "+data["region"]);
    });
}

But here is the other code, that makes equivalent query to the api - with no errors!:

function getLocation() {
    $.get('http://ip-api.com/json', function(loc) {
        $('#location').text(loc.city + ', ' + loc.region + ', ' + loc.country);
        getWeather(loc.lat, loc.lon, loc.countryCode);
    })
    .fail(function(err) {
        getWeather();
    });
}

Both examples runs on https://codepen io.

I already know that I should use https:// to call to api. But I am curious, why no errors in the second example?

Answer 1

Its because https://codepen/ is use secure (https protocol) and http://ip-api.com use Insecure (http protocol).

ip-api.com currently does not support https, if they support https you may use secure (https protocol) https://ip-api.com

function getCurrentWeather(){
  $.getJSON("https://ip-api.com/json/?callback=?", function(data) {
   var lat=data["lat"];
   var lon=data["lon"];
   updateWeatherDisplay(lat,lon);         
   updateAddress(data["city"],", "+data["region"]);
  });
}