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

Question

我正在 Django 中构建一个简单的网络应用程序，它利用 Google Places API。 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 密钥，因为我不希望每个人都使用和共享我的凭据，并破坏我的银行。我最近一直在阅读它，我可以使用 .env 在 Django(Python) 22=]解耦库。 我想使用 main.js 文件中的 .env 变量。 我能找到的唯一解决方案是使用 dotenv，但是这需要 NodeJS。

有什么方法可以将 API 密钥从 .env 传递到 Django，然后再从 Django 传递到 main.js？有没有更好的方法来实现这个目标？

Answer 1

如果从 client-side 调用它，则无法保护它。您需要做的是创建一个视图来抽象密钥。

在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(...
...

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

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

Best way to secure an API key in Vanilla JS and Django

javascript

api

django

django-rest-framework

websecurity