The page was loaded through the HTTPS, but requested an unsafe Xmlhttprequest endpoint

Asked

Viewed 130 times

1

I’m calling a home API from the implemented Https application for Http Rest API. I wrote the logic in Vuejs. Web service call failed with the message below.

Vue-Resource.js:1091 Mixed Content: The page at 'https://nomedapagina.herokuapp.com/' was Loaded over HTTPS, but requested an insecure Xmlhttprequest endpoint 'http://api.promasters.net.br/cotacao/v1/valores'. This request has been blocked; the content must be served over HTTPS. (Anonymous) @ Vue-Resource.js:1091

through HTTPS requests from my HTTPS application - there is no alternative solution to this and the mixing protocols can also put the security of the application at risk, but even so would like to be able to run my application on the web server, all because of this line of code below

 created: function() {
    var self = this;
    self.$http.get('http://api.promasters.net.br/cotacao/v1/valores').then(function(response) {
      self.bancodedados = response.body;
    });
  },

How could I fix this?

I am loading a dollar quotation table getting the information from a URL HTTP in the form of json

html5

  • Do you have any back-end part in this application? I believe this could be solved if you first accessed your back-end and in turn, your back-end would access the desired url, and then returned to your front-end.

  • It has no back-end, it’s just an embedding html file of Javascript receiving an http URL of a json return as shown in this post. Since you said the back-end is the solution what kind of implementation the back-end needs to solve this kind of problem?

1 answer

2


This happens because you are making your page available via HTTPS, on a secure connection, but in your javascript you are making requests to an address without this protection, which in case is the request to http://api.promasters.net.br. As a result you have the Warning or error message (if the browser blocks the request).

In the case of blocking you will lose functionality by failing to bring the desired content to the user. If the browser displays only a Warning, the lock symbol will be displayed differently to indicate to the user that although he has requested a secure connection to his website through the https there are requests being made without this level of protection, so your site is not as secure and may be exposing you to some vulnerability.

Mixed type responses do not only occur because of javascript accessing unprotected resources, they will also occur if you try to upload even static content like fonts, images, css sheets and other javascript files.

To avoid weakening of https, you should always use urls https:// by indicating external references or simply '//' that will keep the initial request protocol.

More information:

What is mixed content?

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.