728x90
contextIsolation과 contextBridge에 대해 알아보기
Electorn은 웹 기술을 사용해 데스크탑 앱을 만들 때 사용하는 프레임워크입니다. Electorn에서 보안 및 성능을 강화하기 위해 사용하는 방법 중 하나로 contextIsolation과 contextBridge가 있습니다. 두 기능을 사용함으로써 앱의 메인 프로세스와 랜더러 프로세스 간의 통신 방식을 다루고 보안을 높일 수 있습니다.
1. contextIsolation
contextIsolation은 렌더러 프로세스(웹 페이지)에서 실행되는 JavaScript의 코드가 Electron API에 직접 접근하지 못하도록 격리하는 설정입니다. 이를 통해 웹 페이지의 스크립트가 메인 프로세스나 Node.js 환경에 직접 접근하는 것을 방지할 수 있습니다.
장점
- 보안 강화 : 웹 페이지에서 실행되는 악성 스크립트가 Electron API에 접근하여 시스템을 손상시키는 것을 방지
- 격리된 환경 : 메인 프로세스와 렌더러 프로세스를 격리하여 서로의 영향을 최소화하고 애플리케이션의 안정성을 높임
단점
- 구현 복잡성 증가 : 격리된 환경에서 메인 프로세스와 렌더러 프로세스 간의 통신을 구현하려면 추가적인 설정과 코드가 필요
- 기존 코드 호환성 문제 : contextIsolation을 활성화하면 기존에 Electron API를 직접 호출하던 코드가 동작하지 않을 수 있음
2. contextBridge
contextBridge는 contextIsolation이 활성화된 상태에서도 메인 프로세스와 렌더러 프로세스 간의 안전한 통신을 가능하게 하는 API입니다. 이를 통해 안전하게 특정 API만 노출할 수 있습니다.
장점
- 안전한 통신 : contextBridge를 사용하면 특정 API를 안전하게 노출할 수 있어 보안과 기능을 모두 확보할 수 있음
- 명확한 인터페이스 : 메인 프로세스와 렌더러 프로세스 간의 통신 경로를 명확하게 정의할 수 있어 코드의 가독성과 유지보수성이 향상됨
단점
- 추가적인 코드 작성 필요 : contextBridge를 사용하려면 노출할 API를 정의하고, 이를 설정하는 추가적인 코드가 필요함
- 제한된 기능 노출 : 모든 기능을 노출할 수 없으며, 필요에 따라 적절히 API를 정의하고 관리해야 함
사용 예제
//main.js (메인 프로세스)
const { app, BrowserWindow, ipcMain, contextBridge } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
}
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});//preload.js (프리로드 스크립트)
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electron', {
send: (channel, data) => {
ipcRenderer.send(channel, data);
},
receive: (channel, func) => {
ipcRenderer.on(channel, (event, ...args) => func(...args));
}
});//index.html (렌더러 프로세스)
<!DOCTYPE html>
<html>
<body>
<h1>Hello Electron</h1>
<button id="sendButton">Send Message</button>
<script>
document.getElementById('sendButton').addEventListener('click', () => {
window.electron.send('message', 'Hello from Renderer');
});
window.electron.receive('reply', (data) => {
console.log(data);
});
</script>
</body>
</html>
728x90
'💻 Side project > Web' 카테고리의 다른 글
| [Web] Node.js 라이브러리 Socket.io에 대해 알아보기 (0) | 2024.06.04 |
|---|---|
| [Web] 웹 개발 필수 지식, DOM이란 무엇일까? (0) | 2024.05.20 |
| [Web] 깃허브 리포지토리 삭제 (0) | 2023.06.16 |
| [Web] 구름 ide 깃허브에 업로드 하기 (0) | 2023.06.16 |
| [Web] 색상 조합 추천 사이트 (0) | 2023.06.02 |
댓글