Obscuring AmCharts External Data URL

Question

I am using AmCharts Wordpress plugin to generate graphs on a Wordpress page. To have the graph load its shape and (external) data, AmCharts uses Javascript to load on the client side when generating the graph. However, this javascript also contains the URL to the API used to retrieve the external data.

This means that anyone can easily view the web site source code and see this link. This is a risk as anybody can now manipulate the URL and download our full database with data.

I have added the first part of the JavaScript code below. the URL part I like to obscure is https://api.xxxxxxx.com/

Any way this is possible? What options are available?

Thanks for any help!

 try {    
    // Themes begin

    var chart = am4core.create("amchart1", am4charts.XYChart);
    var from = Math.round(+new Date() / 1000) – 2629743;
    var to = Math.round(+new Date() / 1000) + 2629743;

    chart.dataSource.url = 'https://api.xxxxxxx.com/' + from + '/' + to;

    chart.dataSource.events.on(“parseended”, function(ev) {
    // parsed data is assigned to data source's data property
    var data = ev.target.data;
    for (var i = 0; i < data.length; i++) {
       if(data[i]["realtime_value"] == 0)
          delete data[i]["realtime_value"];
    }

    console.log(‘data’, data);

    });

    // create date axis

...

Answer 1

I'm not familiar with the WordPress plugin or how it works, so all of this is completely neglecting the WP plugin.

My first thought is to grab the data server side and dish out it out on page load. This way the API url is obfuscated and the user is saved another HTTP call as the data is already present on the page.

If that is not an option, instead of providing the API call directly, create a script on your server that functions as a reverse proxy to the API. Your clientside calls will get the URL to your server and it's up to you how you want to secure it to whatever extent.

E.g. chart.dataSource.url = 'https://your.site/reverse-proxy/' + from + '/' + to;. Then at https://your.site/reverse-proxy/ you check and clean the from & to inputs, grab the data from 'https://api.xxxxxxx.com/' + from + '/' + to (e.g. via curl), and send it back to the client with appropriate e.g. JSON headers.

Any of these ideas work for you?

Answer 2

Thanks all for your help. Appreciated. In the end it seems that the only real safe option is to retrieve it first Fetch your data from a DB table using a SELECT query, then create an array that you can JSON-encode in an amCharts compatible format. Might be as simple as this:

<script>

<?php
  $sth = mysqli_query("SELECT ...");
  $rows = array();
  while($r = mysqli_fetch_assoc($sth)) {
    $rows[] = $r;
  }
  print "var data = " . json_encode($rows) . ";";
?>

console.log('data from server', data);

</script>

Your actual output should then look like this:

<script>
var data = [{
  "category": "1",
  "value": 5
}, {
  "category": "4",
  "value": 10
}];
console.log('data from server', data);
</script>

All your users will see in the source code is this JSON array. No URLs, no server details.