在Django模板中安全调用JavaScript脚本中的环境变量-js教程-PHP中文网

在Django模板中安全调用JavaScript脚本中的环境变量

聖光之護

发布： 2025-10-23 09:43:36

原创

730人浏览过

在Django模板中安全调用JavaScript脚本中的环境变量

本教程旨在解决在django模板的javascript脚本中安全地使用`.env`文件存储的环境变量的问题。由于客户端javascript无法直接访问服务器端环境变量，文章详细介绍了如何通过django视图读取这些变量，并以json响应的形式将其传递给前端，从而避免将敏感凭据硬编码到javascript代码中，提高应用程序的安全性。

在Web开发中，尤其是在使用Django等后端框架时，将API密钥、客户端ID等敏感信息存储在.env文件中是一种常见的安全实践。然而，当需要在前端JavaScript脚本中利用这些凭据时，直接在HTML模板中硬编码它们会带来严重的安全风险。本文将详细介绍一种安全地将这些环境变量从Django后端传递到前端JavaScript的方法。

客户端JavaScript无法直接访问服务器端环境变量

首先，需要明确的是，浏览器中运行的JavaScript代码无法直接访问服务器的文件系统或服务器的环境变量。.env文件及其内容是服务器端的秘密，不应直接暴露给客户端。因此，我们需要一个服务器端的机制来安全地中转这些信息。

解决方案：通过Django视图提供JSON响应

核心思想是创建一个Django视图，该视图负责从.env文件中读取所需的环境变量，然后将这些变量封装成JSON格式的数据，并通过HTTP响应发送给前端。前端JavaScript通过AJAX请求获取这些JSON数据，从而安全地获取所需的凭据。

1. 配置.env文件

确保你的.env文件中的变量值没有被引号包裹，因为os.getenv()通常会直接读取字符串，如果带有引号，引号也会成为值的一部分。python-dotenv库在加载时会正确处理这些值。

立即学习“Java免费学习笔记（深入）”；

# .env 文件示例
GOOGLE_DRIVE_API_KEY=YOUR_GOOGLE_DRIVE_API_KEY
GOOGLE_DRIVE_API_CLIENT_ID=YOUR_GOOGLE_DRIVE_CLIENT_ID.apps.googleusercontent.com
GOOGLE_DRIVE_APP_ID=YOUR_GOOGLE_DRIVE_APP_ID

登录后复制

2. 创建Django视图来获取凭据

在Django应用的views.py文件中，创建一个视图函数来读取环境变量并返回JsonResponse。

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

# your_app/views.py
import os
from dotenv import load_dotenv
from django.http import JsonResponse
from django.views.decorators.http import require_GET

# 确保在应用启动时加载 .env 文件，
# 通常在 settings.py 中或应用的 __init__.py 中调用 load_dotenv()
# 或者，如本例所示，在需要的地方调用。
# 如果你的项目已经全局配置了 dotenv，可以省略此处的 load_dotenv()

@require_GET
def get_google_drive_credentials(request):
    """
    从环境变量中获取Google Drive API凭据并以JSON格式返回。
    """
    # 确保 .env 文件已被加载。
    # 在生产环境中，建议在应用启动时一次性加载。
    # 此处为示例，每次请求都加载会增加少量开销。
    load_dotenv()  

    # 从环境变量中获取所需的值
    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(): 这个函数来自python-dotenv库，用于加载.env文件中的环境变量到os.environ。在实际项目中，通常会在Django应用的启动阶段（例如settings.py或wsgi.py中）调用一次，而不是在每个视图函数中。
os.getenv('VAR_NAME'): 用于从环境变量中获取指定名称的值。
JsonResponse(data): Django提供的一个便捷类，用于将Python字典自动序列化为JSON格式并作为HTTP响应返回。
@require_GET: 这是一个装饰器，确保此视图只响应GET请求，增强安全性。

3. 配置URL路由

在你的urls.py文件中，为上述视图配置一个URL路径。

# your_project/urls.py (或 your_app/urls.py)
from django.contrib import admin
from django.urls import path
from your_app import views # 假设你的视图在 your_app 应用中

urlpatterns = [
    path('admin/', admin.site.urls),
    path('get-google-drive-credentials/', views.get_google_drive_credentials, name='get_google_drive_credentials'),
]

登录后复制

4. 在Django模板的JavaScript中获取凭据

在你的HTML模板（例如index.html）中，使用JavaScript发起AJAX请求到之前定义的URL，获取JSON响应，并从中提取凭据。

<!-- your_app/templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Google Drive File Picker Example</title>
</head>
<body>
    <h1>Google Drive File Picker</h1>
    <button id="authorize_button">Authorize</button>
    <button id="pick_button" style="display: none;">Pick Files</button>

    <script>
        var API_KEY;
        var CLIENT_ID;
        var APP_ID;
        var SCOPES = 'https://www.googleapis.com/auth/drive'; // 示例：Google Drive API 范围

        // 发起AJAX请求以检索环境变量值
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    API_KEY = response.api_key;
                    CLIENT_ID = response.client_id;
                    APP_ID = response.app_id;

                    console.log('API Key:', API_KEY);
                    console.log('Client ID:', CLIENT_ID);
                    console.log('App ID:', APP_ID);

                    // 在这里初始化Google Drive File Picker或执行其他需要这些凭据的操作
                    // 例如：gapi.load('picker', { 'callback': onPickerApiLoad });
                    // initGoogleDrivePicker(API_KEY, CLIENT_ID, APP_ID, SCOPES);

                } else {
                    console.error('Failed to retrieve Google Drive credentials. Status:', xhr.status);
                }
            }
        };
        xhr.open('GET', '/get-google-drive-credentials'); // 请求之前定义的URL
        xhr.send();

        // 示例函数：使用获取到的凭据初始化Google Drive Picker
        function initGoogleDrivePicker(apiKey, clientId, appId, scopes) {
            // 这里是使用这些凭据初始化Google Drive Picker的逻辑
            console.log("Initializing Google Drive Picker with:", apiKey, clientId, appId, scopes);
            // ... 实际的Google API初始化代码 ...
        }
    </script>
</body>
</html>

登录后复制

代码解释：

XMLHttpRequest: 这是一个用于在后台与服务器交换数据的JavaScript对象。它允许在不重新加载整个网页的情况下更新部分网页。
xhr.onreadystatechange: 当readyState属性改变时调用的事件处理程序。
xhr.readyState === XMLHttpRequest.DONE: 表示请求已完成。
xhr.status === 200: 表示HTTP请求成功。
JSON.parse(xhr.responseText): 将服务器返回的JSON字符串解析为JavaScript对象。
xhr.open('GET', '/get-google-drive-credentials'): 配置请求方法和URL。
xhr.send(): 发送请求。

现代JavaScript替代方案：fetch API 虽然上述示例使用了XMLHttpRequest，但在现代Web开发中，fetch API是更推荐的替代方案，因为它提供了更简洁、更强大的接口来处理HTTP请求。

// 使用 fetch API 的示例
fetch('/get-google-drive-credentials/')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json(); // 解析JSON响应
    })
    .then(data => {
        API_KEY = data.api_key;
        CLIENT_ID = data.client_id;
        APP_ID = data.app_id;

        console.log('API Key (fetch):', API_KEY);
        console.log('Client ID (fetch):', CLIENT_ID);
        console.log('App ID (fetch):', APP_ID);

        // 使用获取到的凭据
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });

登录后复制

注意事项与安全最佳实践

只暴露必要的凭据： 绝不要通过这种方式将数据库密码、私有API密钥等高度敏感的服务器端凭据暴露给前端。此方法仅适用于那些客户端（如Google Drive File Picker）确实需要但又不想硬编码的公共API密钥或客户端ID。
HTTPS： 确保你的网站使用HTTPS。这样可以加密客户端和服务器之间的通信，防止中间人攻击窃取凭据。
缓存控制： 考虑为你的凭据API端点设置适当的缓存控制头，以防止浏览器或代理缓存敏感信息。对于动态获取的凭据，通常不希望被长期缓存。
错误处理： 在JavaScript中实现健壮的错误处理，以应对网络问题或服务器端错误。
CORS： 如果你的前端和后端运行在不同的域名或端口上，你需要配置Django的CORS设置，允许前端域名访问这个凭据API端点。
速率限制： 考虑为get_google_drive_credentials端点添加速率限制，以防止恶意用户频繁请求，增加服务器负担或尝试探测系统。

总结

通过上述方法，我们可以在Django应用中安全地将.env文件中的环境变量传递给前端JavaScript脚本，避免了将敏感凭据硬编码到客户端代码中，显著提升了应用程序的安全性。这种模式利用了Django作为后端服务器的优势，将服务器端的安全管理与客户端的功能需求有效地结合起来。在实施时，务必牢记安全最佳实践，只暴露必需的、相对不敏感的凭据，并确保通信过程的安全性。

以上就是在Django模板中安全调用JavaScript脚本中的环境变量的详细内容，更多请关注php中文网其它相关文章！