leather-io · kyranjamie · Oct 27, 2020 · Nov 1, 2020 · Nov 3, 2020
diff --git a/app/app-dev.html b/app/app-dev.html
@@ -3,6 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <title>Stacks Wallet</title>
+    <meta http-equiv="Content-Security-Policy"
+      content="default-src 'none'; font-src *; img-src data:; style-src 'unsafe-inline'; script-src * 'unsafe-inline'; connect-src *;" />
   </head>
 
   <body>

diff --git a/app/app.html b/app/app.html
@@ -5,7 +5,7 @@
     <title>Stacks Wallet</title>
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'none'; font-src 'self'; img-src data:; style-src 'unsafe-inline'; script-src 'self' 'unsafe-eval' 'nonce-6ca3c3e1fcd34bbc8cfaeceaa8106e36'; connect-src *;"
+      content="default-src 'none'; font-src 'self'; img-src data:; style-src 'unsafe-inline'; script-src 'self' 'nonce-6ca3c3e1fcd34bbc8cfaeceaa8106e36'; connect-src *;"
     />
   </head>
 

diff --git a/app/argon2.wasm b/app/argon2.wasm
diff --git a/app/crypto/key-generation.spec.ts b/app/crypto/key-generation.spec.ts
@@ -1,6 +1,6 @@
 import crypto from 'crypto';
 
-import { generateSalt, deriveKey } from './key-generation';
+import { generateSalt, deriveKey, deriveArgon2Key } from './key-generation';
 
 // https://stackoverflow.com/a/52612372/1141891
 Object.defineProperty(global, 'crypto', {
@@ -9,11 +9,11 @@ Object.defineProperty(global, 'crypto', {
   },
 });
 
-describe(deriveKey.name, () => {
+describe(deriveArgon2Key.name, () => {
   test('a argon2id hash is returned', async () => {
     const salt = '$2a$12$BwnByfKrfRbpxsazN712T.';
     const pass = 'f255cadb0af84854819c63f26c53e1a9';
-    const { derivedKeyHash } = await deriveKey({ salt, pass });
+    const { derivedKeyHash } = await deriveArgon2Key({ salt, pass });
     const expectedResultArray = [
       94,
       0,

diff --git a/app/crypto/key-generation.ts b/app/crypto/key-generation.ts
@@ -1,12 +1,16 @@
+import { ipcRenderer } from 'electron';
 import { memoizeWith, identity } from 'ramda';
 import argon2, { ArgonType } from 'argon2-browser';
 
-import { delay } from '@utils/delay';
+interface DeriveKeyArgs {
+  pass: string;
+  salt: string;
+}
 
-export async function deriveKey({ pass, salt }: { pass: string; salt: string }) {
-  // Without this additional delay of 1ms, an odd behaviour with the argon2 library
-  // causes the promise to be render blocking
-  await delay(1);
+/**
+ * This method **must not** be imported by code on the renderer thread
+ */
+export async function deriveArgon2Key({ pass, salt }: DeriveKeyArgs) {
   const result = await argon2.hash({
     pass,
     salt,
@@ -17,6 +21,14 @@ export async function deriveKey({ pass, salt }: { pass: string; salt: string })
   return { derivedKeyHash: result.hash };
 }
 
+export async function deriveKey({ pass, salt }: DeriveKeyArgs) {
+  console.log('sending derive-key');
+  return ipcRenderer.invoke('derive-key', {
+    pass,
+    salt,
+  });
+}
+
 export function generateRandomHexString() {
   const size = 16;
   const randomValues = [...crypto.getRandomValues(new Uint8Array(size))];

diff --git a/app/main.dev.ts b/app/main.dev.ts
@@ -14,12 +14,12 @@
  * `./app/main.prod.js` using webpack. This gives us some performance wins.
  */
 import path from 'path';
-import { app, BrowserWindow } from 'electron';
+import { app, BrowserWindow, ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import windowState from 'electron-window-state';
-
 import MenuBuilder from './menu';
+import { deriveArgon2Key } from './crypto/key-generation';
 
 // CSP enabled in production mode, don't warn in development
 delete process.env.ELECTRON_ENABLE_SECURITY_WARNINGS;
@@ -86,8 +86,8 @@ const createWindow = async () => {
             nodeIntegration: true,
           }
         : {
-            nodeIntegration: false,
-            contextIsolation: false,
+            nodeIntegration: true,
+            contextIsolation: true,
             webSecurity: true,
             preload: path.join(__dirname, 'dist/renderer.prod.js'),
           },
@@ -125,6 +125,12 @@ const createWindow = async () => {
       mainWindow.focus();
       hasFocusedOnInitialLoad = true;
     }
+    registerIpcHandlers();
+
+    ipcMain.on('xxx', e => {
+      console.log('Logging main');
+      e.sender.send('xxx-reply');
+    });
   });
 
   mainWindow.on('closed', () => {
@@ -153,8 +159,19 @@ app.on('window-all-closed', () => {
 // eslint-disable-next-line @typescript-eslint/no-misused-promises
 app.on('ready', createWindow);
 
+app.allowRendererProcessReuse = false;
+
 app.on('activate', () => {
   // On macOS it's common to re-create a window in the app when the
   // dock icon is clicked and there are no other windows open.
   if (mainWindow === null) void createWindow();
 });
+
+function registerIpcHandlers() {
+  // Internally `argon2-browser` uses wasm which is prohibited by the renderer's CSP
+  ipcMain.handle('derive-key', async (_event, { pass, salt }: Record<'pass' | 'salt', string>) => {
+    const result = await deriveArgon2Key({ pass, salt });
+    console.log({ result });
+    return result;
+  });
+}
diff --git a/app/package.json b/app/package.json
@@ -17,6 +17,8 @@
     "@blockstack/keychain": "0.13.0-beta.2",
     "@blockstack/stacks-transactions": "0.6.1-beta.2",
     "@ledgerhq/hw-transport-node-hid": "5.23.2",
-    "bitcoinjs-lib": "^5.2.0"
+    "bitcoinjs-lib": "^5.2.0",
+    "bufferutil": "^4.0.1",
+    "utf-8-validate": "5.0.2"
   }
 }
diff --git a/app/pages/onboarding/01-welcome/welcome.tsx b/app/pages/onboarding/01-welcome/welcome.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import routes from '@constants/routes.json';
@@ -9,10 +9,22 @@ import {
   OnboardingText,
 } from '@components/onboarding';
 import { useBackButton } from '@hooks/use-back-url';
+import { ipcRenderer } from 'electron';
 
 export const Welcome: React.FC = () => {
   const history = useHistory();
   useBackButton(null);
+
+  useEffect(() => {
+    console.log('setting effect');
+    setInterval(() => {
+      console.log('sending event');
+      ipcRenderer.send('xxx');
+    }, 3000);
+
+    ipcRenderer.on('xxx-reply', () => console.log('logging local reply'));
+  }, []);
+
   return (
     <Onboarding>
       <OnboardingTitle>Stacks Wallet</OnboardingTitle>

diff --git a/app/pages/onboarding/05-secret-key/secret-key.tsx b/app/pages/onboarding/05-secret-key/secret-key.tsx
@@ -42,8 +42,8 @@ export const SecretKey: React.FC = () => {
         <Text textStyle="body.small" mt="loose" mx="loose" lineHeight="20px" display="block">
           {mnemonic}
         </Text>
-        <Button variant="link" mt="tight">
-          <Text textStyle="caption.medium" fontSize="12px" onClick={onCopy}>
+        <Button variant="link" mt="tight" onClick={onCopy}>
+          <Text textStyle="caption.medium" fontSize="12px">
             Copy to clipboard
           </Text>
         </Button>

diff --git a/app/utils/ajv-mock.js b/app/utils/ajv-mock.js
@@ -0,0 +1,15 @@
+/* eslint-disable no-warning-comments */
+
+// This file acts as stub for Ajv, a schema validating library,
+// that has been ignored with Webpack, owing to its use of `eval`
+// Read more about Ajv's CSP issues here:
+// https://github.com/ajv-validator/ajv#ajv-and-content-security-policies-csp
+// Read more about the library causing the issue here
+// https://github.com/sindresorhus/conf/issues/126
+
+module.exports = function () {
+  return {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    compile: () => {},
+  };
+};
diff --git a/app/yarn.lock b/app/yarn.lock
@@ -476,6 +476,13 @@ buffer@^5.5.0, buffer@^5.6.0:
     base64-js "^1.0.2"
     ieee754 "^1.1.4"
 
+bufferutil@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/bufferutil/-/bufferutil-4.0.1.tgz#3a177e8e5819a1243fe16b63a199951a7ad8d4a7"
+  integrity sha512-xowrxvpxojqkagPcWRQVXZl0YXhRhAtBEIq3VoER1NH5Mw1n1o0ojdspp+GS2J//2gCVyrzQDApQ4unGF+QOoA==
+  dependencies:
+    node-gyp-build "~3.7.0"
+
 c32check@^1.0.1, c32check@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/c32check/-/c32check-1.1.2.tgz#e84a66366bf9964ddf8d7b1f86d0e79281b8c8bd"
@@ -999,6 +1006,11 @@ node-fetch@2.6.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
   integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
 
+node-gyp-build@~3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-3.7.0.tgz#daa77a4f547b9aed3e2aac779eaf151afd60ec8d"
+  integrity sha512-L/Eg02Epx6Si2NXmedx+Okg+4UHqmaf3TNcxd50SF9NQGcJaON3AtU++kax69XV7YWz4tUspqZSAsVofhFKG2w==
+
 node-hid@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/node-hid/-/node-hid-1.3.0.tgz#346a468505cee13d69ccd760052cbaf749f66a41"
@@ -1461,6 +1473,13 @@ usb@^1.6.3:
     nan "2.13.2"
     prebuild-install "^5.3.3"
 
+utf-8-validate@5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.2.tgz#63cfbccd85dc1f2b66cf7a1d0eebc08ed056bfb3"
+  integrity sha512-SwV++i2gTD5qh2XqaPzBnNX88N6HdyhQrNNRykvcS0QKvItV9u3vPEJr+X5Hhfb1JC0r0e1alL0iB09rY8+nmw==
+  dependencies:
+    node-gyp-build "~3.7.0"
+
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"

diff --git a/configs/webpack.config.base.js b/configs/webpack.config.base.js
@@ -59,6 +59,9 @@ export default {
     extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
     modules: [path.join(__dirname, '..', 'app'), 'node_modules'],
     plugins: [new TsconfigPathsPlugin()],
+    alias: {
+      ajv: path.resolve(__dirname, '..', 'app/utils/ajv-mock.js'),
+    },
   },
 
   plugins: [
@@ -68,5 +71,8 @@ export default {
     }),
 
     new webpack.NamedModulesPlugin(),
+
+    // Ignore Ajv lib, used by conf, used by electron-store, see `ajv-mock.js`
+    new webpack.IgnorePlugin(/ajv/, /^conf$/),
   ],
 };
diff --git a/jest.config.js b/jest.config.js
@@ -18,7 +18,7 @@ module.exports = {
   setupFiles: ['./internals/scripts/CheckBuildsExist.js'],
   globals: {
     'ts-jest': {
-      tsConfig: 'tsconfig.tests.json',
+      tsconfig: 'tsconfig.tests.json',
       diagnostics: {
         ignoreCodes: [6133],
       },

diff --git a/package.json b/package.json
@@ -170,9 +170,9 @@
     "cross-spawn": "7.0.3",
     "csstype": "3.0.4",
     "detect-port": "1.3.0",
-    "electron": "8.3.1",
-    "electron-builder": "22.8.0",
-    "electron-devtools-installer": "3.0.0",
+    "electron": "8.5.3",
+    "electron-builder": "22.9.1",
+    "electron-devtools-installer": "3.1.1",
     "electron-rebuild": "1.11.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.5",
@@ -216,21 +216,21 @@
     "@styled-system/theme-get": "5.1.2",
     "@tippyjs/react": "4.2.0",
     "@zondax/ledger-blockstack": "0.0.2",
-    "argon2-browser": "1.15.1",
+    "argon2-browser": "1.15.2",
     "axios": "0.21.0",
     "bignumber.js": "9.0.1",
     "bip39": "3.0.2",
     "bitcoin-address-validation": "1.0.2",
     "bn.js": "5.1.3",
-    "buffer": "5.6.1",
+    "buffer": "5.7.0",
     "c32check": "1.1.2",
     "connected-react-router": "6.8.0",
     "core-js": "3.6.5",
     "dayjs": "1.9.4",
     "devtron": "1.4.0",
     "electron-debug": "3.1.0",
-    "electron-log": "4.2.2",
-    "electron-store": "6.0.0",
+    "electron-log": "4.2.4",
+    "electron-store": "6.0.1",
     "electron-updater": "4.3.1",
     "electron-window-state": "5.0.3",
     "formik": "2.2.1",