feat: use contextBridge in favour of requiring nodeIntegration (#300)

* feat: use contextBridge in favour of requiring nodeIntegration

Due to security concerns related to usage of nodeIntegration flag, according to best electron practices, renderer functions should be exposed with contextBridge. This PR does exactly that. It also changes a bit API to accomodate for this feature

* feat: fixing issues with test enviroment

* fix: add missing  preventDoubleInitialization() check

* change the scope of the contextBridge bindings to only expose high level API

examples/basic/src/main/index.ts

@@ -1,9 +1,10 @@
 import url from 'url'
 import { app, BrowserWindow } from 'electron'
-import { stateSyncEnhancer } from 'electron-redux'
+import { stateSyncEnhancer } from 'electron-redux/main'
 import { createStore } from 'redux'
 import { rootReducer } from '../store'
 
+const TESTING = process.env.SPECTRON === 'true'
 // ==================================================================
 // electron related boiler-plate to create window with singe renderer
 let mainWindow: BrowserWindow | null
@@ -13,7 +14,11 @@ async function createWindow() {
         width: 800,
         height: 600,
         webPreferences: {
-            nodeIntegration: true,
+            preload: `${__dirname}/preload.js`,
+            // PROD app should be running with contextIsolation: true for security reasons. Disabled only while running e2e tests
+            contextIsolation: !TESTING,
+            // ONLY TRUE FOR TESTING - SPECTRON needs node integration to be able to access the remote modules.
+            nodeIntegration: TESTING,
         },
     })
     await mainWindow.loadURL(

examples/basic/src/renderer/index.ts

@@ -2,7 +2,7 @@
 
 import { createStore } from 'redux'
 import { rootReducer } from '../store'
-import { stateSyncEnhancer } from 'electron-redux'
+import { stateSyncEnhancer } from 'electron-redux/renderer'
 import {
     decrementGlobalCounter,
     decrementLocalCounter,

examples/basic/src/renderer/preload.ts

@@ -0,0 +1,2 @@
+// Include me in your preload script!
+require('electron-redux/preload')

examples/basic/webpack.renderer.js

@@ -9,6 +9,7 @@ module.exports = {
     mode: 'production',
     entry: {
         renderer: './src/renderer/index.ts',
+        preload: './src/renderer/preload.ts',
     },
     target: 'electron-renderer',
     plugins: [

main/package.json

@@ -0,0 +1,6 @@
+{
+    "internal": true,
+    "main": "../lib/main.js",
+    "module": "../es/main.js",
+    "types": "../types/main.d.ts"
+}

package.json

@@ -10,13 +10,16 @@
     ],
     "license": "MIT",
     "private": false,
-    "main": "lib/electron-redux.js",
-    "module": "es/electron-redux.js",
+    "main": "lib/index.js",
+    "module": "es/index.js",
     "types": "types/index.d.ts",
     "files": [
         "lib",
         "es",
-        "types"
+        "types",
+        "main",
+        "renderer",
+        "preload"
     ],
     "scripts": {
         "clean": "rimraf lib es coverage types",
@@ -48,7 +51,6 @@
         "@babel/preset-env": "^7.11.5",
         "@babel/preset-typescript": "^7.10.4",
         "@rollup/plugin-commonjs": "^15.0.0",
-        "@rollup/plugin-node-resolve": "^9.0.0",
         "@types/jest": "^26.0.14",
         "@types/lodash.isplainobject": "^4.0.6",
         "@types/lodash.isstring": "^4.0.6",

preload/package.json

@@ -0,0 +1,6 @@
+{
+    "internal": true,
+    "main": "../lib/preload.js",
+    "module": "../es/preload.js",
+    "types": "../types/preload.d.ts"
+}

renderer/package.json

@@ -0,0 +1,6 @@
+{
+    "internal": true,
+    "main": "../lib/renderer.js",
+    "module": "../es/renderer.js",
+    "types": "../types/renderer.d.ts"
+}

rollup.config.js

@@ -1,4 +1,3 @@
-import nodeResolve from '@rollup/plugin-node-resolve'
 import babel from 'rollup-plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import typescript from 'rollup-plugin-typescript2'
@@ -7,38 +6,26 @@ import pkg from './package.json'
 
 const extensions = ['.ts']
 
-const basePlugins = [
-    commonjs(),
-    nodeResolve({
-        extensions,
-    }),
-    typescript({ useTsconfigDeclarationDir: true }),
-]
+const basePlugins = [commonjs(), typescript({ useTsconfigDeclarationDir: true })]
+
+const baseConfig = {
+    external: Object.keys(pkg.peerDependencies || {}),
+    plugins: [
+        ...basePlugins,
+        babel({
+            extensions,
+        }),
+    ],
+}
 
 export default [
     // CommonJS
     {
-        input: 'src/index.ts',
-        output: { file: 'lib/electron-redux.js', format: 'cjs', indent: false },
-        external: Object.keys(pkg.peerDependencies || {}),
-        plugins: [
-            ...basePlugins,
-            babel({
-                extensions,
-            }),
-        ],
-    },
-
-    // ES
-    {
-        input: 'src/index.ts',
-        output: { file: 'es/electron-redux.js', format: 'es', indent: false },
-        external: Object.keys(pkg.peerDependencies || {}),
-        plugins: [
-            ...basePlugins,
-            babel({
-                extensions,
-            }),
+        ...baseConfig,
+        input: ['src/index.ts', 'src/main.ts', 'src/renderer.ts', 'src/preload.ts'],
+        output: [
+            { dir: 'lib', format: 'cjs' },
+            { dir: 'es', format: 'es' },
         ],
     },
 ]

src/composeWithStateSync.ts

@@ -1,44 +1,51 @@
 /* eslint-disable @typescript-eslint/ban-types */
 
 import { StoreEnhancer } from 'redux'
-import { forwardAction } from './forwardAction'
+import { forwardAction, ProcessForwarder } from './utils/forwardAction'
 import { StateSyncOptions } from './options/StateSyncOptions'
-import { stateSyncEnhancer } from './stateSyncEnhancer'
+import { StateSyncEnhancer } from './utils/types'
 
-const forwardActionEnhancer = (options?: StateSyncOptions): StoreEnhancer => (createStore) => (
-    reducer,
-    preloadedState
-) => {
+const forwardActionEnhancer = (
+    processForwarder: ProcessForwarder,
+    options?: StateSyncOptions
+): StoreEnhancer => (createStore) => (reducer, preloadedState) => {
     const store = createStore(reducer, preloadedState)
 
-    return forwardAction(store, options)
+    return forwardAction(store, processForwarder, options)
 }
 
-const extensionCompose = (options: StateSyncOptions) => (
-    ...funcs: StoreEnhancer[]
-): StoreEnhancer => {
+const extensionCompose = (
+    stateSyncEnhancer: StateSyncEnhancer,
+    processForwarder: ProcessForwarder,
+    options: StateSyncOptions
+) => (...funcs: StoreEnhancer[]): StoreEnhancer => {
     return (createStore) => {
         return [
             stateSyncEnhancer({ ...options, preventActionReplay: true }),
             ...funcs,
-            forwardActionEnhancer(options),
+            forwardActionEnhancer(processForwarder, options),
         ].reduceRight((composed, f) => f(composed), createStore)
     }
 }
 
-export function composeWithStateSync(
-    options: StateSyncOptions
-): (...funcs: Function[]) => StoreEnhancer
-export function composeWithStateSync(...funcs: StoreEnhancer[]): StoreEnhancer
-export function composeWithStateSync(
-    firstFuncOrOpts: StoreEnhancer | StateSyncOptions,
-    ...funcs: StoreEnhancer[]
-): StoreEnhancer | ((...funcs: StoreEnhancer[]) => StoreEnhancer) {
-    if (arguments.length === 0) {
-        return stateSyncEnhancer()
-    }
-    if (arguments.length === 1 && typeof firstFuncOrOpts === 'object') {
-        return extensionCompose(firstFuncOrOpts)
+export function createComposer(
+    stateSyncEnhancer: StateSyncEnhancer,
+    processForwarder: ProcessForwarder
+) {
+    return function composeWithStateSync(
+        firstFuncOrOpts: StoreEnhancer | StateSyncOptions,
+        ...funcs: Array<StoreEnhancer>
+    ): StoreEnhancer {
+        if (arguments.length === 0) {
+            return stateSyncEnhancer({})
+        }
+        if (arguments.length === 1 && typeof firstFuncOrOpts === 'object') {
+            return extensionCompose(stateSyncEnhancer, processForwarder, firstFuncOrOpts)()
+        }
+        return extensionCompose(
+            stateSyncEnhancer,
+            processForwarder,
+            {}
+        )(firstFuncOrOpts as StoreEnhancer, ...funcs)
     }
-    return extensionCompose({})(firstFuncOrOpts as StoreEnhancer, ...funcs)
 }

src/index.ts

@@ -1,13 +1,3 @@
-import { mainStateSyncEnhancer } from './mainStateSyncEnhancer'
-import { stopForwarding } from './utils'
-import { rendererStateSyncEnhancer } from './rendererStateSyncEnhancer'
-import { stateSyncEnhancer } from './stateSyncEnhancer'
-import { composeWithStateSync } from './composeWithStateSync'
+import { stopForwarding } from './utils/actions'
 
-export {
-    mainStateSyncEnhancer,
-    rendererStateSyncEnhancer,
-    stopForwarding,
-    stateSyncEnhancer,
-    composeWithStateSync,
-}
+export { stopForwarding }

src/mainStateSyncEnhancer.ts → src/main.ts

@@ -1,18 +1,23 @@
 import { ipcMain, webContents } from 'electron'
 import { Action, StoreEnhancer } from 'redux'
 import { IPCEvents } from './constants'
-import { forwardAction } from './forwardAction'
+import { forwardAction } from './utils/forwardAction'
+import { forwardActionToRenderers } from './main/forwardActionToRenderers'
 import { MainStateSyncEnhancerOptions } from './options/MainStateSyncEnhancerOptions'
-import { stopForwarding } from './utils'
+import { preventDoubleInitialization, stopForwarding } from './utils'
+import { StateSyncOptions } from './options/StateSyncOptions'
+import { createComposer } from './composeWithStateSync'
 
 /**
  * Creates new instance of main process redux enhancer.
  * @param {MainStateSyncEnhancerOptions} options Additional enhancer options
  * @returns StoreEnhancer
  */
-export const mainStateSyncEnhancer = (
-    options: MainStateSyncEnhancerOptions = {}
-): StoreEnhancer<any> => (createStore) => {
+export const stateSyncEnhancer = (options: MainStateSyncEnhancerOptions = {}): StoreEnhancer => (
+    createStore
+) => {
+    preventDoubleInitialization()
+
     return (reducer, preloadedState) => {
         const store = createStore(reducer, preloadedState)
 
@@ -42,6 +47,13 @@ export const mainStateSyncEnhancer = (
             })
         })
 
-        return forwardAction(store, options)
+        return forwardAction(store, forwardActionToRenderers, options)
     }
 }
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const composeWithStateSync = (
+    firstFuncOrOpts: StoreEnhancer | StateSyncOptions,
+    ...funcs: StoreEnhancer[]
+): StoreEnhancer =>
+    createComposer(stateSyncEnhancer, forwardActionToRenderers)(firstFuncOrOpts, ...funcs)

src/main/forwardActionToRenderers.ts

@@ -0,0 +1,17 @@
+import { webContents } from 'electron'
+import { IPCEvents } from 'src/constants'
+import { MainStateSyncEnhancerOptions } from 'src/options/MainStateSyncEnhancerOptions'
+import { validateAction } from 'src/utils'
+
+export const forwardActionToRenderers = <A>(
+    action: A,
+    options: MainStateSyncEnhancerOptions = {}
+): void => {
+    if (validateAction(action, options.denyList)) {
+        webContents.getAllWebContents().forEach((contents) => {
+            // Ignore chromium devtools
+            if (contents.getURL().startsWith('devtools://')) return
+            contents.send(IPCEvents.ACTION, action)
+        })
+    }
+}