Electron应用能否实现URL白名单过滤 仅允许指定主URL访问

该需求可以完全在Electron生态内实现，核心是通过拦截<webview>的全量导航类事件，对跳转目标做白名单校验，非白名单地址直接拦截并重定向回指定主URL。

现有代码的逻辑问题 #

当前main.js中存在冗余逻辑：主窗口额外调用了mainWindow.webContents.loadURL('https://www.google.com')，会直接让主窗口加载远程Google页面，覆盖原本加载的嵌入webview的本地index.html，需要先删除这段无效代码。

具体实现步骤 #

1. 配置白名单规则 #

首先定义两类核心配置：

• 白名单校验规则：支持按域名匹配、全URL精确匹配等多种方式，按需调整
• 主URL：非白名单跳转触发后，强制回跳的目标地址

2. 拦截webview全量导航场景 #

针对webview的所有跳转触发场景做事件绑定，避免漏拦：

• will-navigate：拦截页面内主动触发的导航（链接点击、JS修改location、表单提交）
• will-redirect：拦截服务端302重定向、JS触发的软重定向跳转
• new-window：拦截target="_blank"类型的新窗口打开请求

3. 修改后的核心代码 #

调整后的index.html脚本部分

原script块替换为如下逻辑：

<script>
onload = () => {
  const webview = document.querySelector('webview')
  // 基础配置，按需修改为自己的白名单和主地址
  const ALLOWED_ORIGIN = 'https://www.google.com'
  const MAIN_URL = 'https://www.google.com'

  // 拦截主动导航跳转
  webview.addEventListener('will-navigate', (e) => {
    const targetUrl = new URL(e.url)
    const isAllowed = targetUrl.origin === new URL(ALLOWED_ORIGIN).origin
    if (!isAllowed) {
      e.preventDefault()
      webview.loadURL(MAIN_URL)
    }
  })

  // 拦截重定向跳转
  webview.addEventListener('will-redirect', (e) => {
    const targetUrl = new URL(e.url)
    const isAllowed = targetUrl.origin === new URL(ALLOWED_ORIGIN).origin
    if (!isAllowed) {
      e.preventDefault()
      webview.loadURL(MAIN_URL)
    }
  })

  // 拦截新窗口打开请求
  webview.addEventListener('new-window', (e) => {
    const targetUrl = new URL(e.url)
    const isAllowed = targetUrl.origin === new URL(ALLOWED_ORIGIN).origin
    if (!isAllowed) {
      e.preventDefault()
      webview.loadURL(MAIN_URL)
    }
  })
}
</script>

调整后的main.js

删除冗余的远程URL加载逻辑，最终完整代码为：

const {app, BrowserWindow} = require('electron')

let mainWindow

function createWindow () {
    mainWindow = new BrowserWindow({
        webPreferences: {
            webViewTag: true
        },
        width: 1024, 
        height: 576,
    })

    mainWindow.loadFile('index.html')
    
    mainWindow.on('closed', function () {
        mainWindow = null
    })
}

app.on('ready', createWindow)

自定义调整说明 #

• 如需做全URL精确匹配：把校验逻辑改为e.url === ALLOWED_ORIGIN，只允许加载完全一致的主URL，不允许同域其他路径跳转
• 如需配置多域名白名单：把ALLOWED_ORIGIN改为数组形式，遍历判断目标URL的origin是否存在于数组中即可
• 事件失效排查：如果绑定的事件没有触发，检查BrowserWindow的webPreferences配置，确保没有禁用webview的脚本通信能力

内容的提问来源于stack exchange，提问作者Mikhail A.