Json script with problem, Google Chrome locks and does not work in another browser

Question

I am trying to auto-fill data from the ZIP code, with the following code.

$("#cep").blur(function() {
  var cep = this.value.replace(/[^0-9]/, "");
  if (cep.length != 8) {
    return false;
  }

  var url = "http://viacep.com.br/ws/" + cep + "/json/";

  $.getJSON(url, function(dadosRetorno) {
    try {
      $("#endereco").val(dadosRetorno.logradouro);
      $("#bairro").val(dadosRetorno.bairro);
      $("#cidade").val(dadosRetorno.localidade);
      $("#uf").val(dadosRetorno.uf);
    } catch (ex) {}
  });
});

<div class="form-group col-md-3 col-sm-12">
  <label id="nome">CEP</label>
  <input type="text" name="cep" id="cep" class="form-control" required>
</div>
<div class="form-group col-md-3 col-sm-12">
  <label id="nome">Endereço</label>
  <input type="text" name="endereco" id="endereco" class="form-control" readonly>
</div>
<div class="form-group col-md-3 col-sm-12">
  <label id="nome">Número</label>
  <input type="number" name="numero" id="numero" class="form-control" required>
</div>
<div class="form-group col-md-3 col-sm-12">
  <label id="nome">Bairro</label>
  <input type="text" name="bairro" id="bairro" class="form-control" readonly>
</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

But it does not work in Firefox and Chrome it from the error that the unsafe script has been blocked, but if I choose the option "Load Insecure Script" the script works normally, tried on multiple computers and on 2 phones, and the same problem.

Has anyone ever had this problem or anything like that, and can shed some light on that doubt???

Answer 1

Starting with version 56, Chrome went on to warn about scripts loaded from insecure sources, ie via HTTP.

To solve your problem, the query should be done using a secure resource (HTTPS). In your code, Voce should change this line:

var url = "http://viacep.com.br/ws/" + cep + "/json/";

for

var url = "https://viacep.com.br/ws/" + cep + "/json/";

The site you are consuming the API seems to provide this option. See this example using fetch.

EDIT

As a general rule, the jQuery script you are loading should also make explicit the HTTPS protocol:

Change

//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

for

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js