如何在HTML iframe中使用基础认证URL？解决拼接认证信息失效问题

首先得说清楚为啥你直接用user:pass@https://sample.com作为iframe的src不行——现代浏览器出于安全考虑，已经禁止在URL中明文传递基础认证信息了，这种老方法早就失效啦。

那能不能通过JavaScript设置认证头，让iframe直接访问https://sample.com呢？答案是：要看具体场景，而且有几个关键点得注意：

为什么Ajax的认证头无法直接共享给iframe #

Ajax请求和iframe是完全独立的浏览器上下文，你通过Ajax设置的Authorization头不会自动传递给iframe的请求。两者的Cookie池在同源情况下是共享的，但跨域就不行，所以得分情况处理：

方案1：同源/允许跨域场景下，通过Cookie维持认证 #

如果目标网站和你的页面同域，或者目标网站配置了CORS允许你的域名访问，那可以先通过Ajax发送带认证头的请求，让服务器返回认证后的会话Cookie，之后iframe加载目标URL时就会自动带上这个Cookie，无需再带认证信息。

举个代码例子：

// 先发送带基础认证的请求，获取并保存会话Cookie
fetch('https://sample.com', {
  headers: {
    // 把user:pass转成base64格式的认证字符串
    'Authorization': 'Basic ' + btoa('你的用户名:你的密码')
  },
  credentials: 'include' // 必须加上，确保浏览器接收并保存服务器返回的Cookie
})
.then(response => {
  if (response.ok) {
    // 认证成功后创建并加载iframe
    const iframe = document.createElement('iframe');
    iframe.src = 'https://sample.com';
    iframe.style.width = '100%';
    iframe.style.height = '600px';
    document.body.appendChild(iframe);
  } else {
    console.error('基础认证失败，请检查用户名和密码');
  }
})
.catch(err => {
  console.error('请求出错啦:', err);
});

不过这个方案有两个限制：

• 必须满足同源策略，或者目标网站的CORS配置允许你的域名跨域访问（比如返回Access-Control-Allow-Origin: 你的域名）；
• 目标网站必须支持用Cookie维持认证会话——有些基础认证的网站会要求每次请求都带Authorization头，这种情况Cookie就没用了。

方案2：用代理服务器中转（最可靠的跨域方案） #

如果目标网站不允许跨域访问，那上面的Ajax方法就会被浏览器的同源策略拦截。这时候最稳妥的办法是在自己的服务器上做一个代理，由服务器替你带上认证头去请求目标网站，然后iframe访问你的代理地址就行。

比如用Node.js+Express写个简单的代理：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

// 配置代理规则
app.use('/sample-proxy', createProxyMiddleware({
  target: 'https://sample.com',
  changeOrigin: true,
  onProxyReq: (proxyReq, req, res) => {
    // 给代理请求加上基础认证头
    const auth = 'Basic ' + Buffer.from('你的用户名:你的密码').toString('base64');
    proxyReq.setHeader('Authorization', auth);
  }
}));

app.listen(3000, () => {
  console.log('代理服务器运行在 http://localhost:3000');
});

启动代理后，iframe的src就设为http://localhost:3000/sample-proxy，这样浏览器访问的是你自己的服务器，不会有跨域问题，而且认证信息只在你的服务器和目标网站之间传递，更安全。

总结 #

• 直接在URL里拼user:pass的方法已经被浏览器禁用，别再用了；
• 同源/允许跨域时，可以通过Ajax获取Cookie让iframe自动认证；
• 跨域且目标网站不开放CORS时，用代理服务器中转是最可靠的方案。

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