Using Open Weather Map which is HTTP only through an HTTPS website and NOT get mixed content warning

Question

I checked out this link here on SO: Dealing with HTTP content in HTTPS pages

I tried this regarding open protocols from here: http://benpowell.org/https-and-http-the-protocol-less-or-protocol-relative-urls/

But I have only one call to an HTTP url for openweathermap which does not serve up it's content via HTTPS, unless you pay them 500/mo. Can't do it.

So, I need to find a way to bring in the HTTP content for OpenWeatherMap and not generate the "mixed content" error message on "any" browser.

Here's the API call for OWM: http://api.openweathermap.org/data/2.5/weather?lat=32.22&lon=-100.50&APPID=c6fdcf2d49a0bba3e14f310bd3d5cdc2

Any thoughts, anyone?

Thanks, in advance.

score 1 · Answer 1 · answered Jul 30 '17 at 05:13

Stumbled upon this thread while trying to get my application hosted on heroku while using the Open Weather Map API.

Put this in front of the url:

https://cors-anywhere.herokuapp.com/

so that the url becomes

https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/forecast? appid=${API_KEY}

Check your application again and note that the openweather url is http again (the way it was originally)! This solution worked for me, although the CORS solution may not last forever.

score 1 · Accepted Answer · answered Jul 31 '23 at 09:44

Okay, so to fix that error, just make sure all your external resources are using HTTPS. For example, if you have something like openweathermap.com as a resource, change the URL to load with https instead of http. If it stays as http, it won't load properly, and you'll see a bunch of JavaScript errors.

By the way, I have a website that's all on HTTPS, but sometimes, it shows external content like images from RSS feeds, and those are using HTTP. Here's what I'd like to do: first, I want to get rid of that annoying warning message about insecure content. Instead, I'd like to show a less intrusive warning, maybe replacing the images with a default icon. Second, for the images that can't load, I want to offer something useful to users in their place. It'd be awesome if there's some JS code that can figure out which images didn't load and replace them with our own images.

I'm not sure if we can completely avoid the warning, but let's focus on achieving the second aim, and that might do the trick.

score 0 · Answer 3 · answered May 30 '16 at 07:05

I was able to get the api to load on my site that enforces https with a little bit of php.

Basically, I curl the http site and store the results on a page on my domain which is https so it works perfect for me.

I wrote a little function to do the work for me

 <?php
#Defining the basic cURL function
    function curl($url) {
    $ch = curl_init();  // Initialising cURL
#Setting cURL's URL option with the $url variable passed into the function
    curl_setopt($ch, CURLOPT_URL, $url);
#Setting cURL's option to return the webpage data   
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); 
#Executing the cURL request and assigning the returned data to the $data variable
    $data = curl_exec($ch); 
#Closing cURL 
    curl_close($ch); 
#Returning the data from the function  
    return $data;  
 }
     echo $scraped_website = curl("http://www.example.com");

#I use http://api.openweathermap.org/data//2.5/weather?q=Saint+Louis%2C+MO&units=imperial&lang=nl&APPID=b923732c614593659457d8f33fb0d6fd&cnt=6 instead of "http://www.example.com"

?>

#Full snippet

     <?php
     // Defining the basic cURL function
    function curl($url) {
    $ch = curl_init();  // Initialising cURL
    curl_setopt($ch, CURLOPT_URL, $url);    // Setting cURL's URL option with the $url variable passed into the function
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); // Setting cURL's option to return the webpage data
    $data = curl_exec($ch); // Executing the cURL request and assigning the returned data to the $data variable
    curl_close($ch);    // Closing cURL
    return $data;   // Returning the data from the function
      }
     echo $scraped_website = curl("http://www.example.com");
     ?>



enter code here

score 0 · Answer 4 · answered May 30 '17 at 14:34

Since forecast.io changed into Dark Sky and they don't allow CORS, thus forcing you to implement a server-side application, I looked for a different solution suitable for a small front-end project.

I found apixu.com, which seems to be much better suited for a simple purpose like mine: FreeCodeCamp project.

They provide both, http and https calls. You get 5000 calls per month for free.

Using Open Weather Map which is HTTP only through an HTTPS website and NOT get mixed content warning

4 Answers4

Linked