Hiding my API-KEY:

In order to hide my API-Key, I used a server-side proxy file called weather-proxy.php and hosted it under the root folder directory /dwt/. Then I used its URL in my JQuery’s $.get() method as below…

Code:

jQuery(document).ready(function () {
    jqxhr = $.get("https://appsology.co.uk/dwt/weather-proxy.php");
    jqxhr.complete(function () {
        $("#location_country").append($(jqxhr.responseXML).find("location name").text());
        $("#location_country").append(", " + $(jqxhr.responseXML).find("location country").text());
        $(jqxhr.responseXML).find("forecast time").each(function (index) {
            // console.log(index, "\n", this);
            if (index >= 8) return false;
            from = $(this).attr("from");
            from = from.replace("T", "<br>");
            // console.log($(this).attr("from"));
            $("#slot" + index + " .time").append(from);
            symbol_url = "https://openweathermap.org/img/w/" + $(this).find("symbol").attr("var") + ".png";
            conditions = $(this).find("symbol").attr("name");
            temperature = $(this).find("temperature").attr("value");
            temperature = Math.round(temperature, 0);
            // console.log(symbol_url, " ", conditions, " " , temperature);
            var img = $('<img>');
            img.attr('src', symbol_url);
            img.attr('alt', conditions);
            img.attr('title', conditions);
            $("#slot" + index + " .symbol").append(img);
            $("#slot" + index + " .temp").append(temperature);

            if ($(this).find("temperature").attr("unit") == "celsius") {
                // console.log($(this).find("temperature").attr("unit"));
                $("#slot" + index + " .temp").append("&deg;C");
            } else {
                $("#slot" + index + " .temp").append("&deg;F");
            }
        });
    });
});

weather-proxy.php Code:

<?php
$context = array(); 

$context = stream_context_create($context);
$url = 'https://api.openweathermap.org/data/2.5/forecast?q=Aleppo,sy&APPID={{MY_API_KEY_HERE}}&mode=xml&units=metric';
$body = file_get_contents($url, False, $context);

foreach ($http_response_header as $v) { 
  if ( strripos($v, "content-type:")==0 ) {
    echo header( $v );
  }
}
echo $body;		
?>

We can develop that extract furthermore by adding it into a custom widget to use it in different pages as required across the website.

Problems/Mistakes/Bugs:

A bunch of problems and mistakes occurred in this exercise.

  • It turned out that the new jquery library doesn’t allow .success() method, so when I loaded JQuery Ver: 1.12.4 the problem solved.
  • The response was return in JSON until I added the followings to the end of my .GET string: “&mode=xml”.
  • The cross-origin restriction also prevented the page from rendering the data, until I solved it by adding the (s) to the protocol HTTPS, since my domain is SSL certified.
  • The other issues were to solve the syntax errors in the initial code to render like the example given (the obfuscated file).

Lessons Learnt:

  • Check version against compatibility issues.
  • Always read the API documentation before using it.

Conclusions/Recommendations:

  • Clear the browser cash regularly.
  • Never expose any API keys into JavaScript files online because they could be revealed easily. Instead, use an API proxy on your server.

Implementation/Result: