遮蓋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，沒有服務器詳細信息。