在 Vanilla JS 和 Django 中保护 API 密钥的最佳方法

Posted 2023-03-28

【中文标题】在 Vanilla JS 和 Django 中保护 API 密钥的最佳方法

【英文标题】：Best way to secure an API key in Vanilla JS and Django

【发布时间】：2020-11-25 07:07:21

【问题描述】：

我正在使用 Google Places API 在 Django 中构建一个简单的 web 应用程序。 API从main.js文件调用，数据显示在页面上。

现在，main.js 文件如下所示：

...
const apikey_gmaps = "AIzaSyDMjUwEt0bumPTVt1GpfQHrxyz";
var lat = position.coords.latitude;
var long = position.coords.longitude;
fetch("https://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+long+"&key="+**apikey_gmaps**)
  .then(...
...

我想保护 API 密钥，因为我不希望每个人都使用和共享我的凭据，从而破坏我的银行。我最近一直在阅读它，我可以使用 Decouple 库在 Django(Python) 中使用 .env 文件。 我想使用 main.js 文件中的 .env 变量。我能找到的唯一解决方案是使用 dotenv，但这需要 NodeJS。

有什么方法可以将 API 密钥从 .env 传递给 Django，然后从 Django 传递给 main.js？有没有更好的方法来实现这一点？

【问题讨论】：

为什么不从后端调用API，然后将其结果传输到前端？

为此我需要修改很多代码。此外，将数据传递给 main.js 中的其他函数。

如果请求是通过前端发出的，那么 api 密钥将可以通过浏览器 devtools 访问

【参考方案1】：

如果您从客户端调用它，您将无法保护它。您需要做的是创建一个视图来抽象密钥。

在views.py中：

from rest_framework.decorators import api_view, renderer_classes
from rest_framework.renderers import JSONRenderer, TemplatehtmlRenderer
from rest_framework.response import Response
import requests

@api_view(('GET',))
@renderer_classes([JSONRenderer])
def gmapAPI(request):
    lat = request.GET.get('lat', 'default_fb_value')
    long = request.GET.get('long', 'default_fb_value')
    apikey_gmaps = "#KEY_OR_GET_FROM_ENV";

    url = f'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=lat,long&rankby=distance&key=apikey_gmaps'
    r = requests.get(url)

    print(r.json())
    return Response(r.json())

在 urls.py 中添加：

...
path('maps_api/', views.gmapAPI, name='maps_api'),
...

在 main.js 中：

    ...
var lat = position.coords.latitude;
var long = position.coords.longitude;
var targetUrl = (`website/maps_api/?lat=$lat&long=$long`) 
fetch(targetUrl)
  .then(...
...

请注意，这将使挖掘密钥的过程变得非常困难，但密钥仍然可以被发现，并且好的/坏的黑客仍然可以得到它。