Sandbox all browser contexts

src/browser/background.js

@@ -1,4 +1,3 @@
-import { ipcRenderer } from 'electron'
 import { h, render } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
 import styled from 'styled-components'
@@ -27,9 +26,7 @@ function App() {
   })
 
   useEffect(() => {
-    ipcRenderer.on('state', (ev, state) => {
+    streamwall.onState(setState)
-      setState(state)
-    })
   }, [])
 
   const { streams } = state

src/browser/layerPreload.js

@@ -0,0 +1,6 @@
+import { ipcRenderer, contextBridge } from 'electron'
+
+contextBridge.exposeInMainWorld('streamwall', {
+  openDevTools: () => ipcRenderer.send('devtools-overlay'),
+  onState: (handler) => ipcRenderer.on('state', (ev, state) => handler(state)),
+})

src/browser/overlay.js

@@ -1,4 +1,3 @@
-import { ipcRenderer } from 'electron'
 import { h, Fragment, render } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
 import { State } from 'xstate'
@@ -84,13 +83,11 @@ function App() {
   })
 
   useEffect(() => {
-    ipcRenderer.on('state', (ev, state) => {
+    streamwall.onState(setState)
-      setState(state)
-    })
   }, [])
 
   useHotkeys('ctrl+shift+i', () => {
-    ipcRenderer.send('devtools-overlay')
+    streamwall.openDevTools()
   })
 
   const { config, views, streams, customStreams } = state

src/node/StreamWindow.js

@@ -1,7 +1,8 @@
+import path from 'path'
 import isEqual from 'lodash/isEqual'
 import intersection from 'lodash/intersection'
 import EventEmitter from 'events'
-import { BrowserView, BrowserWindow, ipcMain } from 'electron'
+import { app, BrowserView, BrowserWindow, ipcMain } from 'electron'
 import { interpret } from 'xstate'
 
 import viewStateMachine from './viewStateMachine'
@@ -68,7 +69,8 @@ export default class StreamWindow extends EventEmitter {
 
     const backgroundView = new BrowserView({
       webPreferences: {
-        nodeIntegration: true,
+        contextIsolation: true,
+        preload: path.join(app.getAppPath(), 'layerPreload.js'),
       },
     })
     win.addBrowserView(backgroundView)
@@ -83,7 +85,8 @@ export default class StreamWindow extends EventEmitter {
 
     const overlayView = new BrowserView({
       webPreferences: {
-        nodeIntegration: true,
+        contextIsolation: true,
+        preload: path.join(app.getAppPath(), 'layerPreload.js'),
       },
     })
     win.addBrowserView(overlayView)
@@ -130,7 +133,6 @@ export default class StreamWindow extends EventEmitter {
         enableRemoteModule: false,
         contextIsolation: true,
         partition: 'persist:session',
-        sandbox: true,
       },
     })
     view.setBackgroundColor(backgroundColor)

src/node/index.js

@@ -403,7 +403,7 @@ async function main() {
 if (require.main === module) {
   app.commandLine.appendSwitch('high-dpi-support', 1)
   app.commandLine.appendSwitch('force-device-scale-factor', 1)
-
+  app.enableSandbox()
   app
     .whenReady()
     .then(main)

webpack.config.js

@@ -80,6 +80,7 @@ const browserConfig = {
   entry: {
     background: './src/browser/background.js',
     overlay: './src/browser/overlay.js',
+    layerPreload: './src/browser/layerPreload.js',
   },
   plugins: [
     new CopyPlugin({