Angular 9 跳转需JWT认证的URL时如何安全携带Token

问题背景 #

在Angular 9项目开发中，最初计划通过以下两种方式跳转至独立托管的业务URL，但出于安全考量，无法接受跳转过程中在地址栏暴露长期有效的JWT Token：

• a标签直接拼接参数跳转：<a href="https://target-domain.com/resource?jwt=xxx">
• 硬编码顶层跳转：window.location.href = "https://target-domain.com/resource?jwt=xxx"

上述将JWT直接拼接到URL查询参数的方案存在明确安全风险，不符合安全规范。当前业务要求为：托管目标资源的独立服务器必须校验请求携带的合法JWT，无有效Token则无法访问对应资源，需要找到既能实现跨站重定向、又不会在地址栏暴露敏感JWT的实现路径。

可行实现方案 #

方案1：隐藏表单POST提交实现跳转 #

这是原生跳转场景下兼容性最强、改造量最小的实现方式，全程不会在地址栏暴露敏感参数：

• 实现逻辑：动态创建一个隐藏的HTML表单，将目标跳转URL设置为表单的action属性，把JWT存入表单的隐藏输入域，指定表单提交方式为POST，触发表单提交后浏览器会自动整页跳转到目标URL，同时将JWT作为POST请求参数携带到目标服务端。
• 适配Angular 9的示例代码：

/**
 * 带Token跳转至目标独立站点
 * @param targetUrl 目标资源地址
 * @param jwtToken 本地存储的有效JWT
 */
redirectWithHiddenForm(targetUrl: string, jwtToken: string): void {
  // 创建临时表单元素
  const tempForm = document.createElement('form');
  tempForm.method = 'POST';
  tempForm.action = targetUrl;

  // 创建隐藏域存储JWT
  const tokenField = document.createElement('input');
  tokenField.type = 'hidden';
  tokenField.name = 'auth_jwt';
  tokenField.value = jwtToken;
  tempForm.appendChild(tokenField);

  // 挂载到页面DOM后触发提交
  document.body.appendChild(tempForm);
  tempForm.submit();
  // 提交完成后清理临时DOM节点，避免页面残留无用元素
  document.body.removeChild(tempForm);
}

• 适配要求：目标服务端需要同步调整身份校验逻辑，支持从POST请求体中读取指定字段的JWT完成校验，无需依赖原URL查询参数的取数规则。

方案2：一次性临时授权码交换跳转 #

如果目标服务端无法调整身份校验逻辑，必须从HTTP请求头中读取JWT完成校验，可以通过临时授权码的中转机制实现，全程不会暴露原始长期有效JWT：

• 实现逻辑：
  • 前端调用自身业务后端接口，将本地存储的有效JWT提交给后端，由后端生成一个有效期1~2分钟、仅支持单次使用的临时授权码，后端存储该临时码与用户有效JWT的映射关系
  • 前端跳转至目标URL时，仅在地址栏携带这个一次性临时授权码（格式类似https://target-domain.com/resource?temp_code=xxx），由于临时码时效极短、单次消费，即使被截获也不会造成实质安全风险
  • 目标服务端收到带临时码的跳转请求后，调用你方的后端校验接口，传入临时码换取对应的有效JWT，完成身份校验后返回对应资源内容
• 优势：完全不需要改动原有的JWT校验规则，跳转过程中地址栏不会出现长期敏感凭证，临时码的泄露风险可以通过极短时效、单次消费的机制完全规避。

方案3：后端302重定向中转 #

• 实现逻辑：前端通过Angular的HttpClient发起接口请求，将有效JWT放在请求头发送给自有业务后端，同时告知后端需要跳转的目标资源地址
• 后端收到请求后，先完成JWT合法性校验，校验通过后直接返回302重定向响应，在响应头中设置目标资源的跳转地址，浏览器收到302响应后会自动完成整页跳转
• 适用限制：这种方式的302跳转本身是不携带自定义请求头的，如果目标服务端要求必须从请求头校验JWT，需要配合上述临时授权码方案结合使用，无法单独适配目标服务端的JWT校验要求。

常见认知误区 #

有开发人员曾尝试在触发window.location.href跳转前，手动为全局window请求配置自定义请求头来携带JWT，这种实现是完全不生效的：

• 浏览器的顶层导航（即直接修改地址栏、触发整页刷新的跳转行为）从安全设计上就禁止前端代码自定义携带的请求头字段
• 所有支持自定义请求头的请求（比如Angular HttpClient发起的XHR/fetch请求）都属于异步接口请求，不会触发整页跳转行为，因此原生整页跳转场景下根本没有办法直接把JWT写入请求头传递到独立目标站点。

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