[PS-2251] Implement argon2 kdf (#4468)

* Implement argon2

* Remove argon2 webassembly warning

* Replace magic numbers by enum

* move packages

* cleanup call to argon2

* update call to node argon2

* don't need  wasm-eval

* revert config changes

* Update libs/common/src/enums/kdfType.ts

Co-authored-by: Martin Weinelt <mweinelt@users.noreply.github.com>

* Update kdfType.ts

* apply DEFAULT_PBKDF2_ITERATIONS

* checkIfWasmSupported

Co-authored-by: Kyle Spearrin <kyle.spearrin@gmail.com>
Co-authored-by: Kyle Spearrin <kspearrin@users.noreply.github.com>
Co-authored-by: Martin Weinelt <mweinelt@users.noreply.github.com>

apps/browser/src/manifest.v3.json

@@ -71,7 +71,7 @@
   "optional_permissions": ["nativeMessaging"],
   "host_permissions": ["http://*/*", "https://*/*"],
   "content_security_policy": {
-    "extension_page": "script-src 'self' ; object-src 'self'"
+    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
   },
   "commands": {
     "_execute_action": {

apps/browser/webpack.config.js

@@ -66,6 +66,11 @@ const moduleRules = [
     test: /\.[jt]sx?$/,
     loader: "@ngtools/webpack",
   },
+  {
+    test: /\.wasm$/,
+    loader: "base64-loader",
+    type: "javascript/auto",
+  },
 ];
 
 const requiredPlugins = [
@@ -203,13 +208,18 @@ const mainConfig = {
       buffer: require.resolve("buffer/"),
       util: require.resolve("util/"),
       url: require.resolve("url/"),
+      fs: false,
+      path: false,
     },
   },
   output: {
     filename: "[name].js",
     path: path.resolve(__dirname, "build"),
   },
-  module: { rules: moduleRules },
+  module: {
+    noParse: /\.wasm$/,
+    rules: moduleRules,
+  },
   plugins: plugins,
 };
 
@@ -265,13 +275,23 @@ if (manifestVersion == 2) {
           test: /\.tsx?$/,
           loader: "ts-loader",
         },
+        {
+          test: /\.wasm$/,
+          loader: "base64-loader",
+          type: "javascript/auto",
+        },
       ],
+      noParse: /\.wasm$/,
     },
     resolve: {
       extensions: [".ts", ".js"],
       symlinks: false,
       modules: [path.resolve("../../node_modules")],
       plugins: [new TsconfigPathsPlugin()],
+      fallback: {
+        fs: false,
+        path: false,
+      },
     },
     dependencies: ["main"],
     plugins: [...requiredPlugins],

apps/desktop/webpack.main.js

@@ -73,6 +73,7 @@ const main = {
         "./src/package.json",
         { from: "./src/images", to: "images" },
         { from: "./src/locales", to: "locales" },
+        "../../node_modules/argon2-browser/dist/argon2.wasm",
       ],
     }),
     new EnvironmentPlugin({

apps/desktop/webpack.renderer.js

@@ -40,6 +40,11 @@ const common = {
         },
         type: "asset/resource",
       },
+      {
+        test: /\.wasm$/,
+        loader: "base64-loader",
+        type: "javascript/auto",
+      },
     ],
   },
   plugins: [],
@@ -122,6 +127,11 @@ const renderer = {
         test: /[\/\\]@angular[\/\\].+\.js$/,
         parser: { system: true },
       },
+      {
+        test: /\.wasm$/,
+        loader: "base64-loader",
+        type: "javascript/auto",
+      },
     ],
   },
   plugins: [

apps/web/src/app/settings/change-kdf.component.ts

@@ -7,7 +7,7 @@ import { LogService } from "@bitwarden/common/abstractions/log.service";
 import { MessagingService } from "@bitwarden/common/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
 import { StateService } from "@bitwarden/common/abstractions/state.service";
-import { DEFAULT_KDF_ITERATIONS, KdfType } from "@bitwarden/common/enums/kdfType";
+import { DEFAULT_PBKDF2_ITERATIONS, KdfType } from "@bitwarden/common/enums/kdfType";
 import { KdfRequest } from "@bitwarden/common/models/request/kdf.request";
 
 @Component({
@@ -20,7 +20,7 @@ export class ChangeKdfComponent implements OnInit {
   kdf = KdfType.PBKDF2_SHA256;
   kdfOptions: any[] = [];
   formPromise: Promise<any>;
-  recommendedKdfIterations = DEFAULT_KDF_ITERATIONS;
+  recommendedKdfIterations = DEFAULT_PBKDF2_ITERATIONS;
 
   constructor(
     private apiService: ApiService,

apps/web/src/locales/en/messages.json

@@ -135,7 +135,7 @@
   },
   "mx": {
     "message": "Mx"
-  },  
+  },
   "dr": {
     "message": "Dr"
   },

apps/web/webpack.config.js

@@ -79,6 +79,11 @@ const moduleRules = [
     test: /\.[jt]sx?$/,
     loader: "@ngtools/webpack",
   },
+  {
+    test: /\.wasm$/,
+    loader: "base64-loader",
+    type: "javascript/auto",
+  },
 ];
 
 const plugins = [
@@ -223,6 +228,7 @@ const devServer =
                 default-src 'self'
                 ;script-src
                   'self'
+                  'wasm-unsafe-eval'
                   'sha256-ryoU+5+IUZTuUyTElqkrQGBJXr1brEv6r2CA62WUw8w='
                   https://js.stripe.com
                   https://js.braintreegateway.com
@@ -349,13 +355,19 @@ const webpackConfig = {
       util: require.resolve("util/"),
       assert: false,
       url: false,
+      path: false,
+      fs: false,
+      process: false,
     },
   },
   output: {
     filename: "[name].[contenthash].js",
     path: path.resolve(__dirname, "build"),
   },
-  module: { rules: moduleRules },
+  module: {
+    noParse: /\.wasm$/,
+    rules: moduleRules,
+  },
   plugins: plugins,
 };