feat(contextBridge): adding context bridge for protect exposed object…

… from electron

package.json

@@ -33,49 +33,48 @@
 		"changelog": "auto-changelog"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^11.0.0",
-		"@commitlint/config-conventional": "^11.0.0",
-		"@rollup/plugin-commonjs": "^17.0.0",
-		"@rollup/plugin-node-resolve": "^11.0.0",
-		"@rollup/plugin-typescript": "^8.0.0",
+		"@commitlint/cli": "^12.0.1",
+		"@commitlint/config-conventional": "^12.0.1",
+		"@rollup/plugin-commonjs": "^17.1.0",
+		"@rollup/plugin-node-resolve": "^11.2.0",
+		"@rollup/plugin-typescript": "^8.2.0",
 		"@tsconfig/svelte": "^1.0.10",
-		"@types/marked": "^1.2.2",
-		"@types/node": "^14.14.13",
+		"@types/marked": "^2.0.0",
+		"@types/node": "^14.14.35",
 		"@types/superagent": "^4.1.10",
 		"@types/superagent-proxy": "^2.0.0",
 		"@types/uuid": "^8.3.0",
 		"cross-env": "^7.0.3",
-		"electron": "^11.1.0",
-		"electron-builder": "^22.9.1",
-		"electron-reloader": "^1.1.0",
-		"husky": "^4.3.5",
+		"electron": "^12.0.2",
+		"electron-builder": "^22.10.5",
+		"electron-reloader": "^1.2.0",
+		"husky": "^5.2.0",
 		"npm-run-all": "^4.1.5",
 		"package-lock-sanitizer": "^1.0.1",
 		"prettier": "^2.2.1",
 		"pretty-quick": "^3.1.0",
-		"rollup": "^2.34.2",
-		"rollup-plugin-css-only": "^3.0.0",
-		"rollup-plugin-filesize": "^9.1.0",
+		"rollup": "^2.42.3",
+		"rollup-plugin-css-only": "^3.1.0",
+		"rollup-plugin-filesize": "^9.1.1",
 		"rollup-plugin-livereload": "^2.0.0",
 		"rollup-plugin-node-polyfills": "^0.2.1",
-		"rollup-plugin-svelte": "^7.0.0",
+		"rollup-plugin-svelte": "^7.1.0",
 		"rollup-plugin-svelte-svg": "^0.2.3",
 		"rollup-plugin-terser": "^7.0.2",
-		"sass": "^1.30.0",
-		"svelte": "^3.31.0",
-		"svelte-check": "^1.1.22",
-		"svelte-highlight": "^0.6.2",
-		"svelte-preprocess": "^4.6.1",
-		"tslib": "^2.0.3",
-		"typescript": "^4.1.3"
+		"sass": "^1.32.8",
+		"svelte": "^3.35.0",
+		"svelte-check": "^1.3.0",
+		"svelte-highlight": "^0.7.1",
+		"svelte-preprocess": "^4.6.9",
+		"tslib": "^2.1.0",
+		"typescript": "^4.2.3"
 	},
 	"dependencies": {
 		"auto-changelog": "^2.2.1",
-		"electron-log": "^4.3.0",
-		"electron-updater": "4.3.5",
-		"ky": "^0.26.0",
-		"marked": "^2.0.0",
-		"sirv-cli": "^1.0.10",
+		"electron-log": "^4.3.2",
+		"electron-updater": "4.3.8",
+		"marked": "^2.0.1",
+		"sirv-cli": "^1.0.11",
 		"superagent": "^6.1.0",
 		"superagent-proxy": "^2.1.0",
 		"uuid": "^8.3.2"

public/preload.js

@@ -0,0 +1,27 @@
+const {
+  contextBridge,
+  ipcRenderer,
+  shell
+} = require("electron");
+
+// Expose protected methods that allow the renderer process to use
+// the ipcRenderer without exposing the entire object
+contextBridge.exposeInMainWorld(
+  "remote", {
+      send: (channel, ...args) => {
+        ipcRenderer.send(channel, ...args);
+      },
+      receive: (channel, func) => {
+        ipcRenderer.on(channel, (event, ...args) => func(...args));
+      },
+      once: (channel, func) => {
+        ipcRenderer.once(channel, (event, ...args) => func(...args));
+      },
+      invoke: (channel, ...args) => {
+        return ipcRenderer.invoke(channel, ...args);
+      },
+      openDefaultBrowser: (url) => {
+        shell.openExternal(url); 
+      }
+  }
+);

src/App.svelte

@@ -8,13 +8,11 @@
 	import { Views } from 'models/skizzle/ViewsEnum';
 	import { offline, settings } from 'shared/stores/default.store';
 	import { onMount } from 'svelte';
-	import { SkizzleUpdaterEnum } from 'models/skizzle';
 	import { clientAuthenticated } from 'shared/stores/authentication.store';
 	import Loader from 'components/Loader';
 
-	const app = require('electron').ipcRenderer;
-
-	let update: SkizzleUpdaterEnum;
+	let update: boolean = false;
+	let version: string;
 
 	const views = {
 		[Views.Main]: Main,
@@ -33,31 +31,23 @@
 	window.addEventListener('offline', () => offline.set(true));
 
 	onMount(() => {
-		setInterval(() => {
-			app.send('check-for-update-request');
-		}, 5000);
+		setInterval(async () => {
+			version = await window.remote.invoke('check-for-update-request');
+		}, 60000);
 
-		app.on('check-for-update-response', (event: any, arg: SkizzleUpdaterEnum) => {
-			update = arg;
-		});
+		window.remote.receive('check-for-update-response', () => update = true);
 	});
+
+	const checkForUpdateRestart = () => window.remote.invoke('check-for-update-restart')
 </script>
 
 <Header />
 {#if update}
-	{#if update === SkizzleUpdaterEnum.Available}
-		<p>Une mise à jour est disponible, veux-tu la télécharger ?</p>
-		<button>Oui</button>
-		<button>Plus tard</button>
-	{/if}
-	{#if update === SkizzleUpdaterEnum.Progress}
-		<p>Téléchargement en cours...</p>
-	{/if}
-	{#if update === SkizzleUpdaterEnum.Downloaded}
-		<p>Mise à jour téléchargé, redemarrer ?</p>
-		<button>Redemarrer</button>
-		<button>Plus tard</button>
-	{/if}
+	<h1>{version}</h1>
+	<p>A new version has been downloaded.</p>
+	<p>Restart the application to apply the updates.</p>
+	<button>Later</button>
+	<button on:click={() => checkForUpdateRestart()}>Restart</button>
 {/if}
 <main style="--color:{$settings.theme}; --color-focus:{$settings.theme}80">
 	<Loader />

src/components/CustomListSettings/CustomListSettings.svelte

@@ -10,7 +10,6 @@
 	} from 'shared/stores/default.store';
 	import { ProviderEnum } from 'models/skizzle/ProviderEnum';
 	import Icons from 'components/icons';
-	const app = require('electron').ipcRenderer;
 
 	export let onDone: () => void;
 	export let id: string;
@@ -25,7 +24,7 @@
 		: [];
 
 	const onImport = async () => {
-		const result: any = await app.invoke('file-import');
+		const result: any = await window.remote.invoke('file-import');
 
 		if (result) {
 			const data = JSON.parse(result) as CustomListType;

src/components/Header/Header.svelte

@@ -1,12 +1,11 @@
 <script>
-	const app = require('electron').ipcRenderer;
 	import WindowsBar from './WindowsBar.svelte';
 	import MacosBar from './MacosBar.svelte';
 
 	let currentPlatform: string = navigator.platform === 'Win32' ? 'windows' : 'others';
-	let isMaximized: boolean = app.invoke('isMaximized') as boolean;
+	let isMaximized: boolean = window.remote.invoke('isMaximized') as boolean;
 
-	app.on('change-maximisze', (event: any, args: boolean) => {
+	window.remote.receive('change-maximisze', (args: boolean) => {
 		isMaximized = args
 	});
 </script>

src/components/Header/MacosBar.svelte

@@ -1,16 +1,17 @@
 <script>
 	import { WindowEnum } from "models/skizzle";
-	const app = require('electron').ipcRenderer;
 
 	export let isMaximized: boolean = false;
+
+	const changeState = (state: WindowEnum) => window.remote.send('state', { state })
 </script>
 
 <style src="./MacosBar.scss">
 </style>
 
 <div class="window-controls">
 	<button
-		on:click={() => app.send('state', { state: WindowEnum.Hide })}
+		on:click={() => changeState(WindowEnum.Hide)}
 		class="button close-button">
 		<svg
 			width="16"
@@ -25,7 +26,7 @@
 		</svg>
 	</button>
 	<button
-		on:click={() => app.send('state', { state: WindowEnum.Minimize })}
+		on:click={() => changeState(WindowEnum.Minimize)}
 		class="button min-button">
 		<svg
 			width="16"
@@ -38,7 +39,7 @@
 	</button>
 	{#if !isMaximized}
 		<button
-			on:click={() => app.send('state', { state: WindowEnum.Maximize })}
+			on:click={() => changeState(WindowEnum.Maximize)}
 			class="button max-button">
 			<svg
 				width="16"
@@ -54,7 +55,7 @@
 		</button>
 	{:else}
 		<button
-			on:click={() => app.send('state', { state: WindowEnum.Unmaximize}) }
+			on:click={() => changeState(WindowEnum.Unmaximize) }
 			class="button restore-button">
 			<svg
 				width="16"

src/components/Header/WindowsBar.svelte

@@ -1,8 +1,9 @@
 <script>
 	import { WindowEnum } from "models/skizzle";
-	const app = require('electron').ipcRenderer;
 
 	export let isMaximized: boolean = false;
+
+	const changeState = (state: WindowEnum) => window.remote.send('state', { state })
 </script>
 
 <style src="./WindowsBar.scss">
@@ -11,23 +12,23 @@
 
 <div class="window-controls">
 	<button
-		on:click={() => app.send('state', { state: WindowEnum.Minimize })}
+		on:click={() => changeState(WindowEnum.Minimize)}
 		class="button min-button">
 		<svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg">
 			<path d="M11 4.399V5.5H0V4.399h11z" fill="#444" />
 		</svg>
 	</button>
 	{#if !isMaximized}
 		<button
-			on:click={() =>  app.send('state', { state: WindowEnum.Maximize })}
+			on:click={() => changeState(WindowEnum.Maximize)}
 			class="button max-button">
 			<svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<path d="M11 0v11H0V0h11zM9.899 1.101H1.1V9.9h8.8V1.1z" fill="#444" />
 			</svg>
 		</button>
 	{:else}
 		<button
-			on:click={() =>  app.send('state', { state: WindowEnum.Unmaximize })}
+			on:click={() => changeState(WindowEnum.Unmaximize)}
 			class="button restore-button">
 			<svg width="11" height="11" fill="none" xmlns="http://www.w3.org/2000/svg">
 				<path
@@ -39,7 +40,7 @@
 		</button>
 	{/if}
 	<button
-		on:click={() =>  app.send('state', { state: WindowEnum.Hide })}
+		on:click={() => changeState(WindowEnum.Hide)}
 		class="button close-button">
 		<svg
 			class="close"

src/components/Main/Main.svelte

@@ -10,7 +10,6 @@
 	import Modale from 'components/Modale';
 	import CustomListSettings from 'components/CustomListSettings';
 	import type { CustomListType, ExportType } from 'models/skizzle';
-	const app = require('electron').ipcRenderer;
 
 	let creatingList: boolean = false;
 	let modifyingListId: string = null;
@@ -27,7 +26,7 @@
 		);
 
 		if (currentTabData) {
-			const result: boolean = await app.invoke('file-export', {
+			const result: boolean = await window.remote.invoke('file-export', {
 				name: currentTabData.name,
 				repositoriesIds: currentTabData.repositoriesIds,
 			} as ExportType);

src/components/Pullrequest/Pullrequest.svelte

@@ -3,7 +3,6 @@
 	import type { PullRequestType } from 'models/skizzle';
 	import Labels from 'components/Labels';
 	import Modale from 'components/Modale';
-	const { shell } = require('electron');
 	import { isFetchingData } from 'shared/stores/default.store';
 	import Avatar from 'components/Avatar';
 	import Reviews from 'components/Reviews';
@@ -14,7 +13,7 @@
 
 	let detailsModal = false;
 
-	const openLink = () => shell.openExternal(pullRequest.url);
+	const openLink = () => window.remote.openDefaultBrowser(pullRequest.url);
 	const openModale = () => (detailsModal = true);
 	const closeModale = () => (detailsModal = false);
 </script>

src/components/Settings/Settings.svelte

@@ -24,7 +24,7 @@
 			}`}
 		>
 			<div class="field">
-				<Range bind:value={$settings.refresh_delay} min={1} step={1} max={15} />
+				<Range bind:value={$settings.refresh_delay} min={5} step={5} max={30} />
 			</div>
 		</Fieldset>