Add option to provide custom ssl certificates during development (#5845)

* Add option to provide custom SSL certificates when using HTTPS

* Update documentation with custom HTTPS certs

* Improve certificate validation and move to its own file

* Update https in development docs

Co-Authored-By: Brody McKee <mrmckeb@users.noreply.github.com>

* Add custom cert example to docs

* Rename https file and update error message

* Include original error message when custom ssl cert is invalid

* Add chalk to react-scripts dependencies

* Bump docs version to say that the new config will be available in 3.2.0

* Remove chalk dependency

* Update custom ssl version to 3.4.0 in docs

* Remove version from custom ssl certificate docs

Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com>

docusaurus/docs/using-https-in-development.md

@@ -32,6 +32,18 @@ HTTPS=true npm start
 
 Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.
 
+
+## Custom SSL certificate
+
+To set a custom certificate, set the `SSL_CRT_FILE` and `SSL_KEY_FILE` environment variables to the path of the certificate and key files in the same way you do for `HTTPS` above. Note that you will also need to set `HTTPS=true`.
+
+### Linux, macOS (Bash)
+
+```bash
+HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start
+```
+
+
 To avoid having to set the environment variable each time, you can either include in the `npm start` script like so:
 
 ```json
@@ -42,3 +54,4 @@ To avoid having to set the environment variable each time, you can either includ
 
 Or you can create a `.env` file with `HTTPS=true` set.
 [Learn more about environment variables in CRA](https://create-react-app.dev/docs/adding-custom-environment-variables).
+

packages/react-scripts/config/getHttpsConfig.js

@@ -0,0 +1,74 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const chalk = require('react-dev-utils/chalk');
+const paths = require('./paths');
+
+// Ensure the certificate and key provided are valid and if not
+// throw an easy to debug error
+function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
+  let encrypted;
+  try {
+    // publicEncrypt will throw an error with an invalid cert
+    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
+  } catch (err) {
+    throw new Error(
+      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
+    );
+  }
+
+  try {
+    // privateDecrypt will throw an error with an invalid key
+    crypto.privateDecrypt(key, encrypted);
+  } catch (err) {
+    throw new Error(
+      `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
+        err.message
+      }`
+    );
+  }
+}
+
+// Read file and throw an error if it doesn't exist
+function readEnvFile(file, type) {
+  if (!fs.existsSync(file)) {
+    throw new Error(
+      `You specified ${chalk.cyan(
+        type
+      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
+    );
+  }
+  return fs.readFileSync(file);
+}
+
+// Get the https config
+// Return cert files if provided in env, otherwise just true or false
+function getHttpsConfig() {
+  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
+  const isHttps = HTTPS === 'true';
+
+  if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
+    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
+    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
+    const config = {
+      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
+      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+    };
+
+    validateKeyAndCerts({ ...config, keyFile, crtFile });
+    return config;
+  }
+  return isHttps;
+}
+
+module.exports = getHttpsConfig;

packages/react-scripts/config/webpackDevServer.config.js

@@ -8,14 +8,14 @@
 // @remove-on-eject-end
 'use strict';
 
+const fs = require('fs');
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
 const paths = require('./paths');
-const fs = require('fs');
+const getHttpsConfig = require('./getHttpsConfig');
 
-const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 const host = process.env.HOST || '0.0.0.0';
 const sockHost = process.env.WDS_SOCKET_HOST;
 const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
@@ -94,8 +94,7 @@ module.exports = function(proxy, allowedHost) {
     watchOptions: {
       ignored: ignoredFiles(paths.appSrc),
     },
-    // Enable HTTPS if the HTTPS environment variable is set to 'true'
+    https: getHttpsConfig(),
-    https: protocol === 'https',
     host,
     overlay: false,
     historyApiFallback: {