如何突破Chrome嵌入式身份验证限制？技术方案求助

遇到这个问题太常见了——Chrome新版本为了提升安全性，已经完全禁止在URL中嵌入明文的用户名和密码（也就是user:pass@host这种格式），所以直接把带凭证的URL丢给img标签肯定会返回401未授权。下面给你几个实用的解决方案，根据你的场景选择：

1. 后端代理中转（最推荐，安全性最高） #

这是最稳妥的方案，把身份验证逻辑放在后端，前端完全不用接触凭证。思路是：

• 后端写一个代理接口，前端请求这个接口
• 后端内部用安全的方式（比如把凭证存在环境变量里）访问受保护的图片服务器，拿到图片数据后返回给前端
• 前端img标签直接用代理接口的地址

举个Node.js/Express的简单示例：

const express = require('express');
const request = require('request');
const app = express();

// 代理接口
app.get('/proxy-protected-image', (req, res) => {
  const targetImageUrl = 'http://192.0.0.1/path/to/your/image';
  // 从环境变量读取凭证，避免硬编码
  const authOptions = {
    url: targetImageUrl,
    auth: {
      user: process.env.IMAGE_SERVER_USER,
      pass: process.env.IMAGE_SERVER_PASS
    }
  };
  // 把图片流直接转发给前端
  request(authOptions).pipe(res);
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

前端使用方式：

<img src="/proxy-protected-image" alt="Secured Image">

2. 通过Fetch/XMLHttpRequest手动添加Authorization头（需CORS支持） #

如果图片服务器允许跨域请求（配置了CORS），可以前端手动发起请求，带上Basic Auth的请求头，把图片转成Blob后再给img标签使用。

代码示例：

async function loadProtectedImage() {
  // 注意：这里的凭证不要硬编码在前端代码里！最好从后端的安全接口获取临时凭证
  const username = 'admin';
  const password = '123456';
  const base64Credentials = btoa(`${username}:${password}`);

  try {
    const response = await fetch('http://192.0.0.1/path/to/image', {
      headers: {
        'Authorization': `Basic ${base64Credentials}`
      }
    });

    if (!response.ok) throw new Error('Failed to load image');
    
    const blob = await response.blob();
    const imageUrl = URL.createObjectURL(blob);
    
    // 赋值给img标签
    document.getElementById('secured-image').src = imageUrl;
    
    // 页面卸载时记得释放资源
    window.addEventListener('unload', () => {
      URL.revokeObjectURL(imageUrl);
    });
  } catch (err) {
    console.error('Error loading image:', err);
  }
}

// 页面加载时调用
window.addEventListener('load', loadProtectedImage);

⚠️ 注意：这个方案要求图片服务器必须配置CORS，允许你的前端域名跨域请求，并且允许携带Authorization请求头。另外绝对不要在前端代码里硬编码明文凭证，否则会有安全风险。

3. 切换到Cookie-based身份验证（如果能修改服务器配置） #

如果可以调整图片服务器的验证方式，改成Cookie验证会更方便：

• 后端提供一个登录接口，用户输入账号密码后，服务器设置HttpOnly、Secure的Cookie
• 之后前端请求图片时，浏览器会自动携带这个Cookie，img标签可以直接写图片的原始URL：<img src="http://192.0.0.1/path/to/image">

这种方式对前端代码几乎没有侵入性，而且安全性更高（HttpOnly Cookie不会被JS窃取）。

4. 使用Service Worker拦截请求添加凭证（适合多页面场景） #

如果你的项目是多页面应用，不想每个页面都写请求逻辑，可以用Service Worker拦截所有图片请求，自动给目标服务器的请求添加Authorization头。

首先写Service Worker文件（sw.js）：

self.addEventListener('fetch', (event) => {
  const requestUrl = new URL(event.request.url);
  // 匹配图片服务器的域名
  if (requestUrl.host === '192.0.0.1') {
    // 同样，凭证不要硬编码，建议从后端获取后存在Service Worker的缓存里
    const username = 'admin';
    const password = '123456';
    const base64Credentials = btoa(`${username}:${password}`);

    // 创建修改后的请求，添加Authorization头
    const modifiedRequest = new Request(event.request, {
      headers: new Headers({
        ...event.request.headers,
        'Authorization': `Basic ${base64Credentials}`
      })
    });

    // 用修改后的请求发起获取
    event.respondWith(fetch(modifiedRequest));
  }
});

然后在前端注册Service Worker：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      await navigator.serviceWorker.register('/sw.js');
      console.log('Service Worker registered successfully');
    } catch (err) {
      console.error('Service Worker registration failed:', err);
    }
  });
}

⚠️ 注意：Service Worker需要在HTTPS环境下运行（localhost开发环境除外），同样不要在代码里硬编码凭证。

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