Javascript 在Vanilla JS和Django中保护API密钥的最佳方法
我正在Django中构建一个简单的webapp,它利用googleplacesapi。从main.js文件调用API,并且数据显示在页面上 现在,main.js文件如下所示:Javascript 在Vanilla JS和Django中保护API密钥的最佳方法,javascript,django,api,django-rest-framework,websecurity,Javascript,Django,Api,Django Rest Framework,Websecurity,我正在Django中构建一个简单的webapp,它利用googleplacesapi。从main.js文件调用API,并且数据显示在页面上 现在,main.js文件如下所示: ... const apikey_gmaps = "AIzaSyDMjUwEt0bumPTVt1GpfQHrxyz"; var lat = position.coords.latitude; var long = position.coords.longitude; fetch("https:
...
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密钥,因为我不想让每个人都使用和共享我的凭据,也不想破坏我的银行。我最近一直在读这方面的文章,我能够使用解耦库在Django(Python)中使用.env文件我想使用main.js文件中的.env变量。我能找到的唯一解决方案是使用dotenv,但这需要NodeJS
有没有办法将API密钥从.env传递到Django,然后从Django传递到main.js?有没有更好的方法来实现这一点?如果从客户端调用,则无法保护它。您需要做的是创建一个视图来抽象密钥 在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())
在URL.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(...
...
请注意,这将使挖掘密钥的过程非常困难,但密钥仍然可以被发现,好的/坏的黑客仍然可以获得它。为什么不从后端调用API,然后将其结果传输到前端?为此,我需要修改大量代码。此外,数据会传递给main.js中的其他函数。如果请求是通过前端发出的,则可以通过浏览器devtools访问api密钥