javascript - 在 Vanilla JS 和 Django 中保护 API 密钥的最佳方法
问题描述
我正在Django中构建一个使用Google Places API的简单 webapp 。从main.js 文件调用 API,并将数据显示在页面上。
现在,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?有没有更好的方法来实现这一目标?
解决方案
如果您从客户端调用它,则无法保护它。您需要做的是创建一个视图来抽象密钥。
在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(...
...
请注意,这将使挖掘密钥的过程变得非常困难,但密钥仍然可以被发现,并且好的/坏的黑客仍然可以得到它。
推荐阅读
- mysql - 如何使用mysql获取用户的顶层数据?
- node.js - Puppeteer - 如何使用本地 IP 地址连接 WSEndpoint?
- python - Python 2.7.13 龟 onkey 功能不起作用
- docker - 无法通过 docker-compose.yml 中的“标签”设置 Traefik
- jquery - 添加新 div 时背景图像不透明度增加
- css - 网站和 Invsion(设计师和前端开发人员工具)之间的字体差异
- arduino - Arduino IDE 可以使用 avrdude 来刷 hex 文件,但是 ubuntu 上的命令行不能
- javascript - 如何获取 HTTP 请求的类型
- javascript - 函数名称是否也应该反映在 promise.then() 上称为回调的函数的操作?
- javascript - 将文字数字(三)乘以 1(四)