跨域场景下从App1向新标签页的App2安全传递JWT的方案咨询

方案一：PostMessage + 中转页面 #

这是安全兼容性俱佳的方案，利用浏览器postMessageAPI在同源页面间安全传递数据，规避URL暴露与CORS限制：

1. App1 侧实现：
   打开App2的中转页面，待页面加载完成后定向发送JWT（必须验证目标域名）：

// App1代码
const transferWindow = window.open('https://app2.com/auth-transfer');

transferWindow.addEventListener('load', () => {
  transferWindow.postMessage(
    { type: 'AUTH_JWT', token: '你的JWT令牌' },
    'https://app2.com' // 严格指定目标域名，防止恶意接收
  );
});

2. App2 中转页（auth-transfer.html）实现：
   监听message事件，验证消息来源为信任的App1域名，将JWT存入localStorage后跳转至主页面：

// App2中转页代码
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://app1.com') return;
  
  if (event.data.type === 'AUTH_JWT') {
    localStorage.setItem('auth_token', event.data.token);
    window.location.href = 'https://app2.com/main';
  }
});

方案二：跨域Cookie配置（适合同主域子域名或信任域名场景） #

若两个应用属于同主域的子域名（如app1.example.com和app2.example.com），可通过Cookie配置实现无感知传递：

1. App1 获取JWT后：
   请求App2的专属接口，触发App2设置携带JWT的Cookie：

// App1代码
fetch('https://app2.com/set-auth-cookie', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + 你的JWT令牌
  },
  credentials: 'include' // 允许携带跨域凭证
}).then(() => {
  window.open('https://app2.com/main');
});

2. App2 配置与处理：

• 服务器端设置Cookie时，指定Domain=.example.com（主域名）、SameSite=None、Secure、HttpOnly=false（需存入localStorage则不能设HttpOnly）
• 主页面加载时读取Cookie并存入localStorage：

// App2主页面代码
const token = document.cookie.split('; ').find(row => row.startsWith('auth_token='))?.split('=')[1];
if (token) {
  localStorage.setItem('auth_token', token);
  // 可选：清除Cookie避免重复存储
  document.cookie = 'auth_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.example.com;';
}

方案三：POST表单跳转（无URL暴露） #

通过隐藏表单POST提交JWT到App2的处理页面，完成存储后跳转，避免URL参数泄露：

1. App1 侧创建隐藏表单并提交：

// App1代码
const form = document.createElement('form');
form.method = 'POST';
form.action = 'https://app2.com/receive-token';
form.target = '_blank';

const input = document.createElement('input');
input.type = 'hidden';
input.name = 'auth_token';
input.value = '你的JWT令牌';
form.appendChild(input);

document.body.appendChild(form);
form.submit();
document.body.removeChild(form);

2. App2 接收页面（receive-token）处理：
   服务器端读取POST参数中的JWT，注入页面脚本写入localStorage后跳转主页面：

<!-- App2 receive-token页面 -->
<script>
  // 假设服务器已将JWT渲染到页面
  const token = '<%= 服务器传递的JWT %>';
  localStorage.setItem('auth_token', token);
  window.location.href = '/main';
</script>

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