How to develop an Insecure API ?

Disclaimer :- Use this article content only for testing purposes . Do not use for real-time applications . Because there will be vulnerable incident can be occur via sites that not using the SSL Certificate.

In this post I’m going to show you how to develop an API . Actually this is an Insecure API because the two hosting providers I’m using doesn’t have the SSL certificate.

In the following table shows the things needed to be implemented ,

No	The components need to be implemented
1	Write a custom API using PHP and MySQL and host it in one subdomain
2	Call that custom API using JavaScript and show the values in custom developed dashboard in another sub domain

So my plan as in following diagram

So as the first task lets develop the code .

Here it is a PHP script acts as an API . The final output is valid JSON string

<?php

    header("Access-Control-Allow-Origin: *");
    header("Content-Type: application/json; charset=UTF-8");
    header("Access-Control-Allow-Methods: GET");
    header("Access-Control-Max-Age: 3600");
    header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

    //open connection mysql
    $connection = mysqli_connect("host_address","mysql_username","mysql_password","mysql_database_name") or die("Error" .mysqli_error($connection));
    
    //fetch rows from mysql db
    $query = "SELECT  SUM(cases_count) AS total FROM dengu_cases_by_month";
    
    $data = "data";
    
    $result = mysqli_query($connection,$query) or die("Error in selecting data".mysqli_error($connection));
    
    //create an php array 
    $emp_array = array();
    while($row = mysqli_fetch_assoc($result)){
        $emp_array [$data] = $row; 
    }
    
    //return data as json
    echo json_encode($emp_array, JSON_PRETTY_PRINT);
?>

Actually above script returns the total dengue cases count in Sri Lanka.

After hosting this script in http://subdomain.000webhost.com we can get the output as the following json string ,

{
    "data": {
        "total": "31126"
    }
}

Actually the API is hosted as the following URL

http://subdomain.000webhost.com/api/dengu_case_api.php

Also we can get the Headers as in the following screenshot

Also we can check our API using curl command in “Windows” or “nix” based OS (Unix,Linux)

If we execute curl command via terminal to the API URL we can get the response as below screenshot

Then execute curl-I via terminal we can get the response headers as in below screenshot

So the first part is over

The second part is consume or use this API JSON string GET request via Ajax and display in the Dashboard .

Here I’m populate only the necessary HTML division and the JavaScript part . For the JavaScript part you can use modern angular , react library . For this test I’ve used JQuery JavaScript library .

The HTML div

<div class="container-fluid" style="border: solid 1px black; border-radius: 12px; max-width: 400px; padding: 0px">
    <h4 align="center"><b>Dengu Stats Sri Lanka</b></h4>
    <div class="col-sm-12" style="background-color:#33f3ff;">
        <div class="dengu_stats"></div>
    </div> 
    <br>
</div>

The JavaScript part

<script type="text/javascript">
    //get dengu stats
    $.getJSON('http://subdomain.000webhostapp.com/api/dengu_case_api.php', function(dengu_data) {
        
        var stats_dengu = `total count: ${dengu_data.data.total}<br>`
                    
        $(".dengu_stats").html(stats_dengu);
    });
</script>

After complete the above work we can see the final result as below

So how can we test this API for SSL enabled site ? . Let’s see how it works !

Here I have used “Heroku” as the hosting provider then created a dashboard to display the API already developed that outputs the count as a json string .

In this dashboard firstly the API data section not showing the values

After disabling the protection on the browser as below we can finally see the expected result ( disabling the protection on browser is not recommended ! )

After this step the browser automatically reloads ( Here in my case it is Firefox Browser ).

I think you will get an idea how to develop an API and how to consume it using another app after reading this article . This is a simple API . But you can develop more complex and advanced APIs to your data to day projects . Also this simple API data can be use for flutter mobile apps . Also can be used to develop extensions on web browsers like Google Chrome or Mozilla Firefox 🙂 !

Have a nice day 🙂 !