基于React、API Gateway与Cognito的访问令牌安全存储方案问询

核心场景 #

技术栈为部署在S3的React应用 + API Gateway + Lambda，使用amazon-cognito-identity-js替代AWS Amplify，需解决Cognito颁发的Access Token存储问题，要求兼顾安全、简洁、低依赖。

令牌存储方案分析与推荐 #

各存储选项优劣复盘 #

• 内存存储：安全性最低，页面刷新/跳转后令牌丢失，用户需重新登录，仅适合临时会话，不推荐生产环境。
• 会话Storage（sessionStorage）：安全性中等，仅当前会话窗口有效，关闭即清除，但易遭XSS攻击窃取令牌，且无法跨标签页共享登录状态。
• Cookie（HttpOnly + Secure + SameSite）：安全性最高，是生产级场景的首选方案，以下为详细配置与实现要点：

推荐方案：HttpOnly Secure Cookie存储 #

选型理由

• XSS防护：HttpOnly标记的Cookie无法通过JavaScript访问，从根源避免XSS攻击窃取令牌。
• 传输安全：Secure标记确保Cookie仅通过HTTPS传输，防止明文泄露。
• 攻击防护与兼容：SameSite=Strict/Lax可抵御CSRF攻击，同时支持同域名下跨标签页共享登录状态；所有现代浏览器（Chrome、Firefox、Safari、Edge）均支持这些Cookie属性，兼容性无问题。

极简实现步骤

1. Cognito认证获取令牌
   使用amazon-cognito-identity-js完成登录流程，获取accessToken：

const { CognitoUserPool, CognitoUser, AuthenticationDetails } = require('amazon-cognito-identity-js');

const poolData = {
  UserPoolId: '你的用户池ID',
  ClientId: '你的应用客户端ID'
};
const userPool = new CognitoUserPool(poolData);

const authDetails = new AuthenticationDetails({
  Username: '用户账号',
  Password: '用户密码'
});

const cognitoUser = new CognitoUser({
  Username: '用户账号',
  Pool: userPool
});

cognitoUser.authenticateUser(authDetails, {
  onSuccess: (result) => {
    const accessToken = result.getAccessToken().getJwtToken();
    // 将令牌发送至Lambda接口设置HttpOnly Cookie
    fetch('/your-lambda-endpoint', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ accessToken })
    });
  },
  onFailure: (err) => {
    console.error('认证失败', err);
  }
});

2. Lambda中设置HttpOnly Cookie
   前端无法直接设置HttpOnly Cookie，需通过Lambda接口处理：

exports.handler = async (event) => {
  const { accessToken } = JSON.parse(event.body);
  return {
    statusCode: 200,
    headers: {
      'Set-Cookie': `accessToken=${accessToken}; HttpOnly; Secure; SameSite=Strict; Max-Age=3600; Path=/`,
      'Access-Control-Allow-Origin': 'https://你的S3域名',
      'Access-Control-Allow-Credentials': true
    },
    body: JSON.stringify({ message: 'Cookie设置成功' })
  };
};

3. API Gateway配置验证
   在API Gateway中启用Cognito授权，配置为从Cookie中提取accessToken进行验证，确保接口仅接受合法令牌请求。

折中方案：Session Storage + 强化XSS防护（适合无需跨标签页场景） #

若不想依赖后端设置Cookie，可选择Session Storage，但需严格做XSS防护：

• 启用React严格模式，避免危险DOM操作。
• 对所有用户输入做转义处理。
• 配置内容安全策略（CSP）限制脚本来源。
• 示例代码：

// 登录成功后存入sessionStorage
cognitoUser.authenticateUser(authDetails, {
  onSuccess: (result) => {
    const accessToken = result.getAccessToken().getJwtToken();
    sessionStorage.setItem('accessToken', accessToken);
  }
});

// 请求API时携带令牌
fetch('/api/your-endpoint', {
  headers: {
    'Authorization': `Bearer ${sessionStorage.getItem('accessToken')}`
  }
});

此方案仍存在XSS风险，仅适合对安全性要求较低的场景。

总结 #

生产环境优先选用HttpOnly + Secure + SameSite Cookie方案，虽需Lambda协助配置，但安全性最高、浏览器兼容性好；若追求极致简洁且能接受一定风险，可采用Session Storage配合严格XSS防护措施。

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