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?

Possible duplicate of [Why am I suddenly getting a "Blocked loading mixed active content" issue in Firefox?](http://stackoverflow.com/questions/18251128/why-am-i-suddenly-getting-a-blocked-loading-mixed-active-content-issue-in-fire) — Liam, Aug 12 '16 at 15:20
[Because it's a security flaw to load content from an untrusted third party](https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)) — Liam, Aug 12 '16 at 15:20
I put the links here not in the question. My buggy example - https://codepen.io/pbweb/pen/GqGYag?editors=1010. And the working one- http://codepen.io/l-emi/pen/OXBwxL — kurumkan, Aug 12 '16 at 15:22
@Liam Thank you for the links and provided info but why the second example runs with no blocking issues - it also uses http to refer to api! — kurumkan, Aug 12 '16 at 15:33
Oh god! - I spotted that the issue appears only sometimes! It's totaly unreliable! — kurumkan, Aug 12 '16 at 15:36

Fthr · Accepted Answer · 2017-03-29T14:17:57.087

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"]);
  });
}

Why Blocked loading mixed active content?

1 Answers1