遮盖AmCharts外部数据URL

Question

我正在使用AmCharts Wordpress插件在Wordpress页面上生成图形。 为了使图形加载其形状和（外部）数据，AmCharts在生成图形时使用Javascript在客户端加载。 但是，此javascript还包含用于检索外部数据的API的URL。

这意味着任何人都可以轻松查看网站源代码并查看此链接。 这是一种风险，因为任何人现在都可以操纵URL并下载我们的完整数据库和数据。

我在下面添加了JavaScript代码的第一部分。 我想遮掩的网址部分是https://api.xxxxxxx.com/

有什么可能吗？ 有哪些选项可用？

谢谢你的帮助！

 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

我不熟悉WordPress插件或其工作方式，因此所有这些都完全忽略了WP插件。

我的第一个想法是抓住数据服务器端并在页面加载时将其抛出。 这样，API URL会被混淆，并且由于页面上已经存在数据，因此可以为用户保存另一个HTTP调用。

如果这不是一个选择，那么可以直接在服务器上创建一个脚本作为API的反向代理，而不必直接提供API调用。 您的客户端调用将获得指向服务器的URL，并且由您决定如何在任意程度上保护它。

例如chart.dataSource.url = 'https://your.site/reverse-proxy/' + from + '/' + to; 。 然后在https://your.site/reverse-proxy/检查并清理from和to输入，从'https://api.xxxxxxx.com/' + from + '/' + to （例如通过curl ），并使用适当的例如JSON标头将其发送回客户端。

这些想法对您有用吗？

Answer 2

感谢你的帮助。 赞赏。 最后，似乎唯一真正安全的选择是首先检索它，然后使用SELECT查询从数据库表中获取数据，然后创建一个数组，以amCharts兼容格式对JSON编码。 可能像这样简单：

<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>

然后，您的实际输出应如下所示：

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

您的所有用户在源代码中都将看到此JSON数组。 没有URL，没有服务器详细信息。