Working contextIsolation

lacymorrow · Jan 26, 2021 · af5f82f · af5f82f
1 parent 70d5e1f
commit af5f82f
Show file tree

Hide file tree

Showing 9 changed files with 7,543 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
 	},
 	"devDependencies": {
 		"ava": "^3.8.2",
-		"electron": "^9.4.1",
+		"electron": "^11.2.1",
 		"electron-builder": "^22.9.1",
 		"electron-builder-squirrel-windows": "^22.9.1",
 		"electron-reloader": "^1.2.0",

diff --git a/src/index.html b/src/index.html
@@ -3,8 +3,9 @@
 	<head>
 		<meta charset="utf-8">
 		<title>CrossOver</title>
-		<link rel="stylesheet" href="vendor/pickr.nano.min.css"/>
+		<link rel="stylesheet" href="vendor/pickr/pickr.nano.min.css"/>
 		<link rel="stylesheet" href="index.css">
+		<script type="text/javascript" src="vendor/pickr/pickr.min.js"></script>
 	</head>
 	<body>
 		<div class="container" id="drag-file">

diff --git a/src/main.js b/src/main.js
@@ -99,11 +99,11 @@ const createMainWindow = async () => {
 		width: 200,
 		height: 350,
 		webPreferences: {
-			nodeIntegration: true // We don't absolutely need this, but renderer require's some things
+			contextIsolation: true,
+			enableRemoteModule: true,
+			nodeIntegration: true, // We don't absolutely need this, but renderer require's some things
+			preload: path.join( __dirname, 'preload.js' )
 
-			// preload: path.join( __dirname, 'preload.js' )
-
-			// Sandbox: true,
 
 		}
 	} )
@@ -150,6 +150,9 @@ const createChildWindow = async _ => {
 		width: 600,
 		height: 500,
 		webPreferences: {
+			nodeIntegration: false, // is default value after Electron v5
+			contextIsolation: true, // protect against prototype pollution
+			enableRemoteModule: false, // turn off remote
 			preload: path.join( __dirname, 'preload-settings.js' )
 		}
 	} )

diff --git a/src/preload-settings.js b/src/preload-settings.js
@@ -3,35 +3,35 @@
 const path = require( 'path' )
 
 const {
+	contextBridge,
 	ipcRenderer
 } = require( 'electron' )
 
-window.crossover = {
-	path,
-	send: ( channel, data ) => {
+contextBridge.exposeInMainWorld('crossover', {
+  path,
+  send: ( channel, data ) => {
 
-		// Whitelist channels
-		const validChannels = new Set( [ 'log', 'save_crosshair', 'save_custom_image', 'close_chooser', 'get_crosshairs' ] )
+  	// Whitelist channels
+  	const validChannels = new Set( [ 'log', 'save_crosshair', 'save_custom_image', 'close_chooser', 'get_crosshairs' ] )
 
-		if ( validChannels.has( channel ) ) {
+  	if ( validChannels.has( channel ) ) {
 
-			ipcRenderer.send( channel, data )
+  		ipcRenderer.send( channel, data )
 
-		}
+  	}
 
-	},
+  },
 
-	receive: ( channel, func ) => {
+  receive: ( channel, func ) => {
 
-		const validChannels = new Set( [ 'load_crosshairs' ] )
+  	const validChannels = new Set( [ 'load_crosshairs' ] )
 
-		if ( validChannels.has( channel ) ) {
+  	if ( validChannels.has( channel ) ) {
 
-			// Deliberately strip event as it includes `sender`
-			ipcRenderer.on( channel, ( event, ...args ) => func( ...args ) )
+  		// Deliberately strip event as it includes `sender`
+  		ipcRenderer.on( channel, ( event, ...args ) => func( ...args ) )
 
-		}
+  	}
 
-	}
-
-}
+  }
+})
diff --git a/src/preload.js b/src/preload.js
@@ -0,0 +1,43 @@
+// Via https://github.com/reZach/secure-electron-template
+const {
+	contextBridge,
+	ipcRenderer
+} = require( 'electron' )
+const { is } = require( 'electron-util' )
+const Pickr = require( '@simonwep/pickr' )
+const { debounce } = require( './util' )
+
+contextBridge.exposeInMainWorld('crossover', {
+	colorPicker: Pickr.create,
+	debounce,
+	isMacOs: is.macos,
+  send: ( channel, data ) => {
+
+  	// Whitelist channels
+  	const validChannels = new Set( [ 'save_color', 'save_opacity', 'save_size', 'save_sight', 'center_window', 'open_chooser', 'save_custom_image' ] )
+
+  	if ( validChannels.has( channel ) ) {
+
+  		ipcRenderer.send( channel, data )
+
+  	}
+
+  },
+
+  receive: ( channel, func ) => {
+
+  	const validChannels = new Set( [ 'load_color', 'set_crosshair', 'set_custom_image', 'set_opacity', 'set_size', 'set_sight', 'lock_window' ] )
+
+  	if ( validChannels.has( channel ) ) {
+
+  		// Deliberately strip event as it includes `sender`
+  		ipcRenderer.on( channel, ( event, ...args ) => func( ...args ) )
+
+  	}
+
+  }
+})
+
+window.colorPicker = {
+	Pickr
+}
diff --git a/src/renderer.js b/src/renderer.js
@@ -1,10 +1,5 @@
 ( () => {
-
-	// Imports
-	const { ipcRenderer } = require( 'electron' )
-	const { is } = require( 'electron-util' )
-	const Pickr = require( '@simonwep/pickr' )
-	const { debounce } = require( './util' )
+	// const Pickr = require( '@simonwep/pickr' )
 
 	// DOM elements
 	const dragger = document.querySelector( '.drag-me' )
@@ -19,7 +14,7 @@
 	const systemModifier = document.querySelector( '#system-modifier' )
 
 	// Set System Modifier on first load
-	systemModifier.textContent = is.macos ? 'OPTION' : 'ALT'
+	systemModifier.textContent = window.crossover.isMacOs ? 'OPTION' : 'ALT'
 
 	// Create color picker
 	const pickr = Pickr.create( {
@@ -81,7 +76,7 @@
 
 	}
 
-	ipcRenderer.on( 'set_crosshair', ( event, arg ) => {
+	window.crossover.receive( 'set_crosshair', arg => {
 
 		setCrosshair( arg )
 
@@ -94,7 +89,7 @@
 
 	}
 
-	ipcRenderer.on( 'set_custom_image', ( event, arg ) => {
+	window.crossover.receive( 'set_custom_image', arg => {
 
 		setCustomImage( arg )
 
@@ -116,7 +111,7 @@
 
 	const loadColor = color => {
 
-		pickr.setColor( color )
+		window.pickr.setColor( color )
 		setColor( color )
 
 	}
@@ -129,40 +124,40 @@
 
 	}
 
-	pickr
+	window.pickr
 		.on( 'change', color => {
 
 			setColor( stripHex( color ) )
 
 		} )
 		.on( 'save', color => {
 
-			pickr.hide()
+			window.window.pickr.hide()
 
-			ipcRenderer.send( 'save_color', stripHex( color ) )
+			window.crossover.send( 'save_color', stripHex( color ) )
 
 		} )
 		.on( 'show', () => {
 
-			document.body.classList.add( 'pickr-open' )
+			document.body.classList.add( 'window.pickr-open' )
 
 		} )
 		.on( 'hide', () => {
 
-			document.body.classList.remove( 'pickr-open' )
+			document.body.classList.remove( 'window.pickr-open' )
 
 		} )
 
-	ipcRenderer.on( 'load_color', ( event, arg ) => {
+	window.crossover.receive( 'load_color', arg => {
 
 		loadColor( arg )
 
 	} )
 
 	// Opacity
-	const dOpacityInput = debounce( value => {
+	const dOpacityInput = window.crossover.debounce( value => {
 
-		ipcRenderer.send( 'save_opacity', value )
+		window.crossover.send( 'save_opacity', value )
 
 	}, 1000 )
 
@@ -182,16 +177,16 @@
 
 	} )
 
-	ipcRenderer.on( 'set_opacity', ( event, arg ) => {
+	window.crossover.receive( 'set_opacity', arg => {
 
 		setOpacity( arg )
 
 	} )
 
 	// Size
-	const dSizeInput = debounce( value => {
+	const dSizeInput = window.crossover.debounce( value => {
 
-		ipcRenderer.send( 'save_size', value )
+		window.crossover.send( 'save_size', value )
 
 	}, 1000 )
 
@@ -210,7 +205,7 @@
 
 	} )
 
-	ipcRenderer.on( 'set_size', ( event, arg ) => {
+	window.crossover.receive( 'set_size', arg => {
 
 		setSize( arg )
 
@@ -222,7 +217,7 @@
 		document.querySelector( '.sight' ).classList.remove( 'dot', 'cross', 'off' )
 		document.querySelector( '.sight' ).classList.add( sight )
 		document.querySelector( `.radio.${sight} input` ).checked = true
-		ipcRenderer.send( 'save_sight', sight )
+		window.crossover.send( 'save_sight', sight )
 
 	}
 
@@ -237,16 +232,16 @@
 
 	}
 
-	ipcRenderer.on( 'set_sight', ( event, arg ) => {
+	window.crossover.receive( 'set_sight', arg => {
 
 		setSight( arg )
 
 	} )
 
 	// Lock
-	ipcRenderer.on( 'lock_window', ( event, arg ) => {
+	window.crossover.receive( 'lock_window', arg => {
 
-		pickr.hide()
+		window.pickr.hide()
 		if ( arg ) {
 
 			document.body.classList.remove( 'draggable' )
@@ -262,21 +257,21 @@
 	// Center window on double click
 	dragger.addEventListener( 'dblclick', () => {
 
-		ipcRenderer.send( 'center_window' )
+		window.crossover.send( 'center_window' )
 
 	} )
 
 	crosshairElement.addEventListener( 'dblclick', () => {
 
-		ipcRenderer.send( 'open_chooser', crosshairImg.src )
+		window.crossover.send( 'open_chooser', crosshairImg.src )
 
 	} )
 
 	// Button to open crosshair chooser
 	selectCrosshairBtn.addEventListener( 'click', () => {
 
 		// Send open request with current crosshair
-		ipcRenderer.send( 'open_chooser', crosshairImg.src )
+		window.crossover.send( 'open_chooser', crosshairImg.src )
 
 	} )
 
@@ -315,7 +310,7 @@
 		dragDrop.classList.remove( 'dropping' )
 
 		// Send file path to main
-		ipcRenderer.send( 'save_custom_image', event.dataTransfer.files[0].path )
+		window.crossover.send( 'save_custom_image', event.dataTransfer.files[0].path )
 
 	} )
 

diff --git a/src/vendor/pickr/pickr.min.js b/src/vendor/pickr/pickr.min.js
diff --git a/src/vendor/pickr.nano.min.css → src/vendor/pickr/pickr.nano.min.css b/src/vendor/pickr.nano.min.css → src/vendor/pickr/pickr.nano.min.css