如何在 Azure 和公共托管的 React 应用程序中存储 ClientID 和权限？

Question

我正在开发一个 React 应用程序，并且正在为 PublicClientApplication 配置 msalconfig。我是 Azure 和前端开发的新手。而且我们是一个非常小的团队:(

我的问题： 硬编码 clientID 和权限：我读过多篇文章，表明 clientID 和权限不是秘密，可以直接存储在应用程序中。然而，我对硬编码这些值犹豫不决，因为这似乎有风险。

Azure 应用服务配置：我还了解到 Azure 应用服务在“配置”部分具有连接字符串/应用程序设置。但是，我不确定如何在 React 应用程序的代码中访问或使用这些设置，因为我是 Azure 新手。

我的第一个 Keyvault 注意事项：最初，我考虑通过 Azure Keyvault 检索 clientId 和权限。但要访问 Keyvault，我需要提供一个秘密，但我想避免将任何此类秘密存储在可能会暴露的客户端应用程序中。

问题： 对 clientID 和权限进行硬编码是否安全？有什么安全隐患？

如何从 React 应用程序中的 Azure 应用服务访问连接字符串/应用程序设置？或者我应该使用它们吗？

使用的技术： 反应 维特 Azure 服务

后端就是简单的nodejs

import {Configuration, AccountInfo} from '@azure/msal-browser';

let MSAL_CONFIG: Configuration;

export const setupMSALConfig = async () => {
  MSAL_CONFIG = {
    auth: {
      clientId: import.meta.env.VITE_CLIENT_ID as string,
      authority: import.meta.env.VITE_AUTHORITY as string,
      redirectUri: '/',
    },
    cache: {
      cacheLocation: 'sessionStorage',
      storeAuthStateInCookie: true,
    },
    telemetry: {
      application: {
        appName: 'App',
        appVersion: '1.0.0',
      },
    },
  };
  return MSAL_CONFIG;
};

export type {AccountInfo};

export const loginRequest = {
  scopes: ['openid', 'profile', 'User.Read'],
};

我尝试对其进行硬编码/从密钥保管库获取信息。这可行，但有其缺点。

Answer 1

对 clientID 和权限进行硬编码是否安全？有什么安全隐患？

对任何客户端机密进行硬编码都不是安全的方法，不建议这样做。

可用于存储客户端机密的选项之一是使用

Environment Variables

。

感谢@TechBrij的解释。

• 我们可以使用

  process.env

  后跟变量名称来访问环境变量中的值。

如何从 Azure 应用服务访问连接字符串/应用程序设置

首先，我们需要在已部署的 React 应用程序的环境变量部分设置键值对。

• 上述设置的变量可在环境变量部分 (KUDU) 中找到。

链接到 KUDU -

DeployedAppName.scm.azurewebsites.net

• 现在您可以访问

  ClientID

  as

const clientid = process.env.ClientID;

• 但与使用 Azure 的环境变量相比，

  Key Vault

  是更安全、更好的存储秘密的方式。

但是要访问 Keyvault，我需要提供一个秘密，

我们只需要传递 KVName 和 Secret 名称即可。 无需在客户端应用程序中存储秘密值。