关于#ar#的问题：使用electron37.5 + vue3 + ts 开发的简单浏览器，访问有 cloudflare 真人验证的网站时(语言-javascript)

Question

使用electron37.5 + vue3 + ts 开发的简单浏览器，访问有 cloudflare 真人验证的网站时，无法通过验证，有办法解决吗 ？

Answer 1

让 “紫雾凌寒” 来帮你回答,本回答结合 DeepSeek

如果还有问题，请评论或点击头像私信，如果有帮助到您, 请关注、采纳、点赞

1. 问题关键点分析

Cloudflare真人验证（人机验证）依赖浏览器指纹识别，而Electron默认的Chromium环境与普通浏览器存在以下差异，导致验证失败：
- 默认User-Agent包含Electron标识
- navigator.webdriver为true（机器人特征）
- 缺少真实浏览器的plugins、mimeTypes等属性
- canvas、WebGL指纹与普通浏览器不同
- 会话（Session）默认隔离或未持久化

2. 解决方案（按优先级）

方案1：基础环境模拟（必做）

核心：修改Electron默认属性，匹配真实Chrome

主进程配置（main.ts）

import { app, BrowserWindow, session } from 'electron';

function createWindow() {
  // 1. 匹配Electron 37.5对应的Chromium版本（126.0.6478.126）
  const CHROME_UA = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.6478.126 Safari/537.36';

  const mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      // 禁用Electron特定标识
      nodeIntegration: false,
      contextIsolation: true,
      // 模拟真实浏览器属性
      userAgent: CHROME_UA,
      plugins: true, // 启用插件（部分验证需要）
      webgl: true,
      canvasReadoutEnabled: true,
      experimentalFeatures: false, // 禁用实验特性
      // 持久化会话（保留Cookie/Storage）
      session: session.fromPartition('persist:browser'),
      // 允许混合内容（http/https共存）
      allowRunningInsecureContent: true,
    },
  });

  // 2. 开启GPU加速（模拟真实浏览器渲染）
  app.commandLine.appendSwitch('enable-gpu');
  app.commandLine.appendSwitch('ignore-gpu-blocklist');

  mainWindow.loadURL('https://目标网站.com');
}

app.whenReady().then(createWindow);

渲染进程模拟（Vue组件mounted钩子）

import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  setup() {
    onMounted(() => {
      // 3. 隐藏机器人特征
      Object.defineProperty(navigator, 'webdriver', { get: () => false });

      // 4. 模拟真实浏览器的plugins/mimeTypes
      Object.defineProperty(navigator, 'plugins', {
        get: () => [
          { name: 'Chrome PDF Viewer', filename: 'pdfium.dll', description: 'Portable Document Format' },
          { name: 'Widevine Content Decryption Module', filename: 'widevinecdm.dll', description: 'Widevine Content Decryption' },
        ],
      });

      Object.defineProperty(navigator, 'mimeTypes', {
        get: () => [
          { type: 'application/pdf', suffixes: 'pdf', description: 'Portable Document Format' },
          { type: 'application/x-www-form-urlencoded', suffixes: '', description: '' },
        ],
      });

      // 5. 模拟语言环境
      navigator.language = 'zh-CN';
      navigator.languages = ['zh-CN', 'zh'];
    });
    return {};
  },
});

方案2：使用electron-fingerprint插件（进阶）

作用：修改canvas、WebGL、audio指纹，完全模拟真实浏览器

安装依赖

npm install electron-fingerprint --save-dev

主进程配置

import { fingerprint } from 'electron-fingerprint';

// 在createWindow中调用（窗口加载URL前）
fingerprint(mainWindow, {
  browser: 'Chrome',
  version: '126.0.6478.126',
  platform: 'Windows',
  arch: 'x64',
  // 可选：自定义指纹哈希（保持稳定）
  canvas: '0x12345678',
  webgl: '0xabcdef12',
  audio: '0x98765432',
});

方案3：手动处理Cookie与会话（辅助）

Cloudflare验证依赖Cookie，需确保会话持久化：

// 主进程中设置Cookie（可选）
session.defaultSession.cookies.set({
  url: 'https://目标网站.com',
  name: 'cf_clearance',
  value: 'xxx', // 需从真实浏览器获取（仅测试用）
  domain: '目标网站.com',
  path: '/',
  secure: true,
  httpOnly: true,
});

3. 各方案优缺点对比

方案	优点	缺点
基础环境模拟	无需依赖，快速实现	仅解决表面差异，复杂验证可能失效
electron-fingerprint	全面模拟指纹，通过率高	依赖第三方包，需匹配Electron版本
手动Cookie处理	针对性解决Cookie丢失问题	需手动维护Cookie，安全性低（测试用）

4. 总结

1. 优先实现方案1：修改基础属性（UA、webdriver、plugins），这是最基础且有效的步骤；
2. 进阶使用方案2：若仍无法通过，添加electron-fingerprint修改指纹；
3. 注意事项：
   - 定期更新Chromium版本对应的UA；
   - Cloudflare验证机制会迭代，需跟踪最新特征；
   - 避免禁用contextIsolation等安全配置，防止漏洞；
4. 排查技巧：对比真实Chrome与Electron的navigator属性，逐一消除差异。

通过以上步骤，可大幅提升Cloudflare验证的通过率，实现类似普通浏览器的访问体验。

希望以上解答对您有所帮助。如果您有任何疑问，欢迎在评论区提出。