如何在Vue.js单页应用浏览器端访问Azure Key Vault存储的Azure Function密钥

浏览器属于完全不可信的运行环境，任何在前端代码中执行Key Vault访问的逻辑本质都存在安全漏洞：你需要先给前端下发访问Key Vault的认证凭证，用户可以直接从浏览器请求日志、本地存储里拿到该凭证，进而自行读取Key Vault内的所有授权密钥，和直接把Azure Function主密钥硬编码在代码里没有本质区别，这也是官方不推荐浏览器端使用@azure/keyvault-secrets的根本原因，属于架构设计层面的风险，没有工具可以规避。

你完全不需要硬编码密钥、也不需要自行编写服务端代码就能实现安全调用，用Azure原生的无代码托管组件即可实现，同时兼容本地测试和Azure生产环境：

方案1：Azure API Management代理（通用性最强） #

所有操作均在Azure门户完成，无需编写额外服务端代码：

• 将需要调用的Azure Function接入Azure API Management（APIM）
• 在APIM的后端配置中，直接把Azure Function的主密钥写死到请求头x-functions-key中，由APIM在转发请求时自动追加，前端全程接触不到密钥
• 配置APIM的CORS规则，把本地测试用的localhost端口、后续生产环境的Vue站点域名加入白名单
• 前端直接调用APIM暴露的公开接口即可，不需要传递任何Function相关的密钥
• 如果需要做访问控制，可以给APIM启用Azure AD认证，前端用MSAL.js登录用户后拿令牌调用即可，权限粒度可以控制到接口级别

方案2：Azure Static Web Apps内置API代理（适合部署到Static Web Apps的场景） #

如果你的Vue应用后续要部署到Azure Static Web Apps，连APIM都不需要额外配置，用自带的路由转发能力即可：

• 在Azure Static Web Apps控制台关联你的Azure Function，配置路由规则将/api/*路径的请求自动转发到目标Function
• Static Web Apps会自动完成和Azure Function的身份校验，自动在后端请求中追加主密钥，前端不需要做任何密钥处理
• 本地测试时直接使用Azure Static Web Apps CLI即可模拟整套转发逻辑，不需要修改前端代码

如果你的业务逻辑强制要求前端获取密钥，只能通过Azure AD的PKCE授权流做用户级权限管控：

• 给Vue应用注册Azure AD单页应用客户端，启用PKCE授权码流
• 给该AD应用分配对应Key Vault的密钥读取权限
• 前端集成MSAL.js引导用户登录，获取到访问令牌后再调用Key Vault接口读取密钥
• 该方案的风险为：所有可以完成登录的用户都能拿到Key Vault的访问凭证，进而自行读取所有授权范围内的密钥，安全等级极低

内容的提问来源于stack exchange，提问作者jack.py