Electron에서 preload.js를 올바르게 활용하기: 종합 가이드

Question

<p>저는 <code>renderer</code> 프로세스에서 다음과 같이 노드 모듈(이 경우 <code>fs</code>)을 사용해 보았습니다. </p> <pre class="brush:php;toolbar:false;">// main_window.js const fs = 요구('fs') 함수 액션() { console.log(fs) }</pre> <p><sup>참고: <code>main_window</code>에서 버튼을 누르면 <code>action</code> 함수가 호출됩니다.

<p>그러나 이렇게 하면 다음과 같은 오류가 발생합니다. </p> <pre class="brush:php;toolbar:false;">잡히지 않은 참조 오류: require가 정의되지 않았습니다. main_window.js:1</pre> <p>이 허용된 답변에서 알 수 있듯이 <code>main_window</code> 매체를 초기화할 때 내 <code>main.js</code>에 다음 줄을 추가하여 이 문제를 해결할 수 있었습니다. /p> <pre class="brush:php;toolbar:false;">// main.js main_window = 새로운 BrowserWindow({ 폭: 650, 높이: 550, 웹환경설정: { 노드통합: true } })</pre> 그러나 문서에 따르면 이는 최선의 방법이 아닙니다. <code>preload.js</code> 파일을 만들고 그 안에 이러한 Node 모듈을 로드한 다음 모든 <code>renderer</ 코드> 이 과정에서 사용하세요.다음과 같습니다.<p><br /></p> <p><code>main.js</code>:</p> <pre class="brush:php;toolbar:false;">main_window = new BrowserWindow({ 폭: 650, 높이: 550, 웹환경설정: { 사전 로드: path.join(app.getAppPath(), 'preload.js') } })</pre> <p><code>preload.js</code>:</p> <pre class="brush:php;toolbar:false;">const fs = require('fs') window.test = 함수() { console.log(fs) }</pre> <p><code>main_window.js</code>:</p> <pre class="brush:php;toolbar:false;">함수 action() { 창.테스트() }</pre> <p>그리고 효과가 있었습니다! </p> <시간 /> <p>제 질문은 <code>preload.js</code>에서 <code>renderer</code> 프로세스에 대한 대부분의 코드를 작성해야 한다는 것이 직관에 어긋나는 것이 아닌가 하는 것입니다. <code>preload.js</code>의 Node 모듈에만 액세스할 수 있으며 각 <code>renderer.js</code> 파일에서 함수를 호출하면 됩니다(예: <code>main_window. Node.js</code>)? 여기서 내가 이해하지 못하는 것은 무엇입니까? </p>

Answer 1

이 예를 고려해보세요

공식 문서의 모든 내용을 코드 어디에서나 직접 구현할 수 있는 것은 아닙니다. 환경과 프로세스에 대한 간략한 이해가 필요합니다.

환경/프로세스	설명
메인	API는 운영 체제(낮은 수준)에 더 가깝습니다. 여기에는 파일 시스템, 운영 체제 기반 알림 팝업, 작업 표시줄 등이 포함됩니다. 이는 Electron의 핵심 API와 Node.js의 조합을 통해 구현됩니다
사전 로드됨	최근 Appendix 메인 환경에서 사용할 수 있는 강력한 API의 유출을 방지합니다. 자세한 내용은 Electron v12 변경 로그< /a> 및 문제 #23506을 참조하세요.
렌더러	DOM 및 프런트엔드 JavaScript(고급)와 같은 최신 웹 브라우저용 API. 이는 Chromium을 통해 달성됩니다.

컨텍스트 격리 및 노드 통합

장면	contextIsolation	nodeIntegration	비고
A	假	假	미리 로드할 필요가 없습니다. Node.js는 Main에서는 사용할 수 있지만 Renderer에서는 사용할 수 없습니다.
B	假	true	미리 로드할 필요가 없습니다. Node.js는 Main 및 Renderer에서 사용할 수 있습니다.
C	true	假	사전 로딩이 필요합니다. Node.js는 기본 로드 및 사전 로드에서 사용할 수 있지만 렌더러에서는 사용할 수 없습니다. 기본값. 추천.
D	true	true	사전 로드가 필요합니다. Node.js는 Main, Preload 및 Renderer에서 사용할 수 있습니다.

프리로드를 올바르게 사용하는 방법은 무엇입니까?

메인 프로세스와 렌더러 프로세스가 통신하려면 Electron의 IPC(Inter-Process Communication)를 사용해야 합니다.

1. main 프로세스에서 다음을 사용하세요.
   • BrowserWindow.webContents.send() 렌더러에 메시지를 보내는 방법
   • ipcMain.handle()ipcMain.handle() 렌더러로부터 메시지를 수신하는 메서드
2. 사전 로드 프로세스에서 사용자 정의 엔드포인트를 렌더러 프로세스에 노출합니다.
3. renderer 프로세스에서 공개 사용자 정의 엔드포인트를 사용하여 다음을 수행합니다.
   • 메인으로 메시지 보내기
   • 메인에서 메시지 받기

구현예

메인

으아악

사전 로드됨

으아악

렌더러

으아악

Promise를 사용해보시면 어떨까요?

가능한 한 동일한 프로세스/환경에 대한 약속을 유지하세요. main에서의 약속은 계속해서 main에 남아야 합니다. renderer에 대한 여러분의 헌신도 렌더러에 남아 있어야 합니다. 메인 프로그램에서 프리로더, 렌더러로 점프하겠다는 약속을 하지 마세요.

파일 시스템

대부분의 비즈니스 로직은 여전히 ​​메인이나 렌더러 측에 있어야 하지만 사전 로드 상태에 있어서는 안 됩니다. 이는 사전 로딩이 거의 독점적으로 매체로 존재하기 때문입니다. 예압은 매우 작아야 합니다.

OP의 경우 , fs fs는 마스터 측에서 구현되어야 합니다.

Answer 2

2022년에 편집됨

---

Electron의 역사(Electron 릴리스에서 보안이 어떻게 변경되었는지)와 Electron 개발자가 새 애플리케이션 문서에서 사전 로드를 올바르게 사용하기 위해 취할 수 있는 기타 보안 고려 사항에 대한 더 큰 기사를 게시했습니다

.

2020년에 편집됨

---

다른 사용자가 질문한 대로 아래에 내 답변을 설명하겠습니다.

preload.js 的正确方法是在您的应用可能需要 requireElectron에서

를 사용하여 모든 모듈 주위에 화이트리스트 래퍼를 노출합니다.

require 或通过 preload.js 中的 require보안 관점에서 호출로 검색된 모든 것을 < a href="https://github.com/electron/ Electron/issues/9920#issuecomment-575839738" rel="noreferrer">노출하는 것은 위험합니다. 자세한 이유는 내 댓글

을 참조하세요. 이는 애플리케이션이 원격 콘텐츠(많은 애플리케이션이 수행함)를 로드하는 경우 특히 그렇습니다.

이 작업을 올바르게 수행하려면 아래에 자세히 설명된 대로 < 上启用许多选项code>BrowserWindowrequire를 사용해야 합니다. 이러한 옵션을 설정하면 Electron 애플리케이션이 IPC(프로세스 간 통신)를 통해 통신하고 두 환경이 서로 격리됩니다. 이와 같이 애플리케이션을 설정하면 클라이언트가 조작하지 않고 require

모듈일 수 있는 백엔드의 모든 항목을 검증할 수 있습니다.

아래에서 제가 말하는 내용과 이것이 앱에서 어떻게 보일지에 대한 간단한 예를 확인하실 수 있습니다. 초보자라면 전자 애플리케이션을 구축할 때 처음부터 이러한 모든 보안 모범 사례를 통합하기 위해 secure-electron-templatesecure-electron-template< /a>

(이 중 제가 저자임)을 사용하는 것이 좋습니다.

이 페이지

에는 preload.js를 사용하여 보안 애플리케이션을 만들 때 필요한 아키텍처에 대한 유용한 정보도 있습니다.

---

main.js

으아악 preload.js

으아악 index.html

🎜 으아악