如何通过JavaScript获取iframe中第三方授权返回URL的code参数

由于浏览器跨域安全限制，以及多数第三方授权服务会设置X-Frame-Options禁止嵌入iframe，导致iframe无法获取跳转后的回调URL。以下是两种可行的替代方案：

方案一：使用弹窗(window.open)实现授权与code传递 #

这种方式可以在不离开原页面的情况下完成授权，通过postMessage实现回调页面与父页面的通信。

父页面代码（发起授权） #

// 生成随机state、nonce、code_challenge等参数（保留原有逻辑）
const state = "u7mceUJemzF6UdgFzJFNKiTkfWGfzBGqTpSvA41ZPj0"; // 示例值，实际需随机生成
const nonce = "xxx";
const chal = "xxx";

// 拼接授权URL
const authorizedurl = `https://secure.stitch.money/connect/authorize?client_id=test-abc-dsf-4bfd-8e0d-ec21bec1f2ff&scope=openid accounts balances transactions accountholders client_imageupload client_paymentrequest paymentinitiationrequest client_paymentauthorizationrequest client_refund client_disbursement&response_type=code&redirect_uri=https://localhost:8000/return&state=${state}&nonce=${nonce}&code_challenge=${chal}&code_challenge_method=S256`;

// 打开授权弹窗
const authWindow = window.open(authorizedurl, 'AuthWindow', 'width=600,height=800');

// 监听回调页面发送的消息
window.addEventListener('message', (event) => {
  // 验证消息来源，确保安全
  if (event.origin !== 'https://localhost:8000') return;
  
  if (event.data.type === 'auth_code') {
    const code = event.data.code;
    // 在这里处理获取到的code（比如发送到后端）
    console.log('授权code:', code);
    authWindow.close();
  }
});

回调页面（https://localhost:8000/return）代码 #

// 从URL中提取code参数
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');
const state = urlParams.get('state');

// 可选：验证state是否与父页面生成的一致，防止CSRF攻击
// if (state !== sessionStorage.getItem('auth_state')) return;

// 向父页面发送code
window.opener.postMessage({
  type: 'auth_code',
  code: code
}, window.opener.origin);

// 延迟关闭弹窗，确保消息发送完成
setTimeout(() => window.close(), 500);

方案二：直接页面跳转实现授权 #

如果无法使用弹窗，可以直接跳转到授权URL，授权完成后回到回调页面处理code，再跳回原页面。

原页面代码（发起授权） #

const state = "u7mceUJemzF6UdgFzJFNKiTkfWGfzBGqTpSvA41ZPj0"; // 随机生成
sessionStorage.setItem('auth_state', state); // 存储state用于后续验证

const authorizedurl = `https://secure.stitch.money/connect/authorize?client_id=test-abc-dsf-4bfd-8e0d-ec21bec1f2ff&scope=openid accounts balances transactions accountholders client_imageupload client_paymentrequest paymentinitiationrequest client_paymentauthorizationrequest client_refund client_disbursement&response_type=code&redirect_uri=https://localhost:8000/return&state=${state}&nonce=${nonce}&code_challenge=${chal}&code_challenge_method=S256`;

// 跳转到授权页面
window.location.href = authorizedurl;

回调页面（https://localhost:8000/return）代码 #

const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');
const state = urlParams.get('state');

// 验证state，防止CSRF攻击
if (state !== sessionStorage.getItem('auth_state')) {
  alert('授权验证失败');
  window.location.href = '/error-page';
  return;
}

// 将code发送到后端处理
fetch('/api/process-auth-code', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ code })
})
.then(res => res.json())
.then(() => {
  // 跳回原页面
  window.location.href = '/original-page';
})
.catch(err => {
  console.error('处理code失败:', err);
  window.location.href = '/error-page';
});

关键注意事项 #

• 禁止使用iframe：多数第三方授权服务会设置X-Frame-Options: DENY或SAMEORIGIN，直接禁止嵌入iframe，因此iframe方案本身不可行。
• state参数验证：必须验证回调返回的state与发起授权时生成的state一致，防止CSRF攻击。
• postMessage安全：使用postMessage时必须验证消息来源的origin，避免接收恶意网站的消息。

内容的提问来源于stack exchange，提问作者ANUPAM BEDI CHAWLA