隐藏 AmCharts 外部数据 URL

Posted 2023-03-07

【中文标题】隐藏 AmCharts 外部数据 URL

【英文标题】：Obscuring AmCharts External Data URL

【发布时间】：2019-03-08 09:06:21

【问题描述】：

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

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

我在下面添加了 JavaScript 代码的第一部分。我喜欢隐藏的 URL 部分是 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

...

【问题讨论】：

您在 JavaScript 中使用的 anything 就是这种情况 - 一切都可以公开访问。您编写的任何通过 JS 隐藏它的代码都可以很容易地被逆向工程，因为用户首先可以访问用于隐藏它的代码。您最好在服务器堆栈级别（php 或其他）解决此问题，方法是实施安全性或附加逻辑以防止在访问 URL 时滥用。

@xorspark 感谢您的回复。我一直在寻找额外的逻辑，但没有任何运气。有什么更具体的可以参考吗？

查看有关如何构建和保护 API、速率限制/节流、添加令牌等方面的资源。请注意 you can't completely prevent abuse，但您至少可以将影响降到最低。

【参考方案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 标头。

这些想法中的任何一个对你有用吗？

【讨论】：

感谢您的解释，不胜感激。我唯一想到的是反向代理仍然是可读的，你最终会遇到同样的问题吗？

反向代理是可读的，但您可以更改其参数以及如何保护它，例如仅来自某个页面的请求，或者不是from/to，它可能更具体到您的图表。基本上你可以做任何你想做的事情来尝试隐藏参数。

感谢您的解释。我将不得不更深入地研究这一点。目前我发现了另一个选项，它在中间建立一个额外的步骤，它将检索 mysql 数据并在页面加载时将其输出到 JSON。

是的，我看到了你的回答。如果这是一个可行的选择，并且确实是最好的方法，但不是直接使用 mysql 方法，如果 WordPress 或任何其他 PHP 库已经在页面上处于活动状态，我会尝试依靠他们拥有的任何数据库查询实用程序，尤其是一旦/如果查询受到用户输入/交互的影响。这样可以清理/保护查询。

【参考方案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，没有服务器详细信息。

【讨论】：

是的，这就是我说“我的第一个想法是抓取数据服务器端并在页面加载时将其发送出去”时的意思。