本教程旨在解决在django应用中，如何在客户端javascript中安全地访问存储在`.env`文件中的敏感环境变量。由于javascript无法直接读取服务器端环境变量，文章将详细介绍一种通过django视图创建json api接口，并在前端javascript中使用ajax请求获取这些变量的解决方案，确保凭证不直接暴露在客户端代码中，提升应用安全性。
背景与挑战
在Web开发中，将API密钥、客户端ID等敏感配置信息存储在.env文件中是一种常见的安全实践。在Python后端（如Django）中，我们可以方便地使用os.getenv()来读取这些环境变量。然而，当需要在客户端JavaScript代码中使用这些变量时，直接访问服务器端环境变量是不可能的，并且将这些敏感信息硬编码到JavaScript文件中会带来严重的安全风险，因为它们将暴露给所有访问网站的用户。
本文将提供一种安全且推荐的方法，通过Django后端作为桥梁，将必要的环境变量安全地传递给客户端JavaScript。
解决方案概述：通过JSON API传递环境变量
核心思想是创建一个Django视图，该视图负责从.env文件加载所需的环境变量，然后将这些变量封装成JSON格式的响应。客户端JavaScript通过发起AJAX请求到这个特定的Django视图，获取并解析JSON响应，从而安全地获取到所需的环境变量。
实施步骤
1. 配置 .env 文件
首先，确保您的环境变量在.env文件中正确配置。为了能够通过os.getenv()正确读取，建议不要在值外部添加引号。
立即学习“Java免费学习笔记（深入）”；
./env 示例：
# Google Drive API 凭证GOOGLE_DRIVE_API_KEY=YOUR_GOOGLE_DRIVE_API_KEYGOOGLE_DRIVE_API_CLIENT_ID=YOUR_GOOGLE_DRIVE_API_CLIENT_ID.apps.googleusercontent.comGOOGLE_DRIVE_APP_ID=YOUR_GOOGLE_DRIVE_APP_ID
2. 创建 Django 视图
在您的Django应用中，创建一个视图函数，用于读取环境变量并返回JSON响应。
yourapp/views.py 示例：
import osfrom dotenv import load_dotenvfrom django.http import JsonResponse# 在应用启动时加载 .env 文件。# 实际项目中，这通常在 settings.py 或 wsgi.py/asgi.py 中进行一次性加载。# 这里为了演示方便，在视图中加载，但更好的实践是全局加载。load_dotenv() def get_google_drive_credentials(request): """ 从环境变量中获取 Google Drive API 凭证并以 JSON 格式返回。 """ # 获取环境变量值 google_drive_api_key = os.getenv('GOOGLE_DRIVE_API_KEY') google_drive_api_client_id = os.getenv('GOOGLE_DRIVE_API_CLIENT_ID') google_drive_app_id = os.getenv('GOOGLE_DRIVE_APP_ID') # 构建 JSON 响应数据 data = { 'api_key': google_drive_api_key, 'client_id': google_drive_api_client_id, 'app_id': google_drive_app_id, } # 返回 JSON 响应 return JsonResponse(data)
注意事项：
load_dotenv() 应该在您的Django应用启动时（例如在 settings.py 或 wsgi.py 文件中）被调用一次，而不是在每个视图函数中。这样可以确保环境变量在整个应用生命周期中都可用。此视图只返回非敏感或前端必需的凭证。对于服务器端操作所需的敏感密钥，应始终保留在后端。在生产环境中，您可能需要为这个API端点添加身份验证和权限检查，以确保只有授权用户或服务才能访问这些凭证。
3. 配置 URL 路由
将上述视图函数映射到一个URL路径，以便客户端JavaScript可以访问它。
yourapp/urls.py 示例：
from django.urls import pathfrom . import viewsurlpatterns = [ path('get-google-drive-credentials/', views.get_google_drive_credentials, name='google_drive_credentials'),]
确保将此URL配置包含在您的项目主 urls.py 文件中。
4. 在 Django 模板中调用 JavaScript
在您的Django模板中，使用JavaScript发起AJAX请求到上面定义的URL，获取并使用这些凭证。
your_template.html 示例：
// 使用 XMLHttpRequest 发起 AJAX 请求 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { // 当请求完成且状态为 DONE (4) 时 if (xhr.readyState === XMLHttpRequest.DONE) { // 如果 HTTP 状态码为 200 (OK) if (xhr.status === 200) { // 解析 JSON 响应 var response = JSON.parse(xhr.responseText); // 将获取到的凭证赋值给 JavaScript 变量 var API_KEY = response.api_key; var CLIENT_ID = response.client_id; var APP_ID = response.app_id; // 定义 Google Drive API 的作用域 var SCOPES = 'https://www.googleapis.com/auth/drive'; // 在此处使用 API_KEY, CLIENT_ID, APP_ID 和 SCOPES 初始化 Google Drive File Picker console.log('API Key:', API_KEY); console.log('Client ID:', CLIENT_ID); console.log('App ID:', APP_ID); console.log('Scopes:', SCOPES); // 例如，初始化 Google API 客户端 // gapi.load('client:picker', function() { // gapi.client.setApiKey(API_KEY); // gapi.client.drive.apps.list().then(function() { // // ... your picker logic here ... // }); // }); } else { // 请求失败，打印错误信息 console.error('Failed to retrieve Google Drive credentials. Status:', xhr.status); } } }; // 配置 GET 请求到凭证获取端点 xhr.open('GET', '/get-google-drive-credentials/'); // 确保路径与您的 urls.py 配置一致 // 发送请求 xhr.send();
现代 JavaScript (Fetch API) 替代方案：为了代码的简洁性和现代化，您也可以使用 fetch API 来替代 XMLHttpRequest：
fetch('/get-google-drive-credentials/') // 确保路径与您的 urls.py 配置一致 .then(response => { if (!response.ok) { throw new Error('Network response was not ok ' + response.statusText); } return response.json(); }) .then(data => { var API_KEY = data.api_key; var CLIENT_ID = data.client_id; var APP_ID = data.app_id; var SCOPES = 'https://www.googleapis.com/auth/drive'; console.log('API Key (Fetch):', API_KEY); console.log('Client ID (Fetch):', CLIENT_ID); console.log('App ID (Fetch):', APP_ID); console.log('Scopes (Fetch):', SCOPES); // 在此处使用这些变量 }) .catch(error => { console.error('Failed to retrieve Google Drive credentials:', error); });
总结
通过上述方法，我们成功地实现了在Django模板中的JavaScript代码中安全地访问存储在.env文件中的环境变量。这种方法避免了将敏感信息直接硬编码到前端代码中，大大提高了应用的安全性。核心在于利用Django后端作为中间层，通过一个受控的API端点按需提供这些凭证，并且客户端JavaScript通过异步请求获取它们。在实际部署时，请务必考虑API端点的访问控制和错误处理机制，以进一步增强安全性与健壮性。
以上就是在Django模板中安全地在JavaScript中使用环境变量的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531789.html
微信扫一扫 
支付宝扫一扫 
