我需要隐藏API密钥时，使用谷歌地图js API?如果有，怎么做呢?

Do I need to hide API key when using google maps js API? If so, how?

本文关键字：API 如果 js 隐藏 密钥 谷歌地图      更新时间：2023-09-26

根据https://developers.google.com/maps/documentation/javascript/tutorial#HTML5，似乎我可以添加以下标签到我的html，并开始使用地图js API。

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

但是这会暴露我的API密钥。

在google上搜索和在stackoverflow上浏览答案后，我觉得也许没有必要隐藏这个API密钥。当我在谷歌上创建API密钥时，我只需要设置引用，如所述https://stackoverflow.com/a/2256312/1316649

所以，即使其他人知道我的API密钥，他们也不能从另一个域使用它。我说的对吗?

但是google说你不应该在代码中嵌入API key:https://support.google.com/cloud/answer/6310037

所以，我需要隐藏API密钥时使用谷歌地图js API?如果有，怎么做?

更新:通过"API密钥"，我指的是浏览器API密钥。

虽然上面的答案很有帮助，但它们都没有解决以下漏洞:

一旦用户访问了您的API密钥，即使他们被限制只能从您的域使用它，他们仍然可以随心所欲地使用它。粗略地说，这可能意味着在非常短的时间内进行100万次页面刷新(和地图加载)，从而超出使用限额。

我还没有遇到任何解决这个问题的办法。除非我错过了什么…?

谷歌地图javascript api的相关使用限制。

您可以创建具有不同限制的多个API密钥以安全地使用它们。对于嵌入地图，Google Maps文档中有关于创建正确受限API密钥的说明，以便它不会被滥用于其他目的，请参见获取API密钥-限制API密钥。在源代码中包含受限制的API键是可以的，因为如果不这样做，无论如何都无法正确嵌入映射。

如果您需要服务器端API访问，您可以创建第二个限制较少的API密钥。这件事应该保密。

为任何服务隐藏API密钥:

  1. 设计一个web服务器，接受第三方服务请求和代理请求。
  2. 设计你的图形界面来请求你在步骤1中设计的web服务器
  3. 将密钥存储在步骤1中构建的web服务器上，并对第三方代理请求应用身份验证，授权和速率限制。

在第2步中用于构建接口的第三方库可能会强制您使用某些主机或强制您包含API密钥。对于第一个问题，您必须编辑他们的库代码，或者为第三方客户端库提供不同的http请求库，例如在javascript中重新定义fetch()函数。对于第二个问题，只需添加一个垃圾密钥，您的代理服务器就可以忽略它并使用真正的密钥重新编写它。

好处:
  • 隐藏你的钥匙
  • 跟踪请求和响应的对象、内容和时间。不过，你也可以用其他方法来实现。
  • 可以在服务中添加一层缓存来加速其他用户之前发出的请求，前提是他们的服务条款允许。
事项:
  1. 因为用户会假装是您的服务器发出请求，您正在接受安全风险。如果用户故意发出恶意格式化的请求，那么他们是在假装是您的服务器时这样做的。但是，如果以后想要审计它们，您可以记录所有请求。
  2. 构建和配置代理服务器所需的所有安全性需要几秒钟以上的时间。
  3. 你现在需要处理所有这些网络请求，这可能是大量的流量。
  4. 你可能想拦截服务器返回的响应，以防它在错误或其他情况下返回响应体中的键。
    5. 你在链条中添加了另一个环节，它将使服务稍微不那么可靠。
提到h5> 我想说的是，这基本上就是"@OLTO和SUGI-cube项目"试图在他们的回答中展示，以及#Brandon Miller在评论中提出的解决方案。

你发布的链接说你不应该在代码中嵌入API密钥，这与谷歌的云平台有关。您可以在代码中保留Google Maps的API密钥。

无需隐藏API密钥，只需使其无用，你可以简单地在google API控制台使用键限制。

从google API控制台选择:-

    <
  1. 凭证/gh>
  2. 选择您的API密钥或创建一个新密钥
    3. <
  3. 应用程序限制/gh>
  4. HTTP引用(网站)

，然后添加您的网站限制

我建议限制您的API密钥仅供IP地址使用&需要它们的引用url:通过限制IP地址，引用url，您可以减少泄露API密钥的影响。

你可以通过打开凭据页面来指定主机和应用程序可以使用控制台的每个密钥，然后用你想要的设置创建一个新的API密钥，或者编辑API密钥的设置。

这将帮助您保护您的API密钥。

Jeff

我所见过的两种最被接受的方法是要么使用[@googlemaps/js-api-loader]1，要么——这很重要——按照google告诉你的方式限制你的键。

你好,

即使它是太晚了，发布一个答案，我相信这将有助于社区，所以我已经制定了一个解决方案，将隐藏脚本标签从DOM，我设法通过删除脚本标签后加载脚本或如果它是一个错误，而加载它，所以这是建议的解决方案，如果不合适，我很高兴听到你的意见:

<script>
    const deleteMapScriptTag = () => {
        document.body.removeChild(
            Array.from(document.body.getElementsByTagName('script')).find(
                (item) => 
                    item.src.includes('https://maps.googleapis.com/maps/api/js?key=')
                )
            )
        }
</script>

这个部分将搜索google maps script标签并将其从文档中移除，我们将在

之后命名它

onload, onerror

脚本标签提供的

事件，如下所示:

<script onload="deleteMapScriptTag()" onerror="deleteMapScriptTag()"
    src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&libraries=places"></script>

这将在加载或加载失败时立即从DOM中删除脚本标记，从而阻止用户检查文件并获取密钥。

虽然从DOM中删除了，但在查看页面源代码时，原始脚本标记(以及键)仍然可见。

此外，脚本的完整URL也可以通过开发人员工具中的网络请求面板进行检查，该面板也暴露了API密钥。

需要隐藏API key

使用google maps js API时需要隐藏API key。你设置推荐人是不够的。我的PC上有本地web服务器，可以更改我的hosts文件，这样我就可以将我的HTML域名欺骗为您的域名。如果您在HTML中显示API密钥，则可能有人使用该密钥访问Google地图。这可能意味着一百万次页面刷新(和地图加载)!

这是一个来自Google的坏例子。

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

如何从HTML中隐藏API密钥

我使用环境变量和CGI来隐藏我的API密钥从HTML，如下所示。

1。设置环境变量

我在环境变量中设置谷歌地图API键并将其传递给我的CGI脚本。nginx + fcgiwrap在我的服务器上运行，所以我在我的fcgiwrap.conf中设置API key，像这样。

fcgiwrap.conf 

location /cgi-bin/ {
    ........
    fastcgi_param GOOGLE_MAPS_API_KEY　 YOUR_API_KEY; <= SET YOUR API KEY HERE
}

2。make CGI script

我做了这样的python CGI。这与Google的SAMPLE中的src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY相同。

getapijs.py 

#!/usr/bin/python
# -*- coding: utf-8 -*-
import requests
import os
url = 'https://maps.googleapis.com/maps/api/js'
key = os.environ['GOOGLE_MAPS_API_KEY'] # get Environment Variables
mysrc = url + "?key=" + key
response = requests.get(mysrc) # get src from Google Maps url
print("'Content-Type': 'text/javascript; charset=UTF-8'") # header for HTML
print("")
print(response.text)

3。从javascript调用CGI

从window.onload调用CGI。这与Google SAMPLE中的<script defer ... &callback=initMap>相同。

main.js 

function initMap() {
    var uluru = {lat: -25.344, lng: 131.036};
    var map = new google.maps.Map(document.getElementById('map'), {zoom: 4, center: uluru});
    var marker = new google.maps.Marker({position: uluru, map: map});
}
window.onload = function() {
    fetch("/cgi-bin/getapijs.py").then(res=>{
        return res.text();
    }).then(mytext => {
        eval(mytext);
    }).then(() => {
        initMap();
    }).catch(() =>{
        // error handling
    });
}

4。在你的HTML中读取main.js

在标题部分设置<script src="main.js"></script>。

index . html 

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
      }
    </style>
    <title>Hello World</title>
    <script src="main.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
  </body>
</html>
相关文章：