Electron 앱 보안

작성자Andres Acevedo

previous article 에서 기능에 초점을 맞추되 보안 및 플랫폼별 기능과 같은 일부 측면은 제쳐두고 유용한 Electron 앱을 만드는 방법을 살펴보았습니다.

이 기사에서는 프로토타입에서 실제 응용 프로그램으로의 경로를 진행하기 위해 우리가 떠난 곳에서 계속할 것입니다!

비유로 시작하고 싶습니다. 의료 연구에는 중요한 라틴어 격언이 있습니다. Primum non nocere는 다음을 의미합니다.
"먼저 해를 끼치 지 마십시오". 또 다른 표현은 "기존의 문제를 감안할 때, 득보다 실이 더 많은 위험을 감수하는 것보다 무언가를 하지 않거나 심지어 아무것도 하지 않는 것이 더 나을 수 있다"는 것입니다.

고객에게 보안 문제를 도입하는 경우 예쁜 소프트웨어에 새 기능을 추가하기 전에 약간 돌아가서 이러한 취약성을 해결하는 것이 가장 좋습니다.

경고에 따라 작업

그렇다면 우리 앱은 안전한가요? npx electron 로 실행하면 . 개발자 도구(View>Toggle Developer Tools)를 열면 콘솔에서 몇 가지 보안 경고를 표시하는 것을 볼 수 있습니다.



앱의 보안을 향상시키는 쉬운 방법 중 하나는 index.html 파일에 특수 메타 헤더를 ​​추가하는 것입니다.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

이는 Chromium 렌더링 엔진이 로컬 스크립트만 실행하도록 지시합니다.

다음과 같은 방법으로 다른 허용된 도메인을 추가할 수도 있습니다.

Content-Security-Policy: script-src 'self' https://apis.example.com

CSP에 대해 자세히 알아보려면 다음을 확인하세요.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

해당 행을 웹 사이트의 헤더 섹션에 추가하고 앱을 새로 고치면(View > Reload) 보안 경고가 하나만 남습니다.



이 보안 경고를 제거하려면 main.js 파일을 수정하고 webPreference 호출에 다음BrowserWindow을 추가해야 합니다.

webPreferences: {
            worldSafeExecuteJavaScript: true,
            contextIsolation: true
}

이것이 하는 일은 Renderer World(Chromium 렌더러)와 Node World 사이를 격리하는 것입니다. 이것은 렌더러에서 실행되는 모든 악성 코드를 샌드박스화하여 악용된 취약점으로 인한 피해를 줄입니다.

코드를 추가하면 보기를 다시 로드하는 것만으로는 충분하지 않습니다. main.js 파일에서 변경한 것처럼 Electron App을 종료하고 npx electron를 사용하여 다시 시작해야 합니다.

Good news: we got rid of the warning.

Bad news: now we have an actual error and our app does not work anymore

코드 수정

Require는 노드 기능이며 전자가 renderer와 노드 세계를 분리하도록 구성했기 때문에 require() 파일에서 renderer.js를 사용할 수 없습니다.nodeIntegration: true 설정이 있더라도.
실제로 해당 설정을 제거하면 BrowserWindow 호출main.js이 이제 다음과 같이 표시됩니다.

const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      worldSafeExecuteJavaScript: true,
      contextIsolation: true,
    }
  })

Electron provides us with a way to use node functions in the renderer world: Preload scripts.

webPreferences 호출에서 BrowserWindow 에 다음 줄을 추가합니다.

preload: path.join(app.getAppPath(), 'preload.js')

다음과 같아야 합니다.

const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      worldSafeExecuteJavaScript: true,
      contextIsolation: true,
      preload: path.join(app.getAppPath(), 'preload.js')
    }
  })

main.js의 시작 부분에 경로 모듈을 포함하는 것을 잊지 마십시오.

const path = require('path');

이제 main.js 파일을 만들고 다음을 작성해 보겠습니다.

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld(
    "electron",
    {
        ipcRenderer: ipcRenderer
    }
);

첫 번째 줄에서 볼 수 있듯이 preload.js를 가져오기 위해 문제 없이 require()의 preload.js 함수를 사용할 수 있습니다.

이제 ipcRenderer 파일에서 오류를 일으키는 require 줄을 제거합니다.

const { ipcRenderer } = require('electron');

더 이상 renderer.js을 요구하지 않기 때문에 이전과 같은 방식으로 계속 사용할 수 없습니다.
하지만 이때 ipcRenderer에 추가한 contextBridge.exposeInMainWorld 함수가 유용합니다.
우리의 preload.js는 ipcRenderer를 사용하여 rendered.js 파일에서 액세스할 수 있습니다.

따라서 이제 다음과 같아야 합니다.

async function fileSelected(e){    
    const loadedFilePath = e.target.files[0]?.path
    let data = await window.electron.ipcRenderer.invoke('read-file', loadedFilePath)
    document.getElementById("loadedText").value = data
}
document.getElementById("fileLoader").addEventListener("change", fileSelected);

결과:



우리가 해냈어! 저희 앱은 보안 경고 없이 다시 작동합니다!

다음 리포지토리에서 보안 텍스트 로더의 코드를 찾을 수 있습니다.
https://github.com/mran3/Secure-Text-File-Loader/