基于Azure的端到端点击流分析POC：安全发送事件至Event Hub

要避免在前端JS中暴露Event Hub凭证，仅用Azure原生服务的话，有两个可靠的实现方案：

方案一：Azure Functions 作为安全代理（推荐，实现简单） #

通过HTTP触发的Azure Functions作为中间层，前端只需调用Function的HTTP端点，由Function使用后台存储的凭证发送事件到Event Hub，完全避免前端接触敏感信息。

实现步骤： #

1. 创建HTTP触发的Azure Function

   • 选择Node.js/Python等你熟悉的运行时，设置Function的CORS规则，仅允许你的前端域名访问（防止跨域和恶意调用）。
   • 将Event Hub的连接字符串存入Function的应用设置（比如命名为EVENTHUB_CONNECTION_STRING），这个值仅在Function后台可见，不会暴露给前端。

2. Function 代码示例（Node.js）

   const { EventHubProducerClient } = require("@azure/event-hubs");
   
   module.exports = async function (context, req) {
       context.log('Received clickstream event');
       
       // 从请求体获取前端发送的事件数据
       const eventData = req.body;
       if (!eventData) {
           context.res = { status: 400, body: "Missing event data" };
           return;
       }
   
       try {
           // 初始化Event Hub生产者客户端
           const producer = new EventHubProducerClient(process.env.EVENTHUB_CONNECTION_STRING, "your-event-hub-name");
           
           // 创建批次并添加事件
           const batch = await producer.createBatch();
           batch.tryAdd({ body: eventData });
           
           // 发送批次
           await producer.sendBatch(batch);
           await producer.close();
   
           context.res = { status: 200, body: "Event sent successfully" };
       } catch (error) {
           context.log.error(`Error sending event: ${error}`);
           context.res = { status: 500, body: "Failed to send event" };
       }
   };
   

3. 前端JS调用示例

   // 捕获点击流事件
   const captureClickstreamEvent = () => {
       return {
           "event_name": "page_view",
           "page_url": window.location.href,
           "time_stamp": Date.now().toString()
       };
   };
   
   // 发送到Azure Function
   const sendToEventHubViaFunction = async () => {
       const eventData = captureClickstreamEvent();
       try {
           const response = await fetch("https://your-function-app-name.azurewebsites.net/api/your-function-name?code=your-function-access-key", {
               method: "POST",
               headers: { "Content-Type": "application/json" },
               body: JSON.stringify(eventData)
           });
           if (response.ok) {
               console.log("Event sent");
           } else {
               console.error("Failed to send event");
           }
       } catch (error) {
           console.error("Network error:", error);
       }
   };
   
   // 页面加载时发送事件
   window.addEventListener('load', sendToEventHubViaFunction);
   

   注意：Function的访问密钥可作为查询参数或放在请求头里，进一步限制非法访问。

方案二：使用Azure AD获取受限访问令牌 #

通过Azure Active Directory（AD）认证前端用户，获取仅具有Event Hub发送权限的短期令牌，避免暴露永久凭证。

实现步骤： #

1. 在Azure AD注册单页应用（SPA）

   • 注册时设置前端域名作为重定向URI，启用"允许公共客户端流"。
   • 给该SPA应用分配Azure Event Hubs Data Sender角色，限定在目标Event Hub或命名空间（遵循最小权限原则）。

2. 前端JS示例（使用MSAL.js）

   import * as msal from "@azure/msal-browser";
   
   // 初始化MSAL客户端
   const msalConfig = {
       auth: {
           clientId: "your-spa-client-id",
           authority: "https://login.microsoftonline.com/your-tenant-id",
           redirectUri: "https://your-frontend-domain.com"
       }
   };
   const msalInstance = new msal.PublicClientApplication(msalConfig);
   
   // 获取访问令牌
   const getEventHubToken = async () => {
       const request = {
           scopes: ["https://eventhubs.azure.net/.default"]
       };
       try {
           const response = await msalInstance.acquireTokenSilent(request);
           return response.accessToken;
       } catch (error) {
           // 静默获取失败，弹出登录框（如需用户登录）
           const response = await msalInstance.acquireTokenPopup(request);
           return response.accessToken;
       }
   };
   
   // 发送事件到Event Hub REST API
   const sendEventToEventHub = async () => {
       const eventData = captureClickstreamEvent();
       const token = await getEventHubToken();
       const url = "https://your-eventhub-namespace.servicebus.windows.net/your-event-hub/messages?timeout=60&api-version=2021-11-01";
       
       try {
           const response = await fetch(url, {
               method: "POST",
               headers: {
                   "Content-Type": "application/json",
                   "Authorization": `Bearer ${token}`
               },
               body: JSON.stringify(eventData)
           });
           if (response.ok) {
               console.log("Event sent");
           } else {
               console.error("Failed to send event");
           }
       } catch (error) {
           console.error("Network error:", error);
       }
   };
   

安全注意事项 #

• CORS限制：无论是Function还是Event Hub的REST API，都要严格限制允许的前端域名，避免跨域滥用。
• 最小权限原则：给服务主体或Function分配的权限仅够发送事件，不要赋予管理级权限。
• 令牌有效期：Azure AD令牌默认有效期较短（约1小时），MSAL.js会自动刷新，避免长期暴露有效令牌。

内容的提问来源于stack exchange，提问作者Davide