如何在JavaScript中处理密码以避免页面源码暴露？（含MQTT.js场景）

直接在前端代码里硬编码MQTT的用户名和密码，确实会因为源码可被查看而导致泄露，下面是几种安全的处理方式，核心思路是不让前端持有长期有效的固定凭证：

1. 后端中转获取临时凭证 #

浏览器不存固定账号密码，而是先通过已有的用户登录态（比如JWT、session）请求自己的后端接口，后端验证用户身份合法后，返回一个短期有效的临时MQTT凭证（比如临时用户名/密码、一次性token），前端用这个临时凭证去连接MQTT服务器。

前端示例代码： #

// 从后端获取临时MQTT凭证
async function fetchMqttCredentials() {
  const resp = await fetch('/api/mqtt/temp-credentials', {
    method: 'POST',
    headers: {
      // 用用户登录后拿到的身份凭证做校验
      'Authorization': 'Bearer ' + localStorage.getItem('userAuthToken')
    }
  });
  return await resp.json();
}

// 连接MQTT
async function connectToMqtt() {
  const { tempUsername, tempPassword, clientId } = await fetchMqttCredentials();
  // 必须用WSS协议，避免明文传输凭证
  const host = 'wss://your-mqtt-broker.com:8084';
  const topics = ['topic1', 'topic2'];

  const options = {
    keepalive: 60,
    clientId: clientId || `browser-${Math.random().toString(16).slice(2, 10)}`,
    protocolId: 'MQTT',
    protocolVersion: 4,
    clean: false,
    qos: 0,
    reconnectPeriod: 1000,
    connectTimeout: 30000,
    username: tempUsername,
    password: tempPassword
  };

  const client = mqtt.connect(host, options);

  client.on('connect', () => {
    client.subscribe(topics, (err) => {
      if (!err) console.log('订阅成功');
    });
  });
}

// 执行连接
connectToMqtt();

这种方式的好处是，即使临时凭证被泄露，因为有效期短（比如1小时），造成的危害有限；后端可以精准控制每个用户能访问的MQTT主题，实现细粒度权限控制。

2. 用JWT作为MQTT认证凭证 #

如果你的MQTT服务器支持JWT认证（比如EMQX、Mosquitto的官方插件），可以直接用用户登录后拿到的JWT作为MQTT的认证凭证，不需要单独处理密码。

前端示例代码： #

const userJwt = localStorage.getItem('userAuthToken');
const host = 'wss://your-mqtt-broker.com:8084';
const clientId = `browser-${Math.random().toString(16).slice(2, 10)}`;

const options = {
  keepalive: 60,
  clientId: clientId,
  protocolId: 'MQTT',
  protocolVersion: 4,
  clean: false,
  qos: 0,
  reconnectPeriod: 1000,
  connectTimeout: 30000,
  username: 'your-fixed-username', // 部分MQTT服务器需要固定用户名，JWT放password字段
  password: userJwt
};

const client = mqtt.connect(host, options);

MQTT服务器会直接验证JWT的签名和有效期，确认用户身份，前端只需要保存登录时拿到的JWT即可，不需要接触MQTT的固定密码。

核心原则 #

• 绝对不要在前端代码（包括打包后的文件）里硬编码长期有效的MQTT用户名和密码，无论怎么混淆都能被逆向获取。
• 所有敏感凭证的生成和校验都交给后端处理，前端只拿临时或短期有效的凭证。
• 必须使用加密的WSS协议连接MQTT，防止凭证在传输过程中被窃取。

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