在 Electron 中如何限制頁面跳轉(zhuǎn)的域名

Electron 作為一個開放的跨平臺桌面應(yīng)用框架,其中的網(wǎng)頁內(nèi)容也會存在一定的安全風(fēng)險。為了加強應(yīng)用的安全性,我們有時候需要限制 Electron 應(yīng)用中 Web 頁面只能在某些特定域名下進行跳轉(zhuǎn)。本文將介紹在 Electron 中如何通過攔截頁面跳轉(zhuǎn)事件,來實現(xiàn)只允許跳轉(zhuǎn)到指定域名的功能。

為什么需要限制域名跳轉(zhuǎn)

Electron 應(yīng)用中的網(wǎng)頁與普通網(wǎng)頁一樣,都可以通過各種方式進行跨域跳轉(zhuǎn)。這給應(yīng)用帶來一定安全風(fēng)險,可能會導(dǎo)致以下后果:

• 用戶被惡意引導(dǎo)跳轉(zhuǎn)到釣魚網(wǎng)站中

• 跨域資源可獲取用戶敏感信息

• 應(yīng)用功能可以被重定向到未知頁面

因此為了避免這些安全問題,我們有必要限制 Electron 頁面只能跳轉(zhuǎn)到預(yù)設(shè)的特定域名下。

如何實現(xiàn)域名跳轉(zhuǎn)限制

Electron 提供了全面的 API 可用于攔截和驗證頁面跳轉(zhuǎn),我們可以主要利用 webContents 模塊實現(xiàn)跳轉(zhuǎn)驗證:

      
        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(); 
      
      
            }
      
      
          })
      
      
        }
      
    

主要步驟如下:

1. 監(jiān)聽 will-navigate 事件,它會在頁面發(fā)生跳轉(zhuǎn)前被觸發(fā)

2. 檢查跳轉(zhuǎn)目標(biāo) URL 的域名是否在允許名單中

3. 如果不在名單中,調(diào)用 event.preventDefault() 阻止跳轉(zhuǎn)

這樣就可以攔截掉所有非法跳轉(zhuǎn),只允許跳轉(zhuǎn)到特定域名。

跳轉(zhuǎn)驗證的使用場景

跳轉(zhuǎn)驗證可以用于如下場景:

• 業(yè)務(wù)網(wǎng)站只能跳轉(zhuǎn)到自身域名下,不能跳轉(zhuǎn)到隨機站點

• 論壇或社交應(yīng)用只允許跳轉(zhuǎn)到登錄授權(quán)的站點

• 企業(yè)內(nèi)部應(yīng)用限制只能訪問內(nèi)網(wǎng)站點

針對不同場景,我們可以靈活配置 allowedDomains 的域名白名單來實現(xiàn)不同效果。

will-navigate 事件的注意事項

• will-navigate事件會在，頁面window.location對象改變或用戶點擊頁面上的鏈接時，觸發(fā)執(zhí)行。

• 當(dāng)在electron容器中使用webContents.loadURL和webContents.back API時，不會觸發(fā)此事件。

• 頁面內(nèi)部的導(dǎo)航也不會觸發(fā)此事件，例如點擊錨點或更新window.location.hash。如果需要監(jiān)聽頁面內(nèi)導(dǎo)航。如果要監(jiān)聽這些事件，可以使用did-navigate-in-page。

總結(jié)

Electron 提供了豐富的 API 可以攔截和控制頁面跳轉(zhuǎn),開發(fā)者可以利用這一點來加強應(yīng)用的安全性。本文介紹了使用 will-navigate 事件實現(xiàn)域名跳轉(zhuǎn)限制的方法,可以避免惡意跳轉(zhuǎn)帶來的風(fēng)險。在 Electron 開發(fā)中,合理啟用此類安全保護措施是非常必要的。