소개

Electron에서 애플리케이션을 만들어 보자.

를 참고로, 우선 써 흉내 드리면서 쓰는 방법을 공부하고 있었습니다.

그러나 "앱처럼"

index.js

'use strict';

//electronの読み込みができない
const electron = require('electron');

const remote = electron.remote;
const fileUtil = remote.require('./lib/fileUtil');

//当然ここも動かない
fileUtil.fetchReadmeList(function(err, matches) {
  if(!err) document.write(matches.join());
});

그런데 const electron을로드하지 못했습니다.

개선책

Electron의 메인 프로세스 측면에서

main.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;

app.on('window-all-closed', function() {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('ready', function() {

    // nodeIntegrationをtrueに！！！
    mainWindow = new BrowserWindow({width: 800, height: 600, webPreferences: {
        nodeIntegration: true
        }});
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    mainWindow.on('closed', function() {
        mainWindow = null;
    });
});

nodeIntegration 속성을 true로 설정하면
제대로 HTML로 읽은 index.js에서 require 할 수있었습니다.

왜 잘 움직이지 않았습니까?

잘 작동하지 않는 이유는 Electron의 메커니즘에 있습니다.

프로세스

Electron에는 두 가지 프로세스가 있습니다.
메인 프로세스는 Node.js의 모든 기능을 접할 수 있으며 하나의 프로세스 만 있습니다.
그리고 사용자가 보면 눈으로 볼 수 없습니다.
(보이면 Mac 등에서는 왼쪽 상단의 메뉴 막대에 해당합니다.)

렌더러 프로세스는 Choronium에서 HTML을 읽고 그리는 소위 윈도우 프로세스입니다.
당연히 윈도우는 몇 장이라도 낼 수 있으므로 렌더러 프로세스는 몇 개라도 만들 수 있습니다.
이 렌더러 프로세스는 메인 프로세스에서 생성됩니다.

이 때, 이들 메인 프로세스와 렌더러 프로세스는 각각 별개인 것에 주의해 주세요.

보안

렌더러 프로세스는 사용자가 터치할 수 있습니다.
왜냐하면 평소 자신들이 사용하고 있는 Chrome처럼 화면이 나옵니다.
그리고 키보드로부터의 입력이나 마우스 클릭을 가능하게 합니다.

이러한 성질로부터, 렌더러 프로세스로 유저가 나쁜 조작을 하면
메인 프로세스와 동일한 Node.js의 모든 기능을 만질 수 있습니다.
Node.js는 fs라는 디렉토리 관리 시스템도 가지고 있기 때문에 모든 파일을 삭제합니다! 라는 것도 가능하고 위험합니다.

따라서 Electron version5부터는

    mainWindow = new BrowserWindow({width: 800, height: 600, webPreferences: {
        nodeIntegration: false
        }});

되어 있어, 렌더러 프로세스, HTML측에서는 Node.js의 기능을 일절 사용할 수 없는,
따라서 단지 Chrome에서 사용할 수있는 ECMAJS 밖에 사용할 수 없다는 것입니다.

이, nodeIntegration을 true로 하면, Node.js의 기능도 접하기 때문에 require등을 사용할 수 있습니다.
그러나 보안상의 위험이 있습니다.

참고문헌

htps : // 하고 싶다 l. 코m/쿠에 s치온 s/172094

Electron Webview 보안에 주의해야 할 사항

Electron의 보안은 어렵습니까?

Electron에서 애플리케이션을 만들어 보자.