저는 renderer
프로세스에서 다음과 같이 노드 모듈(이 경우 fs
)을 사용해 보았습니다.
// main_window.js const fs = 요구('fs') 함수 액션() { console.log(fs) }
참고: 그러나 이렇게 하면 다음과 같은 오류가 발생합니다. 이 허용된 답변에서 알 수 있듯이 그리고 효과가 있었습니다! 제 질문은 main_window
에서 버튼을 누르면 action
함수가 호출됩니다.
잡히지 않은 참조 오류: require가 정의되지 않았습니다. main_window.js:1
main_window
매체를 초기화할 때 내 main.js
에 다음 줄을 추가하여 이 문제를 해결할 수 있었습니다. /p> // main.js main_window = 새로운 BrowserWindow({ 폭: 650, 높이: 550, 웹환경설정: { 노드통합: true } })
그러나 문서에 따르면 이는 최선의 방법이 아닙니다. preload.js
파일을 만들고 그 안에 이러한 Node 모듈을 로드한 다음 모든 renderer 코드> 이 과정에서 사용하세요.다음과 같습니다.
main.js
:main_window = new BrowserWindow({ 폭: 650, 높이: 550, 웹환경설정: { 사전 로드: path.join(app.getAppPath(), 'preload.js') } })
preload.js
:const fs = require('fs') window.test = 함수() { console.log(fs) }
main_window.js
:함수 action() { 창.테스트() }
preload.js
에서 renderer
프로세스에 대한 대부분의 코드를 작성해야 한다는 것이 직관에 어긋나는 것이 아닌가 하는 것입니다. preload.js
의 Node 모듈에만 액세스할 수 있으며 각 renderer.js
파일에서 함수를 호출하면 됩니다(예: main_window. Node.js
)? 여기서 내가 이해하지 못하는 것은 무엇입니까?
이 예를 고려해보세요
공식 문서의 모든 내용을 코드 어디에서나 직접 구현할 수 있는 것은 아닙니다. 환경과 프로세스에 대한 간략한 이해가 필요합니다.
컨텍스트 격리 및 노드 통합
contextIsolation
nodeIntegration
假
假
假
true
true
假
true
true
프리로드를 올바르게 사용하는 방법은 무엇입니까?
메인 프로세스와 렌더러 프로세스가 통신하려면 Electron의 IPC(Inter-Process Communication)를 사용해야 합니다.
BrowserWindow.webContents.send() code>
렌더러에 메시지를 보내는 방법ipcMain.handle()
ipcMain.handle()렌더러로부터 메시지를 수신하는 메서드구현예
메인
으아악사전 로드됨
으아악렌더러
으아악Promise를 사용해보시면 어떨까요?
가능한 한 동일한 프로세스/환경에 대한 약속을 유지하세요.main에서의 약속은 계속해서 main에 남아야 합니다.renderer에 대한 여러분의 헌신도 렌더러에 남아 있어야 합니다. 메인 프로그램에서 프리로더, 렌더러로 점프하겠다는 약속을 하지 마세요.
파일 시스템
대부분의 비즈니스 로직은 여전히 메인이나 렌더러 측에 있어야 하지만 사전 로드 상태에 있어서는 안 됩니다. 이는 사전 로딩이 거의 독점적으로 매체로 존재하기 때문입니다. 예압은 매우 작아야 합니다.
OP의 경우,
fs
fs는 마스터 측에서 구현되어야 합니다.2022년에 편집됨
Electron의 역사(Electron 릴리스에서 보안이 어떻게 변경되었는지)와 Electron 개발자가 새 애플리케이션 문서에서 사전 로드를 올바르게 사용하기 위해 취할 수 있는 기타 보안 고려 사항에 대한 더 큰 기사를게시했습니다
. 2020년에 편집됨다른 사용자가 질문한 대로 아래에 내 답변을 설명하겠습니다.
를 사용하여 모든 모듈 주위에 화이트리스트 래퍼를 노출합니다.preload.js
的正确方法是在您的应用可能需要require
Electron에서
을 참조하세요. 이는 애플리케이션이 원격 콘텐츠(많은 애플리케이션이 수행함)를 로드하는 경우 특히 그렇습니다.require
或通过preload.js
中的require
보안 관점에서 호출로 검색된 모든 것을 노출하는 것은 위험합니다. 자세한 이유는 내 댓글이 작업을 올바르게 수행하려면 아래에 자세히 설명된 대로 BrowserWindow
모듈일 수 있는 백엔드의 모든 항목을 검증할 수 있습니다.require
를 사용해야 합니다. 이러한 옵션을 설정하면 Electron 애플리케이션이 IPC(프로세스 간 통신)를 통해 통신하고 두 환경이 서로 격리됩니다. 이와 같이 애플리케이션을 설정하면 클라이언트가 조작하지 않고require
아래에서 제가 말하는 내용과 이것이 앱에서 어떻게 보일지에 대한 간단한 예를 확인하실 수 있습니다. 초보자라면 전자 애플리케이션을 구축할 때 처음부터 이러한 모든 보안 모범 사례를 통합하기 위해
(이 중 제가 저자임)을 사용하는 것이 좋습니다.secure-electron-template
secure-electron-template
이 페이지
에는 preload.js를 사용하여 보안 애플리케이션을 만들 때 필요한 아키텍처에 대한 유용한 정보도 있습니다.main.js
으아악preload.js
으아악index.html
으아악