如何在Angular静态页面中安全使用Azure Application Insights密钥？

首先明确核心事实：Application Insights的客户端连接字符串（或旧版仪表密钥）仅用于发送遥测数据，不具备读取、修改现有数据或访问其他Azure资源的权限，即使被客户端获取，风险也非常有限。但如果需要进一步强化安全，可采用以下方案：

• 使用连接字符串而非仪表密钥
  连接字符串是Azure推荐的客户端配置方式，相比旧版仪表密钥，它内置了对遥测发送目标的限制，且Azure官方设计它就是为了在客户端环境中使用，安全性更适配前端场景。

• 配置IP过滤规则
  在Application Insights资源的“网络”设置中，启用IP允许列表，仅允许你的应用部署环境的IP范围发送遥测数据。这样即使连接字符串被泄露，第三方也无法从其他IP地址向你的Application Insights发送无效数据。

• 通过后端代理转发遥测
  搭建一个轻量后端代理，让Angular客户端将遥测数据发送到自己的后端服务，再由后端转发至Application Insights。客户端代码中不再包含任何Application Insights的连接信息，完全隔离敏感配置。
  示例（Angular中修改遥测端点）：

  import { ApplicationInsights } from '@microsoft/applicationinsights-web';
  
  const appInsights = new ApplicationInsights({
    config: {
      endpointUrl: '/api/telemetry' // 指向你的后端代理接口
    }
  });
  appInsights.loadAppInsights();
  

  后端代理示例（Node.js/Express）：

  const express = require('express');
  const axios = require('axios');
  const app = express();
  app.use(express.json());
  
  const AI_CONNECTION_STRING = process.env.APPINSIGHTS_CONNECTION_STRING;
  const AI_ENDPOINT = 'https://dc.services.visualstudio.com/v2/track';
  
  app.post('/api/telemetry', async (req, res) => {
    try {
      await axios.post(AI_ENDPOINT, req.body, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `InstrumentationKey ${AI_CONNECTION_STRING.split('InstrumentationKey=')[1].split(';')[0]}`
        }
      });
      res.sendStatus(200);
    } catch (err) {
      res.sendStatus(500);
    }
  });
  
  app.listen(3000);
  

• 启用Azure AD认证的客户端遥测
  对于高安全要求的场景，可配置Application Insights使用Azure AD认证客户端。客户端需要先从Azure AD获取访问令牌，再携带令牌发送遥测数据。这种方式可以确保只有经过认证的客户端才能发送数据，但配置步骤相对复杂，适合严格管控的场景。

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