解决Electron中WebView加载部分HTTPS页面白屏的方法

Electron是一个开源的桌面应用程序框架，它允许使用Web技术构建跨平台的桌面应用。在Electron应用中，WebView 是一个常用的组件，用于嵌套加载Web内容。然而，有时候在加载使用 HTTPS 协议的页面时，可能会因为证书问题导致白屏现象。

问题描述：

当 WebView 尝试加载某些HTTPS页面时，如果页面的证书存在问题，Electron可能无法正确处理，导致WebView显示空白页面。

解决方法：

为了解决这个问题，使用 commandLine 的能力给 Chromium 中添加一个命令行开关（即调用Chromium能力）。通过 Chromium 的命令行开关来忽略证书错误，使 WebView 加载页面时不再受到证书的限制。在Electron中，可以使用以下方法添加 Chromium 命令行开关：

app.commandLine.appendSwitch('--ignore-certificate-errors', 'true'); 1 这一行代码将告诉Chromium在加载页面时忽略证书错误，从而避免白屏问题。

实施步骤：

在Electron应用的主进程代码中找到创建BrowserWindow的地方，通常在main.js或index.js文件中。

导入Electron的app模块：

const { app, BrowserWindow } = require('electron');
1
在创建BrowserWindow的代码之前，添加以下命令：
app.commandLine.appendSwitch('--ignore-certificate-errors', 'true');
1
完整示例：
const { app, BrowserWindow } = require('electron');
app.commandLine.appendSwitch('--ignore-certificate-errors', 'true');
app.whenReady().then(() => {
const mainWindow = new BrowserWindow();
// 其他窗口配置...
});
1
2
3
4
5
6
7
8
重新运行你的 Electron 应用，WebView 应该能够加载那些存在证书问题的 HTTPS 页面而不再显示白屏。

注意事项：

忽略证书错误可能存在一定的安全风险，因此在生产环境中谨慎使用此方法。确保你了解并理解潜在的安全风险，并在必要时采取其他更安全的解决方案。 仅当你确定某些HTTPS页面的证书问题是临时性的、不可避免的，且你对这些页面的信任程度高时，才考虑使用此方法。 结论：

通过在 Electron 应用中添加 Chromium 的命令行开关，可以解决 WebView 加载部分 HTTPS 页面时出现的白屏问题。然而，开启证书错误忽略可能存在一定的风险，因此在使用时务必慎重考虑，并确保在必要时采取其他更安全的解决方案。