在 Electron 中如何限制页面跳转的域名-技术圈

Electron 作为一个开放的跨平台桌面应用框架,其中的网页内容也会存在一定的安全风险。为了加强应用的安全性,我们有时候需要限制 Electron 应用中 Web 页面只能在某些特定域名下进行跳转。本文将介绍在 Electron 中如何通过拦截页面跳转事件,来实现只允许跳转到指定域名的功能。

为什么需要限制域名跳转

Electron 应用中的网页与普通网页一样,都可以通过各种方式进行跨域跳转。这给应用带来一定安全风险,可能会导致以下后果:

用户被恶意引导跳转到钓鱼网站中
跨域资源可获取用户敏感信息
应用功能可以被重定向到未知页面

因此为了避免这些安全问题,我们有必要限制 Electron 页面只能跳转到预设的特定域名下。

如何实现域名跳转限制

Electron 提供了全面的 API 可用于拦截和验证页面跳转,我们可以主要利用 webContents 模块实现跳转验证:

      
        const {BrowserWindow} = require('electron') 
      
      
        const allowedDomains = ['www.example.com'];
      
      
        
          

      
      
        function createWindow () {
      
      
          const win = new BrowserWindow()
      
      
        
          

      
      
          win.webContents.on('will-navigate', (event, url) => {
      
      
            const parsedUrl = new URL(url);
      
      
            if(!allowedDomains.includes(parsedUrl.hostname)) {
      
      
               event.preventDefault(); 
      
      
            }
      
      
          })
      
      
        }

主要步骤如下:

监听 will-navigate 事件,它会在页面发生跳转前被触发
检查跳转目标 URL 的域名是否在允许名单中
如果不在名单中,调用 event.preventDefault() 阻止跳转

这样就可以拦截掉所有非法跳转,只允许跳转到特定域名。

跳转验证的使用场景

跳转验证可以用于如下场景:

业务网站只能跳转到自身域名下,不能跳转到随机站点
论坛或社交应用只允许跳转到登录授权的站点
企业内部应用限制只能访问内网站点

针对不同场景,我们可以灵活配置 allowedDomains 的域名白名单来实现不同效果。

will-navigate 事件的注意事项

will-navigate事件会在，页面window.location对象改变或用户点击页面上的链接时，触发执行。
当在electron容器中使用webContents.loadURL和webContents.back API时，不会触发此事件。
页面内部的导航也不会触发此事件，例如点击锚点或更新window.location.hash。如果需要监听页面内导航。如果要监听这些事件，可以使用did-navigate-in-page。

总结

Electron 提供了丰富的 API 可以拦截和控制页面跳转,开发者可以利用这一点来加强应用的安全性。本文介绍了使用 will-navigate 事件实现域名跳转限制的方法,可以避免恶意跳转带来的风险。在 Electron 开发中,合理启用此类安全保护措施是非常必要的。