javascript - 如何创建环境变量来保护我网站的 Google Maps API key (或任何其他 secret 值)？

Question

我正在学习使用 Bootstrap 编写自己的网站代码，并使用 Google map API key 和来自 Google Developers 的脚本轻松地在我的页面上放置了一张 map :

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

理想情况下我会有这样的东西:(即我已经试过了):

Html: <script src="map-value-pair.php"></script></script><script async defer src="$MapURL"></script>
PHP: <?php $MapURL="maps.googleapis.com/..." ?>

很明显，这并没有隐藏它打印到 html 的 URL。

我不相信有人真的像我一样出于基本目的而试图隐藏此 key ，因为对 Google Developers 的 http referrer 限制就足够了。但是，在尝试了许多不同的方法来混淆 key 之后，我决定我想学习创建环境变量来隐藏值。我认为它可能有用，我想扩展我的服务器端知识。 Google 最佳实践还建议“将它们存储在环境变量或应用程序源代码树之外的文件中”。

我找到了一个相关的堆栈:What steps should I take to protect my Google Maps API Key?在那个堆栈中，一个相关链接被提供给 hackernoon.com(第一篇文章中的有限链接)我的托管服务使用 cPanel 并提供这个 apache 环境变量教程:documentation.cpanel.net...

我在寻找开始自己的 Material 时遇到了问题。现在我有两个可能的行动计划:

1. 在 cpanel 上启用 ssh>按照上面提到的 cPanel 教程>找出如何访问 html 中的变量

或

1. 在 cpanel 上启用 ssh>以某种方式安装 node.js>在 twilio 上进行类似操作>找出如何在 html 中访问变量

感谢任何帮助或建议。最好的情况是对我的行动计划进行一些编辑，并提供几个链接以供查看。我只需要某种信心来推进其中一个计划。

附言哇第一个帖子!

编辑:问题的小清理。添加了理想的脚本。

Answer 1

任何访问您网站的人都可以抓取您输出为 HTML 的任何内容。您无法访问 HTML 中的变量等，因为它是最终输出，在处理完所有变量后生成服务器端。

由于您使用的是 Javascript 库，因此无法隐藏您的 key 。 Javascript 在客户端的浏览器上执行，因此您必须将您的 API key 传递给它们才能工作。

如果您只需要静态 map ，那么您可以在服务器端生成它们并在您的 HTML 中返回它们，而无需向最终用户透露您的 key 。

这是一个 PHP 示例:

$mapimg = "https://maps.googleapis.com/maps/api/staticmap?center=<$USER-LOCATION>&size=640x320&key=<$YOUR-KEY>"; // Include the user location in your request URL
$imagedata = file_get_contents($mapimg); // Retrieve the image server side
$src = base64_encode($imagedata); // Encode the image server side
$imagemap = '<img src="data:image/jpg;base64,'.$src.'">'; // Create a variable to insert the image into your page

然后在您的 PHP 脚本中输出 HTML，您只需在您希望 map 出现的任何地方包含 $imagemap。