Лучший способ защитить ключ API в Vanilla JS и Django

Question

Я создаю простое веб-приложение на Django, которое использует Google Places API . API вызывается из main. js file , а данные отображаются на странице .

Прямо сейчас выглядит файл 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), используя библиотеку Decouple . Я хочу использовать переменные .env в основном файле. js. Единственное решение, которое я смог найти, - использовать dotenv , но для этого требуется NodeJS.

Есть ли способ передать ключ API из .env в Django, а затем из Django в main. js? Есть ли лучший способ добиться этого?

Answer 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'),
...

In main. js:

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

Обратите внимание, что это очень усложнит процесс раскопок ключа, но ключ все равно будет обнаружен, и хороший / плохой хакер все равно сможет его получить.