如何安全实现a标签跳转携带token：从原理到最佳实践

1次阅读

共计 1944 个字符，预计需要花费 5 分钟才能阅读完成。

在前后端分离架构中，我们经常需要通过 a 标签进行页面跳转，同时携带身份验证 token。传统的方式是直接将 token 作为 URL 参数传递，例如：

<a href="/dashboard?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."> 进入控制台 </a>

这种方式存在严重的安全隐患：

Referer 泄露 ：当用户从目标页面跳转到其他站点时，浏览器会将完整 URL（包含 token）通过 Referer 头发送
历史记录暴露 ：token 会保留在浏览器历史记录中，可能被恶意软件或共用电脑的其他用户获取
日志记录 ：服务器访问日志会记录完整 URL，增加了 token 泄露风险

通过加密和编码处理 token，降低直接暴露的风险：

使用 Web Crypto API 对 token 进行加密
将加密结果转换为 Base64 编码
添加到 URL 参数时进行 URL 安全编码

// 加密函数示例
async function encryptToken(token, secretKey) {const encoder = new TextEncoder();
  const key = await crypto.subtle.importKey(
    'raw',
    encoder.encode(secretKey),
    {name: 'AES-GCM'},
    false,
    ['encrypt']
  );

  const iv = crypto.getRandomValues(new Uint8Array(12));
  const encrypted = await crypto.subtle.encrypt({name: 'AES-GCM', iv},
    key,
    encoder.encode(token)
  );

  return {iv: btoa(String.fromCharCode(...iv)), 
          data: btoa(String.fromCharCode(...new Uint8Array(encrypted)))};
}

优点：
– 实现简单，兼容性好
– 不需要额外存储

缺点：
– 仍然会在历史记录中留下痕迹
– 需要服务端配合解密

在点击 a 标签时拦截默认行为
将 token 存入 sessionStorage
使用 window.location 进行跳转
目标页面从 sessionStorage 读取 token

React 示例 ：

function SafeLink({to, token, children}) {const handleClick = (e) => {e.preventDefault();
    sessionStorage.setItem('tempAuthToken', token);
    window.location.href = to;
  };

  return <a href={to} onClick={handleClick}>{children}</a>;
}

跨域处理 ：

同域下可直接使用
跨域时需要目标域通过 postMessage 接收 token

sequenceDiagram
  客户端 ->> 服务端: 点击 a 标签访问 /protected
  服务端 ->> 客户端: 302 重定向到 /login?redirect=/protected
  客户端 ->> 认证服务: 携带 cookie 自动认证
  认证服务 ->> 客户端: 302 重定向回 /protected 带一次性 token
  客户端 ->> 服务端: 访问 /protected 带 token 头
  服务端 ->> 客户端: 返回受保护资源

优点：
– token 不会出现在 URL 中
– 适合 SSO 场景

缺点：
– 需要服务端配合
– 实现复杂度较高